node.jsで、im@sparqlに当日の誕生日を訊いてつぶやくやつ+
1個前の記事のやつ、誕生日のアイドルのプロフィールを画像化してくっつけたら良いのでは??と案をいただいたので、実装しました。
本日の誕生日
— croMisaP (@croMisa) May 14, 2018
牙崎漣:プロフィール→https://t.co/cuMfvLNqWK pic.twitter.com/j7ZKNeTYK1
画像生成に使用したのはwebshotというパッケージ。
なんか関数一発でまぁまぁ良いサイズで撮れたので採用しました。
あと、コールバックが増えてきたので、Qも導入しました。
やってることとしては、1つ目のthenでは、まずrequestを使ってSPARQLをたたきます。
2つ目のthenで、取得したjsonをforEachします。本当は、Q.all()
みたいなの使えばよかったんですが、一つ前のthenから受け取ったものを使ってall()
を回すのが分からなくて、thenの中でforEachし、indexとlengthが等しければresolveして抜けるようにしました。
forEachでは、json内にあるプロフィールのURLをスクショして鯖に保存しています。なんでファイルに残しているかというとデバッグ用です。
また、同時にTwitterにアップロードもしています。その結果得られる画像のIDを配列に保存してそれを次のthenに渡します。
次のthenでは、実際にツイート内容を作成してつぶやいています。mediaは調べたら、stringで、","区切りで良いみたいです。
以下、gist
node.jsで、im@sparqlに当日の誕生日を訊いてつぶやくやつ
GW初日です(あでぃしょなるたいむ)。
いつもは朝早くに出勤しないといけないので早めに寝るのですが、
GWなので深夜にコーヒー淹れてのコーディングを楽しみました。
内容はほとんどim@sparqlの誕生日表示のコピペですが、
なんか僕のアカウントでつぶやかせたかったのでnode.jsで書きました。
やってることとしては、今日の日にちを含む(=一致する)誕生日のアイドルを訊いて、
名前とim@sparqlの詳細表示サービスのURLを貼る感じですね。
余談ですが、
サイト開始時からある誕生日表示機能も、DBに283アイドルを追加したら勝手に283アイドルも誕生日表示してくれたので、
やっぱSPARQLというか、Linked RDFのオープンデータとしての利点が冴えてんなぁと思った4/25(櫻木真乃の誕生日)
以下、gist
THE IDOLM@STER MILLION THE@TER GENERATION 05 夜想令嬢 -GRAC&E NOCTURNE- 辞典
目的は物語を読む上での知識を提供するものであり、
物語に対して考察をしたものではありません。
なんとなく知りたくなった単語をピックアップしています。
主にWikipediaとかWeblioとか...
皆様がこの物語を受け取る手助けになれば幸いです。
昏き星、遠い月
「昏」
- 日暮れ、日没直後の時間帯「黄昏時」
- 道理にくらいこと「混迷」 → 専門外なこと
- 目がくらむ「昏倒」
ニュアンスとしては、見通しが良くないこと(?)
「獨」
「独」の旧字体
夜想令嬢 -GRAC&E NOCTURNE-
GRAC&E
たぶん、英単語"Grace"。間に挟まる"&"とは...
1. 優美,優雅,気品,しとやかさ,上品
2. (上の立場の人が示す)親切,好意,思いやり
3. [公爵・公爵夫人・大司[主]教の敬称に用いて] 閣下,閣下夫人,猊下(しかし、今回の地位は"伯")
NOCTURNE
日本語訳:夜想曲
おそらく、"夜想令嬢"と"grace nocturne"は対訳関係
第一幕
ヴァンパイア
吸血鬼。
民話や伝説が広い範囲で存在するが、現代日本人が一般的に想像する吸血鬼は、創作物の影響が強い
- 葬られた死者が、その肉体で人間や家畜を襲う
- バルカン半島スラブ人地域では、4世紀頃既に信じられてた 血を飲む、銀を恐れる、退治(殺害)方法までも確立されていた
- 一般的な吸血鬼像は、古代ルーマニアから続くものである
- 吸血鬼に殺されると吸血鬼になる
Prelude
「終焉の無い呪い」への前触れであり、
"-GRAC&E NOCTURNE-"のシナリオの前奏曲でもある
クリスティーナ
女性名。 「キリスト教徒」を意味する古代ギリシア語 Χριστιανός(christianos)に由来し、そのラテン語に転訛した形である christianus の女性形が christina である。
エドガー
ヨーロッパの男性名。
古英語のead(富,幸せ,豊かさ)とgar(槍)を由来とする。
エレオノーラ
元は、「エレオノーレ(Eleonore)」
ヨーロッパで用いられるプロヴァンス起源の女性名。
イタリア語圏で、エレオノーラ(Eleonora)となる。
プロヴァンス語
フランス,イタリア,モナコにまたぐイタリック語派
アレクサンドラ
ヨーロッパの女性名。
アレクサンドロスに由来する男性名(アレクサンダー,アレクサンドルなど)の女性形。
アレクサンドロス
ギリシャ人の人名であり、古典ギリシャ語で「男達を庇護する者」を意味する。
元来はギリシャ神話で戦場における戦士の庇護者である女神、ヘーラーの称号の1つであった。
ノエル
- フランス語でクリスマスの季節や歌のこと
- ヨーロッパ系の男性名(NoëlまたはNoel) 女性形はNoëlleまたはNoelle
国境付近に防備の必要上置いた軍事地区(辺境地区、辺境伯領)の指揮官として設けられた地方長官の名称
異民族と接しているため、他の地方長官よりも広大な領域と大きな権限が与えられており、一般の地方長官である爵位伯よりも高い地位にある役職とみなされていた。
魔除けの香
魔除けの香→ハーブ+魔女....?
- 魔女狩り:15世紀から18世紀(科学の発展)まで
ポマンダー:中世(特に16世紀)に流行した香り玉
- 香りと健康は関連性があるとされていた
- 金属の装飾品の中にハーブやスパイスを詰め、魔除けとして持ち歩いた
不浄を祓う剣の使い手
魔を払う・不浄を祓うと言えば銀
一般的だった鋼と比べ比重が大きく高価であるため、貴族としても剣士としてもアレクサンドラは優秀
銀:10.50[g/cm^3]
スラブ人に伝わる吸血鬼と戦う宿命を持つ"クルースニク"がある
白い羊膜に包まれて生まれ、赤い羊膜に包まれて生まれてくる吸血鬼クドラクとの戦いを宿命とする
普段は青年だが、クドラクと戦う際は互いに馬,豚,牛,猪などに変身して戦う。この時、クルースニクが化けている動物は白いので、簡単に見分けがつく。
民の血を啜る貴族
こういうよくある悪い貴族も日本だけでなく世界中で吸血鬼と呼ばれる
あのマルクスも資本を、「吸血鬼のように、行きている労働者を吸うことで成り立つ」と定義してる(らしい)
第ニ幕
約束の地
ヘブライ語聖書に記された、ユダヤ教、キリスト教において、神がイスラエルの民に与えることを約束した土地。
約束の地は、「エジプトの川」からユーフラテス川までの領域とされ、"パレスチナ"とは別概念である。
聖書での言及は地域の設定,譲与(?)のみで、その土地がどうこうと言った内容は無い
ルカ
アンジェラ
英語、イタリア語などの女性名
ドイツ語ではアンゲラとなる
Overture
- 序曲,前奏曲
- 語源:古期フランス語「開始」の意
ヴァンパイアとなったエドガーとクリスの旅、
香が無くなり目覚めてしまったノエル、
「終焉の無い呪い」が「開始」するのでした...
Everlasting
- 永久に続く,不朽の,永遠の
- 果てしのない,退屈するほど長い
- 永久,永遠
試聴ではエドガーとクリス部分のみ。
それは、CDでのみ語られたエレオノーラとアレクサンドラの物語が歌詞に含まれているからです。
DTBのリスペクトゲームを作った、よ
あけましておめでとうございます
そりゃ新年ですから。もう16日ですけど。
はじめに
本年はこんな感じの年賀状を、少ない友人に送りつけました。
いわゆるDTB(どうぶつタワーバトル)っぽさを狙ったデザインです。
右上にQRコードを置いたのですが、これが絵がかけない人なりのおまけってことです。
どこに繋がってるかというと→DogTowerBattle
これまたDTBっぽいゲームが出てきました。
そうです、おまけでDTBのリスペクトゲームを作りました。
本編
元々QRコードで公開する予定だったので、OSに依存にしないWebアプリとして作りました。
と、同時にUnityのWebGLやってみたいなぁ、という気持ちがあったのを思い出して、UnityのWebGLで公開することを決めました。
まだ正式にはモバイルでwebGLをサポートしてないみたいですけど、まぁ3Dのゲームじゃないし大丈夫っしょ。←実際大丈夫でした(iPhone6s Chrome)。
作成
本作は、最初にTitle Sceneに降りたって、Play Sceneへ移動、終わったらその上にResult Sceneを重ねるという構成にします。Result後はまたPlay Sceneへ移動もできるようにします。
Title
Canvasにそれっぽいタイトルを作成し、Pushテキストを表示する。←これは表示するテキスト以上の大きさのオブジェクトにして、Play Sceneへ移動するタッチイベントを設定する。
上部のRank Text「高く積み上げて点数を稼ごう!」は、非同期でDBへユーザーのハイスコアを取得していって、取得でき次第切り替える。(参考:当記事の画像2枚目)
DB参考↓
qiita.com
あと、ランダムでテキトーにDogを降らせます。賑やかしですね。
Play
あー、CanvasとMainCameraの表示エリアの大きさの差が大きすぎる~~
フィールドはBoxで作って、回転ボタンは左右を用意。
新しいパーツを出すタイミングは、最新のパーツが静止したタイミングRigidbody2D.IsSleeping()
で出します。
本家と同様、落ちたらゲーム終了です。
Result
Play Sceneに重ねます。
ボタンは再挑戦(→Play Scene読込)と、Tweet(→Tweet Intentで結果をツイート)の2種。
その上のResult Textは、DBへ非同期でアクセスして、取得でき次第順位を表示します。
おわりに
以上が簡単な作った内容です。
説明が少なすぎると思うので、githubのリンクを貼っておきます。
github.com
色々と配慮して足りてないので、あくまでもソースコードなどの参考用ということで。
im@sparqlで読み取るアイドルちゃんのデータ
こちらはアイドルマスターアドベントカレンダー6日目の記事です。前日は、popkirbyさんのカラースキームを作ろうです。
一昨日ぶりです。
im@sparqlはご存知でしょうか?
広がるアイマスワールドをオープンデータ化しようというもので、僕が精力的に取り組んでいるプロジェクトです。
名前の由来は、
SPARQLというのが分からないという方はWikipediaか仕様(日本語訳)を見ていただければ...
im@sparqlではいろんなものが登録されています。アイドル,スタッフのプロフィールからユニット情報、セリフテキストや総選挙結果などがあります。
これらの情報から、欲しい情報の条件を決めてSPARQLでクエリを立てることで、アイマスのDBを持つこと無く、また自分でいちいち手で調べること無く欲しい情報が手に入ります。
これをim@sparqlへコピペして送ると結果が表示されます。
僕のgist.githubには他にもたくさんのサンプルクエリを用意しているので、SPARQLのリファレンスと併せて見ていただければ望みのデータが得られると思います。(アイドルの体表面積を3つの計算方法で取得し、デュポア式で並び替えなんていうものを用意しております。)
ただクエリを打ってデータが返ってきて喜ぶのは僕だけだと思うので、一般的な使い方も説明します。
https://sparql.crssnky.xyz/spql/imas/query
に、GetやPostメソッドで送ることでデータを返してくれます。Getを例にするとそのURLにquery
パラメータでURLエンコードしたクエリを入れることでクエリをSPARQLサーバーへ渡せます。
例:im@sparqlの誕生日お祝いメッセージJS
(d3.js使ってるのは僕がアホだからです。お好きなのを使って下さい。)
基本はJSONですが、output
パラメータでxmlを指定できます。(他にもあるのかな...?
以上が基本的な説明と使い方です。
手の付けられないほど大きくなったアイマスワールドですが、一度アイドルちゃんのデータを整理して見るのも一興では無いでしょうか?
追伸:
im@sparqlはオープンソースのオープンデータとなっていま す。
GitHub - imas/imasparql: imasparql's RDFs
まだまだ足りないですし、僕の書いたことが間違ってる事もあります。
ぜひみなさんのアイマスの知識をお貸しください!!
アイドルマスターアドベントカレンダー6日目の記事でした。明日は、iUratakuさんのデレステの廃課金の結果です。
#スニリプ をARで見よう[Vuforia + argon.js]
こちらはアイドルマスターアドベントカレンダー4日目の記事です。前日は、導線さんのデレマス声優事務所探訪です。
はじめに
- アイドルマスターのコンテンツを使った技術記事です。
みなさんは#スニリプを覚えているでしょうか?
#スニッカーズの写真ツイートでシンデレラガールズからリプが届くかも!?略して #スニリプ
今年の4月から6月にかけてTwitter上で行われたデレマスとスニッカーズのコラボキャンペーンです。
現在は公式サイトが見つからなくなっていますが、実際にちひろさん(?)が運用していたTwitterアカウント@sni_repは残っているので、どのようなものか思い出せない方は覗いてみると良いかもしれません。
このキャンペーンの概要は、「#スニリプ」とハッシュタグを付けて、スニッカーズの映った写真ツイート(事実上のネタツイ)を行うことで、アイドルからリプが届く(かも!?)というものです。
つまり、スニッカーズからアイドルのリプが出てくるってことじゃないか!
この妄想を体現するにはARしかない!
やっと家に帰って暇になった〜。ちゃんと動きますね。 pic.twitter.com/oPya9EWiUS
— croMisaP (@croMisa) 2017年5月23日
というわけで、試行錯誤の上に以下の構成へたどり着きました。
私の環境が、iPhone持ちのWindows使いという残念なため、ネイティブアプリやUnityを使った製作は諦めました。
Web側は、node.js+express(ejs)でJSで動くサーバーサイド+フレームワークとして珍しくない(と思う)組み合わせで作りました。
黄色い「Ar」は、argon.jsというフレームワークと組み合わせて使うArgon4というブラウザです。argon.jsとはブラウザ上でARを動かそうというもので、カメラ映像をブラウザ上に載せるためにArgon4を使います。カメラ映像を使わない(向きやGPSだけ)ならば、普通のブラウザにも対応しています。
argon.jsではARにVuforiaというARプラットフォームを用います。単なる画像だけでなく、立体やテキストといったものを高精度で認識できるものです。
例:
これらを使って、スニッカーズからアイドルのリプが浮かびだすARを作っていきます。
サーバーサイド
はじめはnode.jsで、ツイートコンテンツを取り出します。
node-twitter-apiを用いてAPIのキーやらトーンやらを取得します。(npmにSampleあるので省略)
twitterを使って、目的のコンテンツを探します。
var TweetGet = function (ret) { var d = Q.defer(); var client = new Twitter({ consumer_key: consKey, consumer_secret: consSec, access_token_key: ret.token, access_token_secret: ret.Secret }); var params = { screen_name: 'sni_rep', count: 5 } client.get('statuses/user_timeline', params, function (error, tweets, response) { if (!error) { for (var index in tweets) { var i = tweets[index]; if (i.text.indexOf('@') > -1) { var name = i.text.split('【')[1].split('】')[0]; var text = i.text.split('】')[1].split('#')[0] || "NO TEXT."; for (var jndex in i.entities.media) { var j = i.entities.media[jndex]; if (j.media_url_https.indexOf('https') > -1) { var url = j.media_url_https; break; } } break; } } d.resolve({ "name": name, "text": text, "url": url }); //抜き出したのを次へ渡す } else { console.log(error); } }); return d.promise; }
メディアの無いツイート(宣伝とか開始アナウンスとか)を覗いた最新のリプっぽいツイートを見つけたら、
- アイドル名
- セリフテキスト
- 画像のURL
を荒々しくも抜き出しています。この3つをexpressのレンダラであるejsへ渡します。
ブラウザサイド
ejsでは、送られてきた3つのツイートコンテンツを使って、ARコンテンツを作っていきます。
こちらを参考に使います。
- https://docs.argonjs.io/tutorial/part4/
- https://github.com/argonjs/docs/tree/gh-pages/code/4-vuforia
というかgithubの改変です。中心となっているコードは次のリンクにあります。
ejsの一部だよ · GitHub
サンプルコードでは、文字を3Dモデルに変換するライブラリを呼び出していますが、今回は使わないので代わりに先程ツイートから抜き出した背景画像とデレステ風のセリフテキスト背景を読み出すのに利用しました。
【台詞枠】デレステっぽいメッセージ背景【素材配布中】 / おたもん さんのイラスト - ニコニコ静画 (イラスト)
読み込んだついでに、板に透過を有効にして2枚を貼り付けています。そして、小さくして見えなくしています。
Vuforiaを初期化したらいよいよARに関する記述です。
api.objectTracker.createDataSet
では、VuforiaにARターゲットを登録した時に提供される.xmlのファイルを読み込ませます。これがトラッキングするための情報です。それらにはいくつかのターゲットを登録できるので、ターゲット名を指定して目的のターゲットを取り出します。
app.context.updateEvent
はいわゆる描画ループで、ARターゲットが映ってる時(KNOWN)、現れた時(FOUND)、消えた時(LOST)に分けて処理を書きます。
KNOWでは、常にターゲットの位置、向きをvar gvuBrochureObject = new THREE.Object3D
にコピーしています。このオブジェクトに、ARで操作したいものを追加することでまとめて操作できます。親みたいなものです。
FOUNDでは、実際にgvuBrochureObject
に``argonTextObject```というARで表示したいものが入ったオブジェクトを追加しています。逆にLOSTでは、別のオブジェクトへ追加することでARターゲットを追従しないようにしています。
最後に文字のオブジェクトを作ります。three.jsでは文字を3D空間上に描画するクラスは無いみたいなので、こちらを利用しました。
three.jsで文字列を利用する方法
こちらのクラスで名前部分とセリフテキスト部分を作ります。ただ、はみ出ても改行はしてくれないので、40文字ごとに分割して改行させています。
これらを背景画像と同じようにargonTextObject
へ追加することで完成です。
かなり端折りましたが、説明は以上です。
今回はブラウザからARするという聞き慣れない方法で行いましたが、実はVuforiaはUnityとも連携しており、Unityだともっと簡単にARが出来ます。ただ、Windowsだし(今はまだ)iOS向けにビルドできなかったのでこの方法を取りました...
— croMisaP (@croMisa) 2017年4月9日
長々となってしまいましたが、この記事がアイマスエンジニアなど多くの方の新たなプロデュースに結びつければ良いなと思っております。
アイマスエンジニアといえば、、、、
12/16日にアイマスハッカソンがありますね!
参加は難しいな、興味はあるけどなぁ、という方はYouTube Liveにて配信を行うみたいですので、IM@Studyを要チェックです!
ここまで読んでいただきありがとうございます!
アイドルマスターアドベントカレンダー4日目の記事でした。明日は、popkirbyさんのカラースキームを作ろうです。