開発メモ

ワークフロー

1.APIを使ってみる

　APIはhttps://joeschmoe.ioにありますが、今回使うのは3種類

　ランダムアバター　https://joeschmoe.io/api/v1/random
　女性アバター　　　https://joeschmoe.io/api/v1/female/xxxxx (xxxxxは任意の文字)
　男性アバター　　　https://joeschmoe.io/api/v1/male/xxxxx (xxxxxは任意の文字)
　このアドレスならv1/より後ろの部分をAlfredから入力させればいいかな。
　指定がない場合はrandomその他は入力の文字列そのまま使う感じ。
　　
　cURLで何が返ってくるのかみてみると、svgタグです
　初めてみましたが、ベクトル描画をするタグのようです
　なるほど、svgタグを返すAPIなので簡単にHTMLにとりこめるのでしょう

2.SVGが表示できない

　ところがAPIからリターンされるSVGタグのテキストファイルをOpenURLに渡しても
　何も表示されません
　どうしましょう

3.ローカルファイルを作成する

　で、考えついたのがローカルファイルを作成すること
　htmlを作ってオープンすればいけるのかなと
　
　スクリプトでリターンされたSVGタグをもとにhtmlを作ってみます
　せっかくhtmlにするので、呼んだときのパラメータの表示と、サイズの設定をしてみました
　サイズは、sedでwidthとheightをviewBoxの前に入れています
　最後にcatで全体を{query}として出力します
　
　ScriptFilter
　
　
　次のステップはWriteTextFileでローカルファイルを作成します
　このとき作成するファイルはalfredワークフローの環境変数とするとよいでしょう
　ワークフロー右上の[χ]ボタンを押して登録します
　nameとしてfilename、valueとして~/documents/joeschmoeavatar.htmlを設定してます
　　　
　Configure workflow and variables
　
　
　WriteTextFileステップの設定は簡単です
　filename欄は{var:filename}、書き出す内容は{query}とするだけです
　if existsはappendとして複数回実施した場合は、リターンを追加するようにしてみました
　追加するということは使うたびにHTMLタグが増える形になりますがブラウザで普通に
　表示できました
　
　WriteTextFile (Append to File)
　
　　　
　最後は出来上がったhtmlの表示です
　OpenFileを使いますが、このステップの設定も簡単で、Fileを{var:filename}とするだけです
　前のステップでwriteしたファイルを開いてくれます
　
　OpenFile
　

背景

　Githubのページに自分の画像を載せれることに気づき何かないかと探していたら
　joe schmoeのアバター作成APIを発見して、遊ぶ感じで作成してみました

取扱説明

機能:

　avatar作成

インストール:

　1.alfredworkflowをダウンロード
　2.ファイルをダブルクリックしてワークフローに登録

使い方:

　キーワード『avatar』＋パラメータを入力
　　パラメータなし　→ ランダムにアバター作成
　　female/xxxx → 女性のアバター作成
　　male/xxxx → 男性のアバター作成

動き方：

　コアはhttps://joeschmoe.ioのアバター作成APIを使っています
　APIのリターンからhtmlを作成して表示します

修正履歴

ver1.1(2021-04-04)：

　{var:filename}のパスを修正しました。
　変更前）　~/documents/joeschmoeavatar.html
　変更後）　~/documents/alfred/avatar/joeschmoeavatar.html
　
　AppendtoFileオブジェクトの”Create any intermediate folders”オプションを
　オンにしました　
　これによってファイルがない場合（＝初回起動）、ファイルを作成します

トップページに戻る