読者です 読者をやめる 読者になる 読者になる

エンジニアをリングする

プログラをミングしたり。

my web site twitter

言語柄の画像を書き出せるチェックシートメーカーを作ったよ

フロントエンド JavaScript つくってみた

私の名刺の裏、言語柄です。

f:id:yoshiko_pg:20140319153420j:plain

たしなんでいる言語にチェック(手書き)がついてます。

これ、スキルや共通の話題が一目でわかるので結構評判よくて、自分もやりたい!とたびたび声をかけていただいたりしました。
うれしいので、誰でもできるようにジェネレータをつくりました!

プログラミング言語チェックシートメーカー

サイズ選んで、言語選んで、色選んでmake!

TwitterFacebookのプロフィール背景サイズにも対応しました。
さっそく。

f:id:yoshiko_pg:20140626174915p:plain

こんなのが簡単に作れちゃいますので、よろしければ〜☆
一応スマホからもできます!

実は言語リストの配置がランダムなので、チェックした言語をちょうどいい位置へもってくるのが完全に運任せでちょっと難しかったりします。。。
私がもっと頭よければチェック入れた言語ははみ出ないようにアルゴリズムを組んだりできると思うのですが。。。
2日で作ったということでご勘弁ください!プルリク待ってます!
サイコロ投げる感じでシャッフル連打で偶然を楽しんでもらえれば><

技術的なあれこれ

画像なので最初はPHPのGDでごにょごにょするかなーと思ったのですが、フォントファイル用意するのとかちょっと面倒だったり・・・
いつものWebフォント使えたらいいのになーと思っていたら、HTML要素をcanvasに変換するライブラリをみつけました。
html2canvas

おおー!!
これで HTML→canvas→画像 と変換することができるので、画像にする部分はHTMLで作ればいい!!

なんて便利な・・・
というわけでフロントエンドだけで完結させることができました。
ちょっとびっくりしました。

あと、今回初めてCoffeeScriptで処理を書いてみました!
打つ文字が減りますね。
あとSASS記法でCSS書いたのも初めてかも。
カッコいらないと簡潔で楽だけど、ブロックのまとまりがぱっと見わかりづらくなるな〜・・・
JSのfunctionfunctionした感じも私は好きですよ。

というわけで、ぜひ使ってみてください!
使用に報告は不要ですが、作ったよ!使ったよ!などつぶやき・メンションもらえたりしたらとても嬉しいです♡

プログラミング言語チェックシートメーカー