DrupalでjQueryを利用する際に気をつけること。

2012.03.01 / Notes

DrupalではデフォルトでjQueryが含まれていますが、利用の際には少し気をつける必要があります。
通常jQueryでは、ステートメントの最初に「$」マークのエイリアスから書き始めますが、Drupalでは、他のJavaScriptライブラリとのコンフリクトをさけるために、「$」から書き始めることができません。

 

それを回避する方法としては「$」エイリアスを使わずに、

というように「jQuery」から始めることで利用できます。
この場合、既存のスクリプトを再利用する際に「$」を「jQuery」に書き換えないといけないので、都合の悪いこともあります。
そのままの「$」を使いたい場合には、下記の様にステートメントごと「(function($){}(jQuery));」でくくって、「$」を「jQuery」に置き換える方法もあります。

jQueryを使ったシンプルなイメージスライダー。

2012.02.11 / Labs

jQueryを使ったシンプルなイメージスライダーのサンプルです。
ボックス内に複数の画像を横に並べて、左右にスライド表示をする仕組みです。
サンプルはこちら

HTML内では#galleryボックス内に画像を並べているだけです。画像の枚数には指定はありませんので、何枚でもOKです。

CSSでは基本的にボックスのサイズ指定と、オーバーフロー時に隠す設定のみです。

画像のスライドは「prev」「next」のリンクをクリックした際に、左右にスライドします。スライドする位置は、あらかじめ各画像サイズをもとに座標位置を配列に格納しておきます。

Google Mapsで住所、緯度・経度を取得。

2012.01.27 / Labs

Google Maps APIを使って、マーカーの位置から住所、緯度・経度を取得と、住所からマーカーの移動および、緯度・経度の取得するためのコードのメモです。
サンプルはこちら

マーカーのドラッグで緯度・経度を書き換えて、ドロップの際に住所を書き換えています。
また住所から検索で、マーカーを移動して、緯度・経度を書き換えています。
JavaScript自体のコードはこちら。

Drupal 7のおすすめモジュール。

2011.12.03 / Notes

Drupalでは非常に多くの寄与されたモジュールが存在しますが、初めはどのモジュールを入れたら良いのか迷ってしまいます。

 

Drupal 7になり、それまでモジュールとして提供されいた主要機能、たとえば「CCK」「ImageCache」などが標準で搭載され、新たに追加するモジュールの数がぐっと減りました。
その上で、これだけは最小限入れておいた方が良いと思うモジュールをいくつか挙げます。

 

Views コンテンツの表示方法を柔軟にコントロールすることができます。
とても多機能で奥の深いモジュールなので、使い方を覚えるまでが大変ですが、Drupalを利用する上で、最大のアドバンテージになり得ます。
具体的な応用例としては、サムネールの一覧表示や、ソート可能なテーブル形式の表示などです。
Chaos tool suite (ctools) 「Views」の利用の際に必須です。管理画面で、モジュールのインターフェイス部分を担っています。
CKEditor WYSWYGエディタです。同様のエディタはいくつか存在しますが、これが一番使いやすい印象です。
CKEditorを利用するには、モジュールの他に、「CKEditor」本体も組み込む必要があります。
「sites/all/modules/ckeditor/ckeditor」のディレクトリの中に本体の「ckeditor」フォルダを入れます。(「ckeditor」フォルダが3つ入れ子になります)
Insert コンテンツの作成で、画像のアップロードは標準の「Image」で行えますが、その画像を本文内に挿入するには、「Insert」が便利です。
アップロードした画像の横にボタンが追加され、テキストエリアのカーソルのある位置に画像を挿入してくれます。また画像スタイル(medium、largeなど)にも対応しています。
CKEditorと組み合わせることで威力を発揮します。
Pathauto DrupalではURLエイリアスという機能でURLを置き換えることができます。通常「node/1」「node/2」といったデフォルトのURLを「blog/1」「article/2011/12/2」といった具合に、コンテンツと関連性のあるURLに置き換えられます。
「Pathauto」では自分で設定したルールに基づいて、自動でURLエイリアスを作成することができます。
Token 「pathauto」の利用の際に必須です。サイト内で扱っている動的なパラメータを利用するためのモジュールです。
たとえば投稿者名を、[node:author]と入力することで、実際の名前を表示することができます。
ただし利用できる場所は限られてはいます。
Backup and Migrate データベースのバックアップとリストアができます。
公開しているサイトのバックアップはもちろんですが、サイトの制作時に、開発環境のサーバから本サーバへ移すときにも便利です。
Webform お問い合わせなどのフォームを簡単に作成することができます。
フォームの項目も簡単に追加できるので、複雑なアンケートフォームの作成にも便利です。
エクセルでの管理用にCSVダウンロードもできます。

SnippetsのExpand Triggerが便利。

2011.12.02 / Notes

Snippetsはコーディングの際によく使うコードの部品を効率よく管理してくれるツールですが、バージョン1.3から省略された文字をタイプすることで、テキストエディッタへダイレクトに入力することができるようになりました。
Snippets

同様の機能は、TextExpanderといったアプリケーションで実現していましたが、コーディング用アプリケーションというわけではないので、シンタックスのカラーリングができなかったり、コードの管理には不向きです。

 

Snippetsでこの機能をサポートしてくれたおかげで、TextExpanderに登録していたコードもSnippets内で一つにまとめることができます。
ただ現在のところ、シンプルな機能のみなので、入力完了の際に効果音がなかったり、カーソルの位置を指定できなかったり、TextExpanderと比較すると不便なところもあります。

 

でも、これまでもSnippetsは着実に機能追加を続けているので、今後に期待がもてそうです。差し当たり、iCloudでの同期を実現してくれると非常にありがたいです。

 

Snippets (Lucky Ants)