DSLとXtext

Xtext書けるようになっておいてねという指示を頂いたので、勉強してたらどうも今までのプログラミング言語とは毛色が違うらしいので定義からさらってみる。XtextはDSL生成のためのIDEらしいのでそもそもDSLってなんじゃいってところから。

DSLについて

DSLとは

ドメイン特化言語(Domain Specific Language)の略

「ドメイン」に特化した言語なので特定の種類の問題に対してのみ有効な言語である。

主にメタプログラミングに用いられる。

メタプログラミングとは？

meta- は、高次の-とかいう意味なのでプログラミング言語をプログラミングする的な意味かな？

内部DSLと外部DSL

内部DSL

ホスト言語自身で強力なDSLを記述できる、所謂「プログラム可能なプログラミング言語」。実装が楽な反面、内部言語に依存するため表現力に劣る。多分interfaceをインプリするのも広義で言えば内部DSL。

EX)Ruby on rails、Rakeとか

外部DSL

ホスト言語とは異なる言語で作成するDSL。DSL設計者が自由にフォーマットを作成することができるが、フォーマットをパースする「パーサ」という処理を書く必要があるため内部DSLよりは実装コストは高い。パーサっていうのは簡単に言うとこれがクラスで、これが予約語で～といった処理を書くのだ。

EX) Make,SQL,UML(UMLはグラフィカルに形式を表すという意味でLanguageになる)など

参考：　第1回　DSLとは？ – gihyo.jp

Xtextについて

Xtextとは

Xtextとは、Eclipse上で動くDSL開発支援環境。言語を定義するとエディタを勝手に作ってくれるのが強み。定義を元にDSLエディタ、パーサ、言語モデル、ジェネレータまで作る。MDD(モデル駆動開発)に基づいているのじゃ。XtextはXtext本体の他に、Xtend(Java生成LL),MWE(パースやモデル変換をするエンジン),EMF(Eclipse Modeling Framework：あらゆるEclipseプラグインの基板)というフレームワーク及びエンジンが基板に乗っかっており、それらが組み合わさってDSLを生成している。

参考： Xtext入門 – Slideshare

具体的にどのように実装するか？

ごくごく簡単に言うと、

1. EclipseでXtextプロジェクトを作成する。
2. パーサを記述する。
3. 実行するとEclipseがもう一個起動してその中で指定した拡張子を使ってやるとDSLが適用されている。

これだけ。

とりあえずは、ここまで。次からは実際に実装するべ。

結局レスポンシブデザインってなんだ

おはようございます。レモンです。

院試が間近に迫ってますが、まあたぶんなんとかなります。

今回の記事はほぼ雑談というかコラムというかテキトウな話です。レスポンシブデザインってなんじゃいと思ったことを書くだけなのです。

そもそもレスポンシブデザインとは

Webデザインの手法の一つで、様々な種類の機器や画面サイズに単一のファイルで対応すること。(IT-wordsより)

つまりは、HTMLはひとつにしておいてCSSの上書きとかでモバイルやタブレットにもいい感じに対応させようぜってのがレスポンシブデザイン(RWDって略すらしいです)なんだと自分は勝手に思っています。

このWordPressのテーマもRWDですよね。プロが作ったデザインだけあってしっかりしていると思います。

レスポンシブデザインについて思うこと

RWDは自分は思想的にはすごく合理的な考え方だなと初めて触れた時思いました。なるほど、確かにSEO的にも良いしHTMLを書く手間を減らすことができる。と。そして、PCとモバイルのデザインはあまり変わらないほうがユーザが混乱しない、というのも納得でした。同一のサイトであるという認識は確かに必要です。

RWDに対応したCSSフレームワークも徐々に定着しつつ有ります。BootstrapやFoundationなんかがありますね。特にBootstrapを自分は最近よく触っているのですがこれを使えば最低限のWebデザインはできるというのはデバイス対応も含まれてるなーと感じています。

実際にレスポンシブデザインでWebをデザインすると

さて、この合理的かつ効率的なRWDでありますが実際にデザインするとすごく難しいことが最近じわじわとわかってきました。

RWDの前のデザイン、つまりはPC版とモバイル版に分けるやり方だとそれぞれについてだけのデザインを考えれば良いのです。

PCは解像度に多少の違いがあっても横長のウィンドウで一度に多量の情報を表示できる。モバイルは縦長で一度に少量の情報しか表示できない。(正確に言うと多量の情報を入れると文字や画像が小さすぎて見てくれない)と言った違いがあるわけです。つまりはデバイスに合わせて情報量を取捨選択しながらレイアウトしていけばいいのです。ただし、モバイルとPCで齟齬がないようにjQueryなどを使って階層表示にしたりといった工夫がありました。確か、WikiPediaのモバイル版では見出しだけ表示しておいて必要な情報だけをタップで表示するといった方法を取っていたと思いますが、あれはそういうわけです。

しかし、RWDではこれを同じHTML上で考える必要があります。同じデザインでもこれがPCで表示されたらどうなるか、モバイルだと、タブレットだと？という考えを常に持ってレイアウトしていく必要があります。

PCでは見た目がよくってもモバイル表示にしてみると文字が多すぎてうんざりしたり、その逆ということもしばしばあります。同時にこれらのことを考えるデザインは先ほど述べた従来のやり方と比べてすごく手間を取る上、レイアウト上の制約も大きいです。意外に手間なんだなあと作ってみて感じるのでした。

レスポンシブデザインの使いドコロ

RWDを作ってみてきついと感じましたが、たぶんこれはコンテンツの量によるんじゃないかなとも思いました。量が多いとどうしても取捨選択が大変で情報の整理を同一HTMLで整理するのがつらくなります。

ただ、フォームやギャラリーサイトなんかの比較的コンテンツの量が多くない、多くても密集度や種類がそこまで多くなく整理がしやすいものであったらRWDはささっと作れそうな気がします。

だから、同一サイト内でもRWDの部分とPCとモバイルを分ける部分とがあってもいいのかなあと思いました。各ページに載せる情報を予め整理してここはRWDでいけそう、ここは分けたほうが辛くないみたいな話をしておいたほうがいいのかなあ、、BootstrapなどはGridシステムとかだけに使っちゃえばいいと思います。最悪visibleとhiddenを使って同じHTML内に2種類のレイアウトを用意するという力技もできなくはないですし。

ただし、デザインは極力合わせたほうがいいとは思います。せめてテーマカラーは統一しないと混乱します。たぶん僕も混乱します。

RWDにしろ、CSSフレームワークにしろデザイナや開発者が楽をするために開発されたものであるのだからこれに四苦八苦するのは本末転倒というものです。

ある程度融通を効かせて自分なりにテキトーに解釈してしまうのが精神衛生上も効率的にもいいんじゃないかなーと思った次第でした。

自分で書いててよくわからない文章になっちゃいましたが、まあコレで終わりです。現在RWDのせいでぐるぐる混乱してるので所謂愚痴と頭の整理でした。