Button with Arrow.css公開させて頂きました。
矢印付きのボタンのCSSを生成するジェネレーターです。
矢印付きのボタンをコーディングするのが面倒だったのでsassでmixinを作ったものの、それを使うことすら面倒だった(笑)のと、Vue.jsの勉強がしたかったのがこのツールを作ったきっかけです。
※現状、スマートフォンでの閲覧に対応しておりません。PCのブラウザでご利用ください。
使い方
EDITボタンをクリックするとスクリーンが編集モードに変形します。
編集エリアのフォームに任意の値を入力すると、画面右側のcodeエリアのCSSコードに動的に反映されます。
※codeエリアが閉じている場合は「get code」ボタンをクリックしてください。
入力が終わったら、codeエリアのcopyボタンをクリックしてコードをコピーし利用してください。
htmlとcssそれぞれ別になっています。
Vue.jsで作りました。
ここはアピールしておきたいところ(笑)。フレームワークとしてVue.jsを利用しています。
フォームに値を入力すると、codeエリアとボタンのプレビューに同期するようバインディングするコードを書いています。
cssで擬似要素を使っているので、これをVue.jsで扱うのに苦労しました。DOMではないので通常のバインディングができず、テキストノードとしてstyleタグを生成するなどしています。(何か他にいいやり方があるのかもしれませんね。)
ご質問やご意見はこの投稿にコメントいただくか、@stella_d_tweetにメンションなどお願いいたします。
最後に
非常に限られた需要しか無いと思われますが(汗)、よかったらお試しいただけると幸いです。
このツールを作るのに、@hrz31さんの以下の記事とサービスから非常に刺激を受けました。
自分のサービスを作ってみたいエンジニアな人は参考になると思います。おすすめです。
他にもtwitterでフォローしているフォロワーの方が続々とwebサービスをリリースをしており、こちらも大変気になっております。
話題のねこ本ももちろん買って読みました。ある程度JavaScriptの知識があることが前提ではありますが、Vue.jsの使い方のツボがいいかんじにまとめられていて、こういうときはどうすればいい?の答えにたどり着くスピードが格段に上がりました。みんな、読むといいよ！
さてこれから
次に作ってみたいwebサービスの構想がうすボンヤリ浮かんでいます。今度はより本格的なwebアプリを作ってみたいです。
オープンデータも活用したいし、firebaseを使えばよりスケールアップしたアプリが作れそう。micro:bitもまだ手付かずだし、blenderもやってみたい。(あぁ、もう全部やるのは無理だw)
時間の割り振りがなかなか難しいですがほそぼそやっていこうと思っています。