WNT-Technology
Technology

一度書いたコードは二度と探さない!スニペットを究めて快適コーディング!【HTML, CSS, JavaScript】

一度書いたコードは二度と探さない!スニペットを究めて快適コーディング!【HTML, CSS, JavaScript】

※この記事は2013年8月26日に執筆された記事です。現在は仕様が異なる可能性があります。


気がつけば繰り返し同じ単語で検索し、同じコードを書いている…なんてことはありませんか?「この部分の記述、もう一回使うことがあるかも」と思ったらぜひスニペットとして登録しておきましょう!

スニペットとは繰り返し登場するコードの断片、またはそれをすぐに呼び出せるように管理するエディタの機能のことです。自分がよく使用する記述をスニペットにしておけばいちいち検索したり、昔書いたソースを探ってみたりすることなく、使いたい時に正確な記述をサッと呼び出して使うことができます。

Dreamweaver、Sublime Textなどのオーサリングツールやテキストエディタにはスニペットを自在に使うための機能が備わっていますので、使わない手はありません!


スニペットの登録方法

Sublime Textの場合

Sublime Textのスニペットは以下のようなxmlファイル(拡張子は.sublime-snippet)で構成されています。

<snippet>
    <content>
    <![CDATA[
    \$(${1:selector}).show();
    ]]>
    </content>
    <tabTrigger>show</tabTrigger>
    <scope></scope>
    <description>jQueryのshowメソッド</description>
</snippet>

それぞれのパラメータには以下のような値を指定します。

  • content – 表示される内容です。 <![CDATA[...]]> で全体を囲む必要があります。
  • tabTrigger – 展開前の記述です。
  • scope – スニペットが有効になる言語を指定します。省略すると特に制限なく使用可能になります。
  • description – スニペット一覧に表示されるコメントです。

なお、jQuery関連のスニペットなどでは「$」をエスケープシーケンス(環境に応じて「\$」「¥$」と表記する)を使用する必要があることにご注意ください。

メニューの「Preferences > Browse Packages」を選択するとファイルの保存先の「Packages」ディレクトリが自動的に表示されます。このディレクトリ以下であればどこに保存してもスニペットとして使用可能になりますが、「User」ディレクトリ以下などにまとめておくのがよいでしょう。

参考:Sublime Textの公式サイトのSnippet関連ページ

Dreamweaverの場合

スニペットの管理画面

「ウィンドウ > スニペット」で上のようなスニペットの管理画面が立ち上がります。それぞれの項目を指定し、登録すれば使用可能になります。Dreamweaverではスニペットの管理画面の呼び出しだけでなくそれぞれのスニペットに対してショートカットキーを設定できるので、頻繁に使用するスニペットにはショートカットキーを設定しておくとよりスピードアップにつながります。

これらのアプリケーションには最初から様々なスニペットが登録されていますので、まずはそれらを活用し、使い勝手をさらに良くするために自分で追加登録するというのが良いでしょう。

以下、ご参考までに弊社のマークアップエンジニアが登録しているスニペットの一部をご紹介します。モックアップ作成のための記述をまとめておいたり、簡単な処理をすぐ使えるように登録しておいたりとスニペットの使い方は人それぞれですので、ぜひとも自分なりの使い方を究めてみてください!

※下記のスニペットには、${1:selector}など複数のプレースホルダを指定するSublime Text用の記法を使用しているものがあります。該当するスニペットでは、設定ファイル中の記述を「展開前」、ソースコードに呼び出した際の記述を「展開後」として併記してあります。


HTML : head編

Favicon

<link rel="shortcut icon" href="favicon.ico" />

apple-touch-icon 立体加工あり

<link rel="apple-touch-icon" href="apple-touch-icon.png" />

apple-touch-icon 立体加工なし

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png" />

viewport(Landscape時サイズ固定、拡大・縮小無効)

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

OGP

<meta property="og:title" content="ページタイトル" />
<meta property="og:type" content="websiteまたはarticle" />
<meta property="og:url" content="ページのURL(http://から指定)" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:description" content="ページの説明" />
<meta property="og:image" content="画像のURL(http://から指定)" />
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="XXXXXXXXXXXXXXXX" />
<meta property="fb:page_id" content="XXXXXXXXXXXXXXXX" />
<meta property="fb:admins" content="XXXXXXXXXXXXXXXX" />

