Dreamweaverのスニペットが微妙過ぎるので代わりにCodePenを使用してみた。これは良いかもしれない! | Garney.Web

Dreamweaverのスニペットが微妙過ぎるので代わりにCodePenを使用してみた。これは良いかもしれない!

スポンサーリンク

02151208_1

CodePenというサイトに最近というか昨日登録した。これ便利じゃな?!
CodePenとは簡単に一言でまとめるなら、コードを大勢多数で共有できるSNS的サイト。普通に使いまくっていればその内自分だけのコードライブラリ的なものが出来上がりそうだぞ。これは善き哉善き哉。

自分は基本的にコードを書く時、Dreamweaverを使用している。最近はBlacketsも併用していたりするのだけど。まあそれは置いといてだ。
仕事で頻繁にコードを書くのだけど、何度も何度も毎日毎日書いていると、これ前にも使ったな?!的な現象が多々現れる。そんな時にまた同じコード書くのもアホらしいじゃないか。しかも100%同じコードなんて書けない訳がないので、微妙に違ったりする。

だから使おうスニペット

似たようなコードでも微妙な違いのせいで、どれが良かったんだっけ的な要らん迷いが発生したりする。まあ整理しとけよってこと。そこでスニペットを使う。これは一度書いたコードをお気に入りに入れておいて後から引き出せまっせというものだ。初めに書いたDreamweaverがどうのこうのっていうはここに繋がっていて、このソフトにはデフォでスニペット機能が付いている。

でもね、びみょーーーに使いにくい。それに、なんか何をスニペットとして入れたのか全然覚えられない。だから結局CSS用のコメントの雛形をお気に入りとして保存し、それを引き出す程度にしか使っていない。

持ったいねぇ!

あとさ、CSSだったらCSSのコードしか入れとけ無いのね。JSだったらJSのコードだけとか。これ不便じゃね?これが一番不便じゃね?!

HTML,CSS,JSセットで1つの機能を保存しておきたい

そう、それなのだ。スニペットだけじゃこれができないんだ!。痒い所に手が届かないんだ。例えば5秒間で画像が自動切り替えするスライダーを作ったとする。こういうのはサイトを作っていればちょくちょく使いまわせそうなもので、ページトップのファーストビューに挿入されたりする。結構使うことが多いのね。

自動で切り替わるか、クリックで次にスライドするのか、スライドのアニメーションはどうなのかっていうのは置いといてだ。基礎は使いまわせるのだ。でもスニペットじゃ先ほども書いたがHTMLとCSSとJSをセットで保存しておけないから結局ここからお気に入りとして取り出すことができんので、結局前に作ったファイルからコードを引っ張りださにゃならんのだ。

あー時間の無駄!

そこで見つけたCodePen

そうだ。CodePenを使おう。こう思った。CodePenならHTML、CSS、JSをセットで機能として保存しておける。それが目的なので多人数に共有してどうのこうのっていうSNS的要素はあまりどうでもいいかなって思ってた。

でもな・・「ブログで使えるやーん。俺氏天才ですぞお。」とか思った。けど別に小学4年生でも思いつきそうな発想だし、別に天才でもなかった。

というわけなので、これから何か使い回せそうなのがあったらCodePenに書いていくつもり。

ちなみに以下はスマホサイトで使うドロップダウンメニューだ。線3つの箇所をクリックしてみると良い。

こんな感じでブログにも簡単に挿入することができる。使うのであれば少々基礎知識がないと使えないかも知れないけど、使いたい人はどうぞ。これについての記事も書こうかな。後日。

うん。そんで、時間無いときとかに取り敢えずこれをテンプレとして弄るので良く使うのね。作ったのは結構前なのでコードが汚いし、自分はSassのお勉強してないのでCSSしか使えないし長ったらしい。transitionにベンダープレフィックス付けまくってるのもなんか恥ずい。

目指すは自分ライブラリ

こんな感じで公開し続けていけば自分ライブラリができるのではないかと期待している。ここからコードを拾ってきて使いたい時に使うのだ。スニペットより使える気がするんだよな。

無論仕事で使ってるソースは流石にそのままは載せんがね。ったりめーだろ。

もっと自転車旅を知りたい人向け有料マガジンやってます。

もっと自転車旅を知りたい人向け!
有料マガジンやってます。

自転車世界一周マガジンについて詳しくはこちら

スポンサーリンク

フォローする

ツイッターやっています。


Profile

プロフィール

Profile びゃす

名前 びゃす
現在自転車で世界中旅しています。
スタートはアメリカ合衆国アラスカ州。
南米最南端を目指して毎日ひたすら前進中!。

自転車を漕ぎ、見た世界について感じたことをブログで発信しています。
詳しいProfileはこちら


Instagram
follow us in feedly
Followボタンからお気に入りブログを
登録する方法