ゲレの工房

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

トップ > FF14 > FF14雑記 : 独自ジェネレータの生成方法について / タイトル編

FF14雑記 : 独自ジェネレータの生成方法について / タイトル編

FF14 おはララジェネレータ 更新情報

以前、独自おはララジェネレータの生成方法について書きました。スクリーンショットにロゴを入れるための簡易ジェネレータです。
blog.gelehrte.com

ただ、以前の記事ではおはウラ(アウラ用)ジェネレータを作ることができたのですが、タイトルがそのまま「おはララ」のままでした。動作上問題ないのですが、初めてジェネレータを見た人が、自分の求めているジェネレータとは違うタイトルだと勘違いしてしまう問題がありました。

またカウントダウンジェネレータというのも作りましたが、これはスクリーンショットに文字を入れるだけの簡易ジェネレータで、カウントダウンだけを行うためではありませんでした。が、当時カウントダウンを行うために作ったため、このようなタイトルになってしまいました。

なら、タイトルもURLで変更できるようにしてしまおう。
今回の記事はそういう内容です。

まず出来上がったものを

ことばエトセトラジェネレータ

ことばエトセトラ とは？

ちゃこさん発案のハッシュタグでみなさんが投稿しているスクリーンショットの加工品で、スクリーンショットに文字を入れて投稿する企画のようです。このためのジェネレータを作成してみたいと考えました。

ジェネレータのURL

ちょっと長くなりますがURLを見てみましょう。
https://gelehrtecrest.github.io/countdown-generator/?text=%E3%81%93%E3%81%A8%E3%81%B0%E3%82%A8%E3%83%88%E3%82%BB%E3%83%88%E3%83%A9%E6%97%A5&color=white&px=75px&style=&font=%2F1.5%20serif&xpos=116&ypos=14&scale=8&title=%E3%81%93%E3%81%A8%E3%81%B0%E3%82%A8%E3%83%88%E3%82%BB%E3%83%88%E3%83%A9%E3%82%B8%E3%82%A7%E3%83%8D%E3%83%AC%E3%83%BC%E3%82%BF&comment=%E6%96%87%E5%AD%97%E3%82%92%E5%90%88%E6%88%90%E3%81%99%E3%82%8B%E3%81%A0%E3%81%91%E3%81%AE%E7%B0%A1%E6%98%93%E7%9A%84%E3%81%AA%E3%82%B8%E3%82%A7%E3%83%8D%E3%83%AC%E3%83%BC%E3%82%BF%E3%81%A7%E3%81%99%E3%80%82

長いですね。

仕組み

重要な部分は後半の部分だけで、get要素でtitleとcommentを入れています。HTMLエスケープを外すと以下のようになっています

&title=ことばエトセトラジェネレータ&comment=文字を合成するだけの簡易的なジェネレータです。

この部分を書いただけです。

追記する前

f:id:gelehrtecrest:20180510132228p:plain

追記した後

f:id:gelehrtecrest:20180510132805p:plain

titleとcommentを編集することで色々なジェネレータのタイトルとコメントを変えることができます。ただ、javascriptでタイトルとコメントを書き直しているだけなので、SEO的には影響しないと思います。

タイトルの書き直し

具体的にはこんなコードを書いてあるだけです。

                        } else if(t['0'] == 'title'){
                                $('title').text(decodeURIComponent(t['1']));
                                $('h1').text(decodeURIComponent(t['1']));
                        } else if(t['0'] == 'comment'){
                                $('#comment').text(decodeURIComponent(t['1']));
                        }

t['0'] はgetの要素を見ていて、t['0']がtitleの時の内容がt['1']に入って、それをtitleやh1に書き直すようになっています。具体的にはGitHub上に上がっているソースコードを見てください。
github.com

なぜget引数を書き直す仕様にしたのか

タイトルやコメントを書き直すインターフェイスを用意しておいてもよかったのですが、利用者にはほとんど関係ない内容なので、ここはわかっている人だけが書き直せるようにしました。

終わりに

今回はことばエトセトラジェネレータを例に書きましたが、おはララジェネレータもtitleやcommentも書き換えられるので、単純なロゴジェネレータとしても生成できます。

ちょくちょくことばエトセトラのツィートも投稿していきたいと思います。そのための簡易ジェネレータを作ったということです。


今回はここまで
それではー

広告