Labs

フォームのデザインのまとめ。

2017.12.19 / Labs

フォーム内のテキストフィールドなどのパーツデザインのカスタマイズのまとめです。
サンプルはこちら

 

デザインは基本的にCSSのみで行なっています。セレクトボックスの下向き矢印のみSVG画像を使用しています。
フォームのHTMLはこちら。

CSSはこちら。ラジオボタン、チェックボックスでは本来のパーツを非表示にして、<span>タグで独自のパーツを作成しています。

jQueyで埋め込まれたSVGを操作する方法。

2015.07.20 / Labs

ベクターベースのSVG画像は、ディプレイの高解像度化が進む中、今後より重要になっていきそうです。
SVG画像自体はイラストレータなどベクターグラフィックのソフトで作成し書き出すこともでき、また単純な図形であれば、XMLにより直接記述することも可能です。

 

SVG画像の強みとしては、JavaScriptで操作することもできるため、画像内のパーツに対して個別にアニメーションを加えることも可能です。
JavaScriptで操作の際に、HTMLに直接SVGを記述するインライン形式では簡単にjQueryから操作できますが、objectとして埋め込まれたSVGに対しては、少しだけ工夫が必要です。
サンプルはこちら

 

下記は「test.svg」という円のみ描かれた単純なSVG画像で、円をマウスオーバーによって透明度を変化するスクリプトです。

「test.svg」ファイルの中身はこちら

注意点としては、objectの内容を読み込んだ後での実行が必要なことと、「.contents()」にてobjectの内容の取得が必要です。

Drupal 7でテンプレート内でのリダイレクト。

2015.04.20 / Labs

Drupal 7で「page.tpl.php」などのテンプレート内でリダイレクト処理のメモです。
カレントユーザーがログインしていない場合には、次のような記述でログインページにリダイレクトできます。

パラメータの「destination」にURLを入れることで、ログイン後に該当ページへ移動することもできます。

jQueryでスワイプ操作のイベントを取得。

2015.01.06 / Labs

jQueryを使ってスマートフォン、タブレットでのスワイプ操作をTouchイベントから取得する方法です。
サンプルはこちら

上記はスワイプの開始(スクリーンにタッチ)からスワイプの終了(スクリーンから離れる)までの座標の距離を測定して、左右の方向を取得するだけの非常にシンプルなものです。
確認のために、方向によってスワイプ対象DIVの背景色を変えるようにしています。

Drupal 8のベータ版をインストール。

2014.10.10 / Labs

10月1日にDrupal 8のベータ版がリリースされましたので、早速テスト環境にインストールしてみました。
少しさわってみた範囲ですが、Drupal 7からの変更点は次のようなものがあります。

 

Symfonyのコンポーネントをコアに組み込み
SymfonyフレームワークのいくつかのコンポーネントがDrupalコアに組み込まれました。
サイト構築の際に直接影響が出そうなのは、デザインテーマの作成でしょうか。テンプレートエンジンが「Twig」に変更になったので既存テーマに関しては作り替えが必要です。
Viewsモジュールをコアに組み込み
Drupalでは必須と言えるViewsモジュールがコアに組み込まれました。使用感としてはDrupal 7の時のView 3とあまり変わりません。
コアに組み込まれたことにより、管理ページの一部もViewsで生成されています。
スマートフォン、タブレットへの対応
標準でレスポンシブデザインを採用されていますので、管理メニューが画面サイズによって変化するようになりました。
デフォルトテーマの「Bartik」も、レスポンシブデザイン仕様になっています。
CKEditorをコアに組み込み
記事作成の際のエディタにCKEditorが組み込まれました。
インストールが簡単に
日本語を含む多言語のインストールがより簡単になりました。あらかじめ「.po」ファイルを用意する必要はなくなりました。

フロントページ
管理メニューを含むフロントページはDrupal 7から大きな変化はないようです。
CKEditor
記事作成の際に標準でCKEditorが使えるようになりました。
デザインテーマ
Drupal 7から引き続き「Bartik」が標準テーマです。レスポンシブデザイン仕様になっています。
Views
コアに組み込まれたViewsは、Drupal 7の時と同様に便利です。

 

Drupal 8もベータ版になり、正式版のリリースまでもう少しになりました。
コアにSymfonyのコンポーネントが組み込まれたということで、内部的には大きな変化があったと思います。
Symfony自体は使っていないのですが、同じくSymfonyをベースにしたLaravelを最近使うようになったので、興味深いところもあります。
アルファ版が長かったことを考えると、正式版が出るまでにはかなりの時間を要するかもしれませんが、今後が非常に楽しみです。