HTML : body編

jQuery.min – CDN

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

ダミー画像(placeholdit)最小指定

<img src="http://placehold.it/${1:width}x${2:height}">

ダミー画像(placeholdit)詳細指定

<img src="http://placehold.it/${1:width}x${2:height}/${3:bgcolor}/
${4:textcolor}&amp;text=${5:text}">

※参照:PLACEHOLD.IT(http://placehold.it/) ダミー画像をホスティングしてくれるサービスです。

jQuery Mobile テンプレート – CDN

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Title</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" data-title="Sample1">
<div data-role="header">
</div>
<div data-role="content">
</div>
<div data-role="footer">
</div>
</div>
</body>
</html>

Twitter Bootstrap テンプレート ver.2.3.2 – CDN

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</body>
</html>

参照:http://www.bootstrapcdn.com/


CSS編

media queries – 画面幅480px以下場合の指定

@media screen and (max-width: 480px) {
 
}

media queries – 解像度2倍のディスプレイ用の指定

@media only screen (-moz-min-device-pixel-ratio: 2),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
 
}

コメントアウト(大)

/* ===============================================
#
=============================================== */

コメントアウト(小)

/* #
----------------------- */

JavaScript編

jQuery – .on

/* 展開前 */
\$("${1:selector}").on('click',
function(){
 
}
);
/* 展開後 */
$("selector").on('click',
function(){
 
}
);

jQuery – .animate

/* 展開前 */
\$("${1:selector}").animate({
    '${2:property}' : ${3:value}
},${4:speed},'linear');
 
/* 展開後 */
$("selector").animate({
    'property' : value
},speed,'linear');

jQuery – .attr

/* 展開前 */
\$("${1:selector}").attr('${2:property}','${3:value}');
 
/* 展開後 */
$("selector").attr('property','value');

setTimeout

setTimeout('func()',1000);
 
function func(){
}

setInterval

setInterval('func()',1000);
 
function func(){
}

クエリーを取得するスクリプト

var query = location.search;
query = query.slice(1);
 
if(!query){
    /* no query */
} else {
 
}

乱数を発生させるスクリプト

var randomNum = Math.floor( Math.random() * 10 );

User AgentからAndroid、iOSを判別

var userAgent = window.navigator.userAgent.toLowerCase();
var appVersion = window.navigator.appVersion.toLowerCase();
if ((navigator.userAgent.indexOf('iPhone') > 0 &amp;&amp; navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('iPad') > 0) {
 
/* iPhone, iPod, iPad */
 
} else if (navigator.userAgent.indexOf('Android') > 0){
/* android */
}

User AgentからIEのバージョンを判別

var userAgent = window.navigator.userAgent.toLowerCase();
var appVersion = window.navigator.appVersion.toLowerCase();
if (userAgent.indexOf("msie") > -1) {
if (appVersion.indexOf("msie 6.0") > -1) {
/* IE6 */
}
else if (appVersion.indexOf("msie 7.0") > -1) {
/* IE7 */
}
else if (appVersion.indexOf("msie 8.0") > -1) {
/* IE8 */
}else{
/* after IE9 */
}
}else{
/* not IE */
}

Canvasの使用準備

/* 展開前 */
var cv = document.getElementById('${1:idname}');
if ( ! cv || ! cv.getContext) {return false;}
var ctx = cv.getContext('2d');
 
/* 展開後 */
var cv = document.getElementById('idname');
if ( ! cv || ! cv.getContext) {return false;}
var ctx = cv.getContext('2d');

それにしても最近のテキストエディタは賢いですよね…。この記事を書いたのを機に、使っていない機能やプラグインに便利なものがないかどうか、改めて見直してみたいと思います。

thumbnail_b_markup_130821

記事が気に入ったらシェアしよう

この記事を書いたメンバー

記事の更新をお知らせします!

  • 採用情報

    採用情報

    記事を読んで興味を持った方、
    ビーワークスの考え方に共感した方、
    一緒に新しいデザイン、創りませんか?

  • 制作実績

    制作実績

    日々、制作実績を更新中!
    ビーワークスの多様な実績をぜひご覧ください。

  • 乙女座
  • 天秤座
  • 蠍座