パンセのタネWebデザインを追求したり、Web業界の最新トレンド、ネットPRなどのお役立ち情報を紹介するスタッフブログです。

Webサイト構築時に便利なツール系サービス

2016年06月01日

Webサイトを構築する時には、どんなシンプルなサイトでもかならず調べものが必要なうしじまです。調べ方のコツを身につけることがコーディング達人への道ではないかと思ったりします。調べるためのツールや調べなくても便利に使える(私が時々利用する)ツール的なサービスをご紹介します。

Can I use...

HTMLや CSS、JavaScriptはWebブラウザの種類、バージョンによってサポートされる要素や属性、関数などがまちまちで、すべて覚えられる方はいいのでしょうけど、私はすぐに忘れてしまいますので「Can I use...」を利用します。使い方はいたって簡単。要素や属性の名前を "Can I use _____________?" の部分に書くだけ。その場で利用できる・できないブラウザの情報を表示してくれます。

ppimg01.png

codic

JavaScriptやPHP、Perlなどの変数名・クラス名・関数名、HTML / CSSのidclass名には、わかりやすい意味のある単語をつけたいもの。英単語を使うことの方が多いかと思いますが、スペルミスをしていて恥ずかしい思いをしたことはありませんか?

「codic」では日本語を記入すると候補となるネーミングを教えてくれます。複数の単語で構成されるネーミングの場合、どのように接続するか(PascalCase、camelCase、snake_caseなど)も設定することができます。

ppimg02.png

CodePen

実際にコードを書く前に「あんなこといいな、できたらいいな」と思いを馳せることがよくあります。ありますよね?その思いをサクッとおためしできるのが「CodePen」。HTMLとCSS、JavaScriptを実際に書いて、その場ですぐにプレビューできます。お好みのプリプロセッサも簡単に選んで利用することができます。

HTML Haml、Markdown、Slim、Jade
CSS LESS、SCSS、Sass、Stylus、PostCSS
JavaScript CoffeeScript、LiveScript、TypeScript、Babel

さらに、CSSもJavaScriptも別途リンクするものを追加できます(Bootstrap、Foundation、jQuery、Angular、React などなど)

自分で書いたコードを試す以外にも他の方が登録した Penを散策するのも楽しみです。実装方法がわからなそうなものも検索してみると先人が見事にクリアしていたりと勉強にもなります。

ppimg03-3.png

すぐ使えるダミーテキスト - 日本語 Lorem ipsum

コーディング時に使うこともありそうですけど、どちらかというとワイヤーフレームやデザインカンプを作成するときに重宝しそうなのがこちらのサービス。パラグラフの文の数を指定できたり、アルファベットや記号、数字のフォーマットを一括で統一できたりとなかなか便利です。

ppimg04.png

なんちゃって個人情報

こちらは個人情報風のデータを作成してくれるサービス。個人情報を管理するようなサービスを開発する場合、初期データは当然ゼロですからテストを実施したい時にもデータがありません。テスト用データ登録のために、納品するわけでもない新しいフォームを開発することになったり...という事態も回避できてたいへん助かりますね。出力形式にCSVやタブ区切りが用意されているのもありがたいところ。

ppimg05.png

おまけ:placekitten

データだけではなく、ダミー画像が必要になることも多いです。ダミー画像を生成するサービスはそこそこ提供されていますので、探すのには苦労しません。私が気に入っているサービスは「placekitten」。ネコのダミー画像を作成できます。ネコだけです。使い方もシンプル。URLに幅と高さを指定するだけ。

ためしにここにもネコを...。 http://placekitten.com/660/400

ppimg06.png

まとめ

それぞれ代表的なサービス(ツール)を紹介しました。他にも便利なサービスはたくさんありますけど、私はこれらをよく利用しています。ご自身でも便利なサービスを見つけて、Webサイト構築のスピードアップに役立ててみてはいかがでしょうか。

仕事のご依頼・お問い合わせ

更新情報をお届けします

Facebookもよろしく!

Pick Up! おすすめ記事

制作実績一覧

カテゴリー

Twitter

この記事を読んだ人はこんな記事も読んでいます。

カテゴリ別

パンセのタネ トップへ戻る制作実績