日曜プログラミング

ゲーム好きの中の人が、自分が作りたいアプリを作る記録です

独自おはララジェネレータの生成方法について

おはララだけに限ったことではないのですが、画像合成ジェネレータとしておはララジェネレータを作成しました。
おはララジェネレータ
ロゴを合成し、合成した画像を右クリックでダウンロード保存できる仕組みになっています。(どうやって保存するのと聞かれたことがあるので追記)

このジェネレータ自体が、独自のジェネレータを作成できるようになっています。
例えば、おはウラジェネレータも作れます。

この独自画像のジェネレータがどのようにして作っているかについて、まだ記事にしていなかったようなきがするので、今回はその話をします。

作成方法

例えば、次のようなツィートがあります。

このうち例として、今回は淡藤色を使ってみましょう
https://pbs.twimg.com/media/DKDC85sUEAEjIQV.png

作成方法1

普段はこの方法を使います。

画像URLの取得

Twitterで素材を公開している提供元の皆様、誠に感謝していますm(_ _)m
Twitterで公開されている画像は、画像のアドレスを取得できます。上記の淡藤色のおはウラロゴのようにですね。

画像アドレスの取得方法は色々あると思いますが、公式ページをブラウザで開いて、右クリックから「画像アドレスをコピー」などをしてください。(Chromeの例)
ブラウザによってはUIが異なると思いますが、だいたい同じことができると思います。
f:id:gelehrtecrest:20170919135302p:plain

おはララジェネレータ上でロゴにURLを指定する

おはララジェネレータ を開き、Step2で先ほど取得した画像アドレスを入力します。

f:id:gelehrtecrest:20170919135618p:plain

生成されたURLを開く

実はもう、これだけでおはウラジェネレータが出来上がっています!

おはララジェネレータのページ中央付近に「現在の設定情報のURL:このURLをブックマークすると、現在の設定情報を引き継げます」と書いてあると思います。
以下が実際のスクリーンショットです。
f:id:gelehrtecrest:20170919135949p:plain

次のようなURLが生成されているはずです。これが淡藤色のおはウラジェネレータです!
https://gelehrtecrest.github.io/ohalala-ss-generator/?logourl=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FDKDC85sUEAEjIQV.png&xpos=2&ypos=2&scale=-5

このURLをブックマーク・お気にいりに保存しておけば、いつでもおはウラジェネレータが使えます。Twitterで公開していただいても構いません。

ちょっとだけ解説

もう一度 生成されたURLを見て見ましょう。
https://gelehrtecrest.github.io/ohalala-ss-generator/?logourl=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FDKDC85sUEAEjIQV.png&xpos=2&ypos=2&scale=-5

この、

logourl=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FDKDC85sUEAEjIQV.png

部分が、淡藤色のおはウラロゴURLを解釈しています。元の画像URLは

https://pbs.twimg.com/media/DKDC85sUEAEjIQV.png

です。そっくりですね。それもそのはず、単に : (コロン)とか / (スラッシュ) とかを別の文字に変換しているだけです。これはURLエンコードと呼ばれる変換方法です。詳しくはここでは説明しませんが、こちらのサイトなどが参考に鳴るかと思います。まぁ、プログラムを触ったことある人なら馴染み深いやりかたですね。
http://www.seil.jp/doc/index.html#tool/url-encode.html

まぁつまり、おはララジェネレータのURLに特定の方法でロゴを指定した文字列を追加すると、別のジェネレータに変わるということが伝われば嬉しいです。

ちなみに

生成されたURLのうち

xpos=2&ypos=2&scale=-5

これはロゴの位置を表しています。ロゴを動かしたり拡大縮小するとURLのここの値も変わります。ロゴの位置・拡大縮小を保存したまま、ジェネレータを生成できるということですね。

作成方法2

URLを直書きする

まぁ、ここまで読んでいただいたならすでにネタバレしていることですが、おはララジェネレータにURLを生成してもらわなくても、自分の手でlogourl部分などを書けば、それだけでもジェネレータが作れます。
また、数値の微調節もできます。ロゴの位置はおはララジェネレータでは整数の値で変化させられますが、URLを直打ちする場合、小数も入れられます。

https://gelehrtecrest.github.io/ohalala-ss-generator/?logourl=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FDKDC85sUEAEjIQV.png&xpos=2.5&ypos=2.5&scale=-5

本当に位置を微調節したい人向けですね。

ちなみに

画像サイズや位置などを微調節したおはウラジェネレータが、最初のツィートで紹介したURLになります。URLを見てみましょうか
https://gelehrtecrest.github.io/ohalala-ss-generator/?logourl=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FDKBHbnuUMAIp-Bj.png&xpos=2&ypos=2&scale=-1

scaleを -1 に変更していますね。
個人的にこの程度のサイズがちょうど良いと思ってます。

それでは今回はここまで
f:id:gelehrtecrest:20170920081615p:plain

おはウラでしたー


スポンサーリンク