Play Framework 2.0 + Java コトハジメ。

Play Framework ってなあにー?というところからこのおはなしは始まります。

そもそも、うちが Play Framework をかじるきっかけになったのは、
「2~3枚の画面持った簡単なWebアプリを作ってね♪」「あ、締切月末だからー」
「今後機能拡張する予定もあるから、将来困らないような仕組みにしておいてね~」
「そうそう、仕様はまだちゃんと決まってないからねえ~」
という、かるーいノリのお仕事依頼。
この時点で月の上旬が終わろうとしてる頃ですから、残された時間はお察しです‥‥
ねえねえちょっと待ってよ、そういうの一番困っちゃうんよねえ。

うちは根っからの Java コーダー。
でも、これまでは、Framework やプラットフォームはチームの誰かさんが持ち寄ってきて、
うちは画面や機能を実装するだけだったので、
本音で言うと、Framework のこと、実は詳しく知らないの‥‥。

以前加わったプロジェクトで使ってたプラットフォームは、たしか、
Java + Struts2 + Spring2.5 + Hibernate3.3 という構成。
これを使いまわすのは‥‥どう考えても無理なんよねえ。

Struts – Spring – Hibernate の組み合わせは高機能なんだけど、
とにかくプラットフォームの構築にかかる時間的なコストが高すぎるのです。
あと、理解を深めるにも技術的なハードルが高くって‥‥
各 Framewrok を最新化するだけでもどれだけ時間がかかるか分かったものじゃない。

かと言って、今更 PHP や Ruby on Rails をかじろうとは思えず、
他によさげな手段が思いつくわけでもなく‥‥
さあ‥‥困ったぞお。

そんなこんなで、うちでも扱えそうな適当なプラットフォームがないかなあ‥‥
とWebをさまよってたところ、@IT の Play Framework の記事に行き当たったのでした。
Java開発で泣かないためのPlay frameworkの基礎知識
これ、読んでて結構目からうろこだったので、まだ見てないって人は読んでみることをおすすめします。

要点だけをかいつまむと、Play Framework の特徴は、こんなふうに言えると思います。
「JavaとScala(*1)のためのMVC(*2)フレームワーク」
「Javaで手軽に素早く開発を行いたいときに最適」
「後から修正訂正があっても手軽に対応できる」
「しっかりとしたルールが決まってて、それに則って書けばすぐ出来上がり」
「DBとの連携もほとんどラップしてあって簡単」
「ビルド不要で、変更がその場で確認できる」
「Scalaを知らなくてもほぼ問題なくって、これからScalaに手を出すきっかけになるかも」

とにかく素早くできちゃう!
ビルド不要で結果がすぐ目の当たりにできちゃうところも、かなり素敵です。
実際のインストールや構築の進め方などは、今後書き進めていくつもりですー。

*1 : Scala はJavaをベースに持つプログラミング言語。オブジェクト指向に関数型言語のいいところをくっつけたような感じのもの。
   処理を驚くほど簡潔に記述することができる。
*2 : Model-View-Controler型のフレームワークのこと。データベースなどとの情報のやり取りを司るModel、
   画面表示を司るView、各画面の機能面を司るController、それぞれの役割を分担する型式。

(´・ω・)‥‥

やっぱりなんというか、仕事しながら気づいたことをその日に書き留めていかないとだめですねえ~。

あれこれ書こうと思っても、調べたそばから抜け落ちてく今日この頃。
やっぱりぐーぐるせんせの副作用なのかなあ~。

そんなこんなで、ここの記事たちも、スマホに限らずいろーんなのを書き留めてくことにしますー。
この先も脈絡ないかも。でもね、カテゴリーでまとめればいいよね!

脈絡なく、その日見知ったいろんなことを書き留めてくことにしましょうか。
うん。それがいいや。

OpenGraphProtocolとは

今回はOpenGraphProtocolについてのおはなし。

「何それ?!きいたことなーい!」という方も中にはいらっしゃるでしょうか。
書くいううちも、その一人でした‥‥なので気にしないっ!

