ゲレの工房

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

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

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

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

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

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

まず出来上がったものを

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

ことばエトセトラ とは?

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

仕組み

重要な部分は後半の部分だけで、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も書き換えられるので、単純なロゴジェネレータとしても生成できます。

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


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


広告