言いたいことを大きな声で言うツールを作った話

2018-12-20T18:37:56+09:00

「かんたん表紙メーカー」という、文字を打ち込んで画像を選ぶと表紙っぽいものをいろんなレイアウトで生成するツールを公開してます。

このバリエーションとしてブログのアイキャッチとかに使えるタイプを作ってみようかな～というのを「運営者ギルド」で呟いたら、「URLシェアでOGB画像芸で遊びたい」という示唆をいただきました。

「サーバにずっと保存しとくの好きじゃないんですよね～」→「パラメタ与えたPHPで画像出力すればできるのでは？テストはしてないけど」とアドバイスいただき、おっ、となったので、当初の目的はひとまず脇に置き、「入力したテキストをgetでPHPに投げて画像生成し、URLとTwitterCardに表示させるテキストを連動させる」というのを試してみることにしました。

言いたいことを大きな声で

Twitterカードを使って、大きな文字で主張するツールを作りました。メディア欄を使わず、画像ソフトも不要、Web上の画面にテキストを入力するだけ。「質問箱」「マシュマロ」等の質問表示に使われているのと同様の見せ方です。お好きに遊んでみてください。　https://t.co/3d584cFmvw pic.twitter.com/knSTHW9tA1
— 悠 (@you_at_pedal) 2018年12月3日

技術的にはごくごくシンプルで、PHP GDライブラリを使いました、以上終了。おしゃれデザインとかイマドキUIとか何それおいしいの…。入力ページとかめっちゃ白いです。

入力フォームとOGP埋め込み：index.php
画像出力：shout.php

入力した文字が1200×630の画像上になるべくみっちり詰め込まれるよう、文字数から行数字数フォントサイズを算出して（これは試行錯誤しつつswitch関数使って場合分け）１行ずつ分割してimagettftextに投げて、ヘッダつけて、画像出力。

shout.php?t=URLエンコードした文字列をindex.phpのヘッダのmeta property="twitter:image" とbody内のimage要素に埋め込んで、index.phpの受け取ったパラメタと連動。

で、シェアボタンを設置して、「言いたいことを大きな声で」のハッシュタグつきで、実際見ているページをシェアできるように設定。

半日くらいでざかざか作って、個人アカウントでリリース、拡散力のあるSS名刺メーカーアカウントでRT。
思ったよりウケたので、ちょっとびっくりしました。トレンド入りました（笑　
オタク、言いたいことめっちゃあるね……。

途中からツール使わずにタグだけ使って叫ぶ人も一杯出てきてましたけど、それもまた面白いところです。
リリース当日のPVが19万くらい、翌日が14万くらい行きました。一瞬の流行だったので、現在はタグ使ってる人が１時間に数人くらいかな～。

シンプルな技術、かっこわるい見た目でも、簡単に使えて機能として面白がってもらえたら、けっこう反応貰えることもあるねえ、という話でした。
めっちゃ技術力とかデザイン力とかないと個人開発とかできないよね！？　とか思ってる人がいたら、全然全くそんなことはないので、楽しくやりましょ。

悠の投稿 - Crieit

言いたいことを大きな声で言うツールを作った話