Hashlipsを使って IDを叩けるサイトを作る

既にあるジェネレ―ティブのファンアートを作りたい！となると

困るのがhashlipsを使うとばらばらになってしまうこと。

そこで使ったのは

・元となるジェネレ―ティブのjsonファイル

・indesign

・hashlips

・batファイル

①お好みのお絵かきソフトでいつものジェネレ―ティブの通りに作ります。

②元のjsonファイルのmetadata(hashlipsを使っていると全部が結合されているものが出る)を

CSVに変換します。

JSONからCSVへ-JSONファイルを無料でCSVに変換 (jsononline.net)

その結果つながった形で　attributes としてひとセルとしてでたので

このように指定。への横とシフトを同時に押す

区切れる。

画像名を要素名と揃える

要素名に対して、　パス（画像のおいているPCの位置右クリックパスをコピーで出せる）を付けていく。

全ての要素を用意したら

はなこ　⇒　パス　はなこ.png　というように置換をします。

置換し終えたら　要素

例えば　属性名の　名前　クラス　誕生日　が全て画像であれば

＠名前　＠クラス　＠誕生日　に書き替えます。

はなこ　　3年1組　　12月3日

CSVファイルで書き出し

indesignに移ります。

indesignで400×400ピクセルでページを作り

属性３つであれば　３つの画像オブジェクトを用意します。（ｘ200Y200で重ねて3つ）

ウィンドウ⇒ユーティリティ⇒データー結合

データ結合は、スクリプト横の三本線からデータを選択し

このように属性値が出るため、　重ねたい順にします。

PDFに書きだし⇒PDFからPNGに変換。

最後に↓を用いて、画像が入ったフォルダを一括で　「　.png」に名前を変更します。

・batファイル

画像をアップロードして

hashlipsのartengineのファイル⇒build⇒jsonのところに

元ファイルのjsonを入れます。（属性値などが合っているため）

この画像URIを書き替えたいため

config.jsの　context base uriを画像が入ってるURLに書き替え

node utils/update_info.js　をコマンドプロンプトにして打ち込みます。