「OpenGraphProtocol」とは、
おもにソーシャル系のサイトなどで利用される、オープンソース版のメタタグだと思えばよいでしょう。
たとえば、これを書いておくと、facebook内で誰かがとあるサイトを「いいね!」したときに、
自動的にタイムラインに表示されるリンクに、自動的にページ説明やイメージ画像を取り込んでくれるというものです。

<meta property=”og:title” content=”スマホ向けサイト”>
<meta property=”og:description” content=”スマートフォン向けポータルサイトです。”>
<meta property=”og:image” content=”http://sevenseas.moo.jp/img/icon.png”>

サイトのヘッダ部にこういう記述を付けましょうねという議論です。
ソーシャル系サイトとの連携を考えているのであれば、今後は必須なのかもしれませんねえ。

AndroidのOSバージョン

AndroidのOSバージョンについて、まとめてみましょー。

2013/2時点の最新バージョンは4.2です。
AndroidOSはバージョン別に愛称がつけられてます。
愛称はアルファベット順に甘いものが並んでます。
話が通じる人にはそっちを話したほうがわかりやすかったりもします。

以下、日本で出回ったAndroid端末のOSバージョンを並べてみますね。
バージョン 愛称 特徴
1.6 Donut Docomoの最初のころの端末は1.6でした。今じゃほとんど見かけません。
2.1 Eclair 初代のXPERIAや初代のGALAXYが2.1です。Androidが騒がれ始めたころのもの。aにはアクサンがつきます。
2.2.x FroYo FrozenYogrutの略です。2010年頃のもの。
2.3.x GingerBread GBと略す人もいます。2011年ごろに市場に急速に浸透したAndroid端末はほとんどこれでした。
3.x HoneyComb タブレット専用にカスタマイズされたOSです。GBと同時に浸透しました。
4.0.x IceCreamSandwitch ICSと略されます。ここからハンドセットとタブレットで共通のOSとなりました。GalaxyNexusが最初のICS搭載機です。
4.1,4.2 JerryBean JBと略されます。現行の最新OSです。ICSのマイナーチェンジ版です。
4.? KeyLimePie 次のOSはキーライムパイだといわれています。

1桁目のメジャーバージョンが変わると、OSも大幅に刷新されます。
マイナーバージョンの変化でも、愛称が異なるとさまざまな違いがあると思ったほうがよいでしょう。

そのほかの用語や知っておくとお得な知識など。

ハンドセット:いわゆるスマートフォンとです。5inchを超えるようなのも登場していて、タブレットとの境界があいまいになってきてます
タブレット:7inchのタブレット機には、GBが搭載されたり、HCが搭載されたりしていて、その定義はあいまいです

ブラウザについて
現在のところ、Android搭載の標準ブラウザはOSのバージョンごとに異なっています。
次のバージョンであるKeyLimePieからは、ChromeForAndroidがAndroidの標準ブラウザとなるというお話です。
そうなると、OSのバージョンとは切り離された管理がなされることになります。
ただ、まだ現状ではAndroid2.3.xを利用するユーザーが多く存在します。
となると、極力多くの端末で閲覧できるように、努力しなきゃいけないという‥‥

iPhoneと違って、Androidは自由度が高い分、バージョンによって、メーカーによっていろんな部分が異なります。
全ての端末で綺麗に見えるものを目指すのは、html5をもってしても、なかなか難しかったりします‥‥。

viewportの設定

今回はhtml5でのhead定義のひとつ「viewport」についてです。
「viewport」は、おもにモバイルデバイスでのページ表示を制御するためのものだと考えてください。

「target-dencitydpi」

「target-dencitydpi」は、デバイス上での「見た目の解像度」の制御を行います。
この「見た目の解像度」って、なかなか理解しにくい概念です。
「見た目の解像度」ってなんだろう‥‥という方のためにも、
以下にその考え方をまとめてみました。

近頃は新旧のデバイスが百花繚乱、さまざまなユーザー環境がある中で、
できる限り見た目を統一するための技なのです。

「target-dencitydpi」の設定有無が影響しています。

http://blog.webcreativepark.net/2011/01/31-121759.html

たとえば、「target-dencitydpi」の定義を省略したとします。
この時、ブラウザ上ではデフォルトである「medium-dpi」で表示されます。
これが「high-dpi」などと定義されたページを表示した後、
ブラウザバックで戻ってくると、
何も定義がないdメニュー側で表示が崩れるというお話です。

この問題はICSでのみ発生し、GB、JBでは起きないようです。
英文ですが、まさにこの問題を記述した記事を拾っておきました。

http://randomstrings.blogspot.jp/2012/10/android-ics-and-target-densitydpi.html

上記記事では対処法として、
「トップページにだけ”medium-dpi”って書いちゃいなよ」
とまとめてますが、
もし構築済みのページにこれを追記しようと考えているのであれば、
見た目の崩れが起きないかどうか、慎重に確かめたほうがよいかもしれません。

html5のhead要素

今回はhead要素に記述するべき内容についてまとめてみます。

html5では、html4のころと違って、head要素で一部のページ構成を指定することを推奨します。
これらは主に、Androidやiphoneなどの、モバイルデバイスで画面の表示を適切にするための技でもあります。
具体的には、「」「vieport」などの指定を行います。

viewportとは、デバイスの画面表示を設定するための定義です。
viewportには以下のような設定があります。
「user-scalable」
「target-dencitydpi」

それぞれの詳細な解説は次回以降に‥‥

手書きが好きな人のためのHTML5、スマートフォン向けサイト構築φ(・ω・ )メモ

Android用Webサイトの開発にあたっての覚書や、Android関連の諸々の情報をまとめてみます。

これまでHTML4でせっせとウェブサイトを構築してきたうちですが、
そろそろいい加減「HTML5」でサイトを書き直してみたいなーと考えてます。
もちろん、スマホ向けにもページを最適化なんかしちゃったり。

「HTML5」や「スマホ向け」ではいろんな情報が錯綜しています。
いったいどんな情報をもとにして進めてけばいいのか、なかなか難しいところがあります。
たとえばうちみたく、手書きでページを作成していたりなんかする場合、
「HTML5」についてはなんとなく理解はできますが、
「スマホ向け」はなかなか理解できないところがたくさんあります。

おしごとの関係でスマートフォンと「スマホ向け」サイトをたくさん触ってきたうち。
せっかくだから、自分のウェブサイトも再構築しながら、誰かの助けになるように、
構築しなおすための考える手順みたいなものをまとめられたらいいなーと思ったのでした。
あと、ウェブサイトを作ったことがない!手で書いたことないー!という方にも
ある程度知識を増やしていただけるように、ちょっとやさしめに書いていこうと思います。

Title Photo by © Noodle93 2010

構築のための環境

html4に慣れ親しんだ方がスマートフォン向けサイトを構築するにあたって、
知っておかなきゃいけないことや、
スマートフォン向けサイトの構築にまつわる様々な技術情報を掲載しています。

言い換えるならば、自分自身の備忘録・・・でもありますが。

さてと、何から書き始めましょうか。
準備しておくもの、準備しておいたほうがいいかなーと思うものを並べてみましょうか。

・PC
 ‥‥いうまでもないですよねえ。
 たぶん一番よく使われてると思われる、Windows7を念頭に置いて書いていきます。

・テキストエディタ
 使い慣れたものでいいです。うちはひでまる愛用してます。

・ブラウザ
 モダンブラウザは一通り準備しておくことをおすすめします。
 Chrome、Firefox、InternetExplorer、Safari、Operaなどです。
 ChromeはPC上でAndroidの動作をある程度再現するためにも必要です。
 Firefoxはデバッグのしやすさで一番のお気に入り。
 InternetExplorerはある程度のユーザー数がありますから、準備はしておきましょう。
 SafariはiPhoneの動作をある程度再現する意味でも用意しておきたいところ。
 Operaは余裕があればでOKかもです。
  (※ ブラウザの動作確認についてはこちらでも記述しています。)→将来追加)

・Androidエミュレーター
 いきなり何のことやらかもですが‥‥
 PC上でAndroidの画面動作などを確認するためのソフトです。
 手元にAndroidのスマートフォンがあったとしても、導入しておくことをお勧めします。

・スマートフォン
 手持ちのスマホがあればぜひ用意しておいてください。
 Android、iPhone、両方あるとなお素敵ですが‥‥