Labs

Drupal 7のスクラッチテーマ作成。

2011.05.21 / Labs

Drupal 7正式版が登場して5ヶ月あまり経ちますが、そろそろ主要モジュールも整ってきたので、Drupal 6からDrupal 7へ移行を進めています。
Drupal 7でサイトを構築するにあたり重要となるテーマ作成ですが、基本的な構成のみをまとめたスクラッチテーマを作成してみました。
Drupal 7のスクラッチテーマ

 

drupal 7ではテーマを継承してサブテーマを作ることができるので、上記の基本構成以外はサブテーマにて装飾を加えていくことで、効率的なサイト構築が可能です。

 

テーマ制作の流れは、おおむねDrupal 6の場合と変わっていないように感じました。
ただしテンプレートファイル内で利用するメソッド、パラメータには変更があったので、Drupal 6のテーマをDrupal 7用に書き換えるのは、少し大変かもしれません。

 

またDrupalオフィシャルサイトでは、テーマ作成のためドキュメントが充実しているので、とても参考になりました。
Theming Drupal 6 and 7 | drupal.org

jQueryでアンカーポイントまでスクロール。

2011.04.01 / Labs

jQueryでページ内のアンカーポイントまでスムーズにスクロールするスクリプトです。
スクロールのイージングには「jquery.easing.1.3.js」を利用しています。
サンプルはこちら

<a>タグのリンクからハッシュ(#の部分)のみを抽出して、ページ先頭からの高さを調べています。

テキストフィールドの文字数をカウント。

2011.03.05 / Labs

テキストフィールドに入力した文字数を、リアルタイムにカウントするためのスクリプトです。
サンプルはこちら

テキストエリア内でキーストロークがあった時、またはテキストエリアの内容が変更されたときに文字数をカウントして、表示を書き換えています。

外部SWFファイルからフォントの埋め込み。

2011.01.02 / Labs

ActionScriptで外部のSWFファイルに登録してあるフォントを、動的に埋め込む方法です。
初めにフォント情報をリンケージとして登録するためのSWFを作成します。
新規でflaファイルを作成して、ライブラリパネル上で右クリックから表示されるコンテクストメニューで「新しいフォント…」を選択します。

フォント名を入力して、埋め込みたいフォントと文字を選択します。
ここでのフォント名は後から参照することはないので、自由な名称で構いません。

続いて「ActionScript」タブからリンケージの「アクションスクリプト用に書き出し」にチェックを入れて、クラス名を入力します。
このクラス名は埋め込みの際にActionScriptから参照します。

これでライブラリパネルに、リンケージとしてフォントが登録されました。
この状態でSWFファイルを書き出して、ファイル名を「fonts.swf」としておきます。

 

次に、作成した外部SWFを読み込み、フォントを埋め込むActionScriptファイルを作成します。
下記のようなスクリプトを記述します。

上記はドキュメントクラスとして記述した場合の例です。

 

初めに作成した外部SWFファイルを読み込みます。

 

外部SWFファイルにリンケージとして登録したフォント(クラス)を利用可能にするために「ApplicationDomain」を登録します。
フォントクラス「HelveticaRegular」として登録します。

 

先ほど登録したフォントクラスを、グローバルフォントに登録します。

 

フォントクラスから作成したオブジェクトをもとに、テキストフォーマットにフォント名を指定します。

 

フォントの埋め込みを有効にします。

 

フォントクラスから埋め込みの際のテキストフィールドは、アンチエイリアスが「NORMAL」の状態で、あまりきれいではないので「ADVANCED」に変更します。

jQueryでモーダルウィンドウを作成。

2010.12.23 / Labs

(追記/2011.12.02)ウィンドウをスクロールの際に、背景もズレてしまう不具合があったので、CSSとJavaScriptの一部を調整しました。

 

jQueryを使ってモーダルウィンドウを作成します。ウィンドウに表示するコンテンツはjQueryのAjaxで読み込むようにしています。
サンプルはこちら

jQueryを使ってリストのリンクをクリックで「href」のアドレスを参照し、「div#modal div.container」に対してコンテンツを読み込み、表示します。

 

CSSでは、モーダルウィンドウの背景を黒(#000000)の透明度75%としています。

 

リンクの「href」のアドレスを参照してコンテンツを読み込み、表示しています。
背景の「div#modal div.background」、またはコンテンツ内の「a.close」をクリックで、モーダルウィンドウを閉じます。