Category Archives: Web技術

Mayaaの学び方・教え方

これは Mayaa Advent Calendar 2015 の23日目です。昨日は「Mayaaの経験を活かして、JSPを注意して使う方法」でした。

あと3日です!

明日はクリスマスイブ、今日は天皇誕生日、一気に年の瀬な感じです。皆さん、年賀状は書きましたか?まだの方は、年賀状ソフトをネット販売で買いましょう。私の勤務先のお客様です。w

ちなみに僕は5年以上年賀状を書いていません。

もし、プログラマー初案件がMayaaだったら

今日のテーマは教育です。プログラミングは学校で習った程度で、Servletとか作るのは初めてな感じの新卒が、Mayaaを使っているチームに配属されたとします。

経験者なら良いんです。
Mayaaの公式ドキュメントを読んでください。その後、僕のブログで、このアドベントカレンダーの1日目から7日目を読んでくれれば良いんです。

JSP、Thymeleaf、JSF、Mixer2を経験しているなら、17日目から21日目も読んでおくと理解の助けになるでしょう。

後の記事はアーキテクトやリーダープログラマー向けなので、ぶっちゃけ読まなくてもいいです。(笑)

さて、本当にど初心者が入ってしまったらどうでしょうか?「JSPでは〜」というのが言えなくなります。

とりあえず、JSPを理解してもらう。

最近はフレームワークでドーンと最初から統合されたシステム作りをするのが主流だと思いますが、MayaaはJSPと同じレイヤーにするために、そのものはシンプルでもないのですが、JSPを覚えておく必要はあります。

昔だったらStrutsを使ってMVCにしても良かったのですが、今はSpringとかJava EEのような重量級をいきなり使うのはきついので、いっそ、生のServletとJSPでページを構成する体験をしてもらうしかないのかなと思います。

いしがみメソッドの4種類それぞれを実装してもらう

Mayaaそのものは柔軟性のある技術ですが、実際のプロジェクトでは、デザイナーと協調するために、いしがみメソッドでは、4種類の書き方に限定することを提唱していました。

しっかりと、4種類だけに限定して書く癖をつけてもらいましょう。

3日目から引用すると、

  • *_HERE

    • その場所に文字列を出力する
  • *_TAG

    • そのタグの属性を変化させたり要素を足したりする
  • IF_*

    • そのタグ及びその子要素が特定の条件にもとづいて消える
  • LOOP_*

    • そのタグ及びその子要素を特定の条件に基づいて繰り返す

そして、それぞれの書き方は

<!-- タイトルを出力します -->
<m:write m:id="TITLE_HERE" value="${page.getTitle()}" />
<!-- 商品画像を表示します。src属性を制御します -->
<m:echo m:id="ITEM_IMAGE_TAG">
  <m:attribute name="src" value="${image.getSrc()}" />
</m:echo>

```markup
<m:if m:id="IF_MEMBER" test=${context.isMember()}>
  <m:echo><m:doBody /></m:echo>
</m:if>
```markup <m:forEach m:id="LOOP_ITEM" items=${items}> <m:echo><m:doBody /></m:echo> </m:if>

きちんとレビューをしてこの通りに書いていなかったら直させるようにしましょう。

これらを書くことは業務の中で圧倒的に多いことです。

まとめ

使い方を絞ったことによって、教える時も絞って教えられるメリットがあります。

ただ、教え方は人それぞれ、教わる方も、それぞれ向いたやり方は違いますので、「これがベストだ」とは言いづらいところがあります。

なので、今回は歯切れが悪くなってしまいますが、まあ、適宜、教育する人、教わる人で、良く話して、ベストなやり方を模索してください。

Mayaaの生まれた日から現在までのWebのフロント開発における時代背景の変化を振り返る

これは Mayaa Advent Calendar 2015 の22日目です。昨日は「Mayaaの経験を活かして、JSPを注意して使う方法」でした。

アドベントカレンダーもあと4日です!

結局最後まで僕が書いてしまいました。一つくらい誰かが書いてくれても良かったのですが、ここまで来たら僕の分でネタが終わりそうなので、参加募集を終了します。(どうしても書きたい方はご連絡ください。

Mayaaの歴史とWebの歴史

今日は、そもそものMayaaの存在意義を過去から未来に向けて探るため、Mayaaが生まれた時代背景を振り返ってみたいと思います。

Mayaaが誕生した時期のWebの状況

Mayaaは2005年のIPA未踏ソフトウェア創造事業に採択されています
公式ドキュメントによると

Mayaaは、すでに2004年11月より、開発がスタートしています。事業に応募した2005年3月現在でも、一通りのコンセプトを実装したプロトタイプ製品がリリース直前の状態ではありました。

とあるので、コンセプト部分は2004年~2005年に生まれたことになります。

当時の言語・ライブラリ・フレームワーク・ミドルウェア・ソフトウェアの最新版はこんな感じです

名前 バージョン
J2SE 5.0
J2EE 1.4
Tomcat 5.5.x
Struts 1.2.x
IE 6 SP2
Firefox 1.0
PHP 5.0.0
Ruby 1.8.2
Ruby on Rails 1.0より前のバージョン

Googleマップのリリースとともに、「Ajax」という単語が生まれたのがちょうどその時(2005年2月)で、まだPrototype.jsやjQueryとかはありません。

WebレイアウトはCSS2はありますが、まだtableレイアウトも使われていた時期です。

そんな時期から、デザイナーとプログラマーの分業の需要があったのはちょっと驚きです。

Web2.0という言葉が出てきたのもこの時期です。

僕がMayaaを使い始めた時のWebの状況

僕が初めて触ったのは2009年8月です。その直前にWicketブームなんてのがあり、Webの開発スタイルがStrutsから大きくシフトしようとしていた時期でもあります。

当時は既にjQueryも存在し、Ajaxも一般的に使われ始めていました。モダンブラウザも生まれていましたが、IE6対応が必須の時代でした。HTML5は草案が出たばかりで、これからという感じでした。

iPhoneは3GS、AndroidはHT-03Aが発売したばかりでした。

Mayaa自体は既に成熟期に入っており、大きな変更はありませんでした。

つまり、Web2.0期の発祥とともに開発が始まり、モバイル時代に入る前に成熟期に入っていたMayaaを僕は使い始めたのでした。

運が良かったと思います。劇的な変更がほとんどなかったので、開発中のシステムをMayaaの最新バージョンに追従していくことが容易でした。

スマートフォン対応・HTML5の時に、nekoHTMLパーサーをビルドしなおさなければならなかったことはありますが、Mayaaは設計が良いのか、現在まで大きな問題なく使えています。

なお、ThymeleafやMixer2はこの後登場します。

現在のWebの状況

2013年くらいに、Webのフロントの世界に激震があり、Angular.jsなど、SPAの技術が旧発展します。

node.jsの発展ともにnpmなどのエコシステムも充実し始め、Grunt / Yeoman / Bower などもあって非常にキラキラしたフロントエンド時代が到来していました。

こうなってくると、サーバーサイドの仕事は、減ってきます。極端な話JSONを返せば良いこともあります!

ただ、SEOが必要な場合、SPAにすることは出来ませんので、サーバーサイドがHTMLを生成する需要は未だにあります。しかし、それで吐き出されたページはBootstrapが入っていたり、だいぶキラキラしていて、そこから先にAjaxを平然と行ったりします。

そして、今年、Mayaaの参加する、Seasarプロジェクトが来年で終了することがアナウンスされました。(Mayaaは今後もメンテナンスを続けます)

未来の予想

Webは混沌としていると言われます。でも、それは、需要がますます高まり、多くのプレイヤーが入り乱れているということも意味しています。

SEO全盛が終わり、IoTやオムニチャネルの時代になってくると、サーバーサイドテンプレートエンジンの技術は必要性が薄れて行くでしょう。

テンプレートというUIよりも、UXの設計が重要と言われますが、ますます顕著になるでしょう。

あと、1,2年で劇的に変わるかもしれません。

その時、Mayaaは役目を終えるのでしょうか?Mayaaが生まれて既に10年を過ぎますが、ニーズがある限りメンテナンスは続けられます。

まとめ

MayaaはいわゆるWeb2.0期に誕生し、Web全盛時代を生き抜きました!今でも十分問題なく使えます!この時代、人々はPCやスマートフォンのブラウザを使って、コミュニケーションをしてきました。

Mayaaがここまで生きてこられたのは、デザイナーが自由にデザインを作ることを制約しない設計であったことがポイントだったと思います。

僕は、IoTや人工知能の時代になっても、これまで紙だったものがWebに置き換わる需要の方が多いと思っているので、すぐに衰退はしないと思っています。そして、Mayaaが使われている限り、メンテナンスに参加し、情報を発信して行きますので、今後共よろしくお願い致します。

Mayaaの経験を活かして、JSPを注意して使う方法

これは Mayaa Advent Calendar 2015 の21日目です。昨日は「テンプレートエンジン(Mayaa, Mixer2, Thymeleaf, JSF2.x)を比較してみて」でした。

クリスマスまであと5日です。

テンプレートエンジンを比較してみて

前回までに、Mayaa, Mixer2, Thymeleaf, JSFのどれを使うべきかについて結論を出しました。しかし、JSPを使わなければいけないケースもありますし、簡単なプログラムではライブラリを導入せず、さっとJSPだけで済ませたい時もあります。

そんなわけで、これまでの経験を元に、JSPを使う際の注意点を考えてみたいと思います。

JSPでいしがみメソッド

m:id含め、プログラム都合の識別子は常に大文字を使う

プログラムに制御情報を書いてしまうのでこの限りではないですが、せめて見えやすくしたいところです。また、中にごちゃごちゃした式を書いていくのはアレなので、taglibやヘルパー関数にまとめたいです。

僕はJSTLやtaglibは中途半端過ぎて嫌いなので、ヘルパーにまとめます。ヘルパー関数はimport staticを使うのが良いと思います。

m:idのする仕事を4種類に限定する

JSPはなんでも出来てしまいます。それこそ、いきなりスクリプトレットで、プログラムを書いてしまうことも出来ますが、それはやめましょう。Mayaaでのいしがみメソッドで使う4種類の仕事のみをJSPでもやるようにしましょう。

4種類の実装方法はルールに従う

こんな感じでスタイルを統一しましょう。

HERE:

名前: <%= escape(bean.getName()) %>

IF:

<% if (bean.isHoge()) { %>
<div>
    ほげほげです。
</div>
<% } %>

TAG:

<a
  href="<%= adjustPath(bean.getUrl()) %>"
>リンク</a>

LOOP:

<% for (int i = 0; i < bean.getSize(); i++) { %>
<div>
    <%= i %>回目のほげほげです。
</div>
<% } %>

LOOP系のm:idはindexには長い名前を使い、maxを十分に大きな値を設定する

これはケースバイケースで考えてください。あまり長い名前にすると、テンプレートが見づらくなりますが、iとかjにすると、ブロックを移動した時に動かなくなるかもしれません。

writeプロセッサーでエスケープを解除するときは全部する

escapeヘルパー関数を作ると良いです。

tableタグだけは特別に扱う

ここは心配がいらないです。

m:idをパラメータ対応にする

これも心配がいらないです。
適宜ヘルパー関数をパラメータ化するのが良いと思います。

PathAdjusterを効果的に使う

ここが意味することは、PathAdjusterみたいなものをヘルパー関数として作ると良いことがあります。JSPテンプレートにベタに絶対パスを調整するコードを書かず常に adjustPath(~) のように囲っておくと、後々良いことがあるはずです。

ヘッダー・フッター・共通部品はiframeタグをうまく使う

<jsp:include>タグを使うのが良いと思います。<%@ include file="" %>ディレクティブを使うべきケースはほぼないと思います。

テンプレート上のコメントは、ソース表示時に見えないようにする

<%-- --%>を使いましょう。

単語はなるべくテンプレート側に書く

これは正反対になります。
単語はテンプレートに書いてはいけません。
どこかのファイルにテーブル化しておくべきです。

nekoHTMLパーサーをいじる

パーサもへったくれもないので、気をつけてValidなHTMLを書いてください。出力したページをバリデータにかけても良いかもしれません。

まとめ

以上、見てみると、意外と、Mayaaでの経験がそのままJSPで活かせそうです。JSPを注意して使うことによって、テンプレートがスパゲッティにならないですみます。

ただ、そう思って自分もJSPを扱っていますが、それでもやはり、JSPはぐちゃぐちゃでデザイナーには読めないものになってしまいますし、常にヘルパー関数を使うようなルールを運用するのはめんどくさく、結局Mayaaを使ったほうが楽だったのではないかと感じてしまうことが多いです。パフォーマンスも良くありません。

ある程度の規模のプログラムを作るときは、JSPは避けるべきだと思います。