まだIT業界で消耗してるの? 😊ソフトウェア開発者のブログ

カテゴリー: Web アプリ

ドメイン名を変更して、「マンガでなれる?WEBデザイナー講座」を始めました

2015年6月22日

ドメイン名を awoni.net から creativeweb.jp に変更しました。変更した大きな理由はなく、今後も web 関係のことを書いていくのだったら web が入っているドメイン名にした方がわかりやすいのではないかと思っただけです。最近は、このサイトの更新があまりできていないので、これを機会にもう少し更新の頻度をあげていきたいと思っています。

また、「マンガでなれる?WEBデザイナー講座」を始めました。最近、PCの他にスマートフォン、タブレット等色々なデバイスが増えて、Web デザインの方法が大きく変わってきたので、自分でも勉強しようと思っていたところ、フリーWEBデザイナーのミカ(栗本美香)さんが、マンガが得意なのを思い出して依頼したものです。

自分は、作りたいものがあるから Webアプリを作るというタイプで、基本的に一人で Web アプリを作っています。一人で全部していると、きれいなプログラムを書くことも優れたデザインのサイトを作ることも無理ですが、少しでもいいものは作りたいと思っています。

一人で作ることのメリットは効率がいいことで、今回のマンガも2週間ほどで公開できました。やり残してることも多いのですが、運用しながら修正していけるというのも Web のいいところだと思っています。

マンガでなれる?WEBデザイナー講座の図

 

5374 徳島市版を作成してみました

2015年5月17日

Windows 10 Insider Preview と Visual Studio 2015 RC のテストを兼ねて、Code for Kanazawa が作った「いつ、どのゴミが収集されているのか」をわかるWebアプリ 5374.jp の徳島市版を作ってみました。

Windows 10 も VS 2015 も自分の使った限りでは、エラーが発生することなく使えています。今年の夏に発売予定ですが、準備の方は順調に進んでいるようです。VS 2015 で、ASP.NET 5 については、あまり使っていませんが、ASP.NET 4.6 では製品版といってもいい状況で、実際の運用環境で使ってもいいという "Go-Live" ライセンスになっているというのもうなづけます。

5374.jp については、徳島市の場合は隔週及び4週毎のごみの収集があるのに、それに対応していないため、カスタマイズをしてみました。詳しくは、GitHub の方に記載しています。

徳島市版を作成した理由の一つには、JavaScript をどこまで使うのがいいのかということに対するテストという意味合いもあります。結局は、JavaScriptにどれぐらい慣れているのかということが一番大きな要素になると思いますが、自分の場合はロジックについてはC#で書いた方が楽です。JavaScript は一般的には手軽なのですが、Date を使うのは結構ややこしいです。自分の場合は、メンテナンスまで考えると今までどおり JavaScript は、UI 部分だけで使った方がいいと思いました。

5374.jp の場合、収集日を通知してくれる機能が欲しいと思うので、Cordova で作るのがいいのか、Xamarin で作るのがいいのか試してみたいと思っています。1月にアプリを作りかけたときは、表示の項目数が多かったので、Xamarin.Forms ではレイアウトの処理に時間が掛かりすぎました。5374.jp の場合は、それと比較するとかなり簡素なので Xamarin.Forms でも余り問題がないと思うので、比較するのには丁度いいと思っています。

Bootstrap を使ってレスポンシブ Web でモバイル対応しています

2015年2月14日

最近は、「統計メモ帳」のサイトのモバイル対応をしています。当初は、ユーザー エージェントによる振り分けで対応しようと思っていたのですが、作業中にレスポンシブ Web でもできるのではないかと言うことに気づいて、テストしたら問題がないようなので、Bootstrap を使って、レスポンシブ Web でモバイル対応を進めています。

image

統計メモ帳だけで、テンプレートが60ページあるので、もし振り分けにしていたら、テンプレートが120ページになったということで、後の管理を考えると、できるだけレスポンシブ Web で対応した方がいいと思っています。

自分が管理で一番大変だと思っているのは、テンプレートの修正や CSS の管理です。今回もまだ50ページ以上のテンプレートの修正作業が残っていて、かなり大変な作業です。プログラムの部分は、Visual Studio が結構優秀なのと、ソースは Git に入れてあるので意外とスムーズにいっています。

CSS には、デザイン能力も必要ないし、変数も関数もないのでプログラムの能力も必要ないしで、3ヶ月も勉強すれば誰でもできると思われていて、webコーダーは最底辺の職種になっています。そのためかどうかは分かりませんが、CSS の管理はあまり考えられていなかったと思います。しかし、CSS には、名前空間がないので、そのクラスがどこで使われているかを調べるのに手間がかかります。だから本当は命名規則をきちんとしておくことが非常に重要です。

Bootstrap を実際に使ってみて感じたことは、普段に使うコンポーネントを一通り作ってくれて、そのコンポーネントに名前をつけてくれたということが偉大だと思います。CSS のクラスの名前にデファクトスタンダードを作ったということは大いに評価すべきで、以後の管理は少しは楽になると思います。

Bootstrapは、所詮はコンポーネントの集まりで、利用する人の能力によってどうにでもなります。Bootstrap は、カスタマイズをするのが難しく Bootstrap 臭がするからダメだという人は、CSS をカスタマイズする能力がない人です。自分のようにデザイン能力がない人間が使えばしょぼいデザインのものしかできません。

レスポンシブ Web では、以前は Google アドセンスを入れるのが難しかったのですが、レスポンシブ広告ユニットが使用できるようになっているので、それほど問題なく導入することができました。

Visual Studio で Sass 版 Bootstrap を使う

2014年12月22日

以前にもBootstrapを使おうと思って調べてことがあったのですが、Moongiftの記事には、欠点として、Bootstrap臭があるとして以下のようなことが書いてありました。

Bootstrapのデザインは我が強く、Bootstrapを使っているなとすぐに感じられてしまいます。これを嫌うデザイナーはとても多いです。個人的にもそれは致し方ないと思っていたのですが、最近【難しく考えすぎ!?】bootstrap臭のしないお洒落なレスポンシブWEBデザインの作り方 | WEBデザイナーの憂鬱という記事を読み、グリッドだけ採用するというのはやはりありなのだと気付かされました。

他のブログを見ても同じようなことを書いていたし、自分の場合はグリッドを使う機会はあまりないので、それじゃ使うのやめとこうかということになっていました。

しかし、最近、jQuery UI を使ったり素材をいろいろなところから取ってきていると、バランスの取れないデザインになってきていたので、もう一度 Bootstrap はどうなのかを調べ直してみました。そうしたら、bootstrap.css を単に使うのではなく、Sass 版の Bootstrap である、bootstrap-sass を使うことでカスタマイズがすごくやりやすくなるのがわかりました。それで、bootstrap-sass の使い方を少しメモしておきます。

Bootstrap 自体が、Less で開発されているのだから、それを機械でコンパイルして作った bootstrap.css を修正しようと思ったら無理があるのは当然ですよね。それから、Bootstrap は Less で開発されているのですが、Sass の方が下の方でも少し触れるのですが、機能が少し多くて少し便利なので、初めて使うのだったら Sass を使った方がいいと思います。

Visual Studio は、2013 update 2 以降でSass に標準対応しており、インストールの手順は、stackoverflowの「How To Use SASS in Visual Studio 2013」を参考にしました。

1. メニューの「ツール」→「機能拡張と更新プログラム」を使って、VS2013 に Web Essentials 2013 をインストールします。Web Essentials 2013 には、Sass のコンパイラも含まれているので、これだけの作業で Sass が使えるようになります。

image 

2. SASS の設定は、メニューの「ツール」→「オプション」でできますが、インストール時の設定が下の図のようになっているので、特に設定をしなくても、.scss ファイルを保存した時に自動的にコンパイルされます。

image 

3. プロジェクトに Bootostrap-sass をインストールするには、NuGet を使うと便利です。

image

4. Bootostrap-sass をインストールすると下の図のようにファイル構成になります。

image

4. そこで、_bootstrap.scss をコピーして、例えば、bootstrap-custom.scss という名前を付けて保存します。_bootstrap.scss の内容は、下の図のようなものです。例えば、不要なコンポーネントがあれば、ダブルスラッシュでコメントアウトして保存すれば除外できます。

image

5. bootstrap-custom.scss を保存すると、自動的にコンパイルされて下の図のように bootstrap-custom.css が作成されます。

image

Visual Studio で、2013 update 2 が公開されたのが今年(2014年)の5月なので結構最近のことですが、それ以降は本当に簡単に Sass が使えるようになっています。

次に、Web デザイナーがよく使っている Dreamweaver の場合はどうかというと、Adobe の連載記事「SassをDreamweaver&Edge Codeではじめよう」に説明があります。この記事の第1回は、Sass のいい説明になっていると思います。ただ、Dreamweaver 自体は Sass に対応していないので、Compass を直接使った方がはるかに便利だし、Windows PC の場合だと Visual Studio を使った方がずっと効率的だとは思うのですが、慣れたツールを使いたいという人は多いのでこういう使い方になるのかなと思いました。

Bootstrap のカスタマイズについては、オンラインツールとして本家のCustomize and downloadやライブでカスタマイズができる Bootstrap Live Customizer がありますが、それと同じカスタマイズを、Sass では、bootstrapフォルダーにある_variables.css を編集することで行うことができます。当然のことですが、下の図を見るとオンラインツールと同じ順番に変数が並んでいるのが分かると思います。だから、Sass を使って変数を修正するのに難しいことは全然ありません。

image

Sass のいいところは、上の図をみたら変数に !default が付いているところです。その場合、直接 _variables.css を編集する必要がなくて、先ほど作成した bootstrap-custom.scss で、bootstrap/variables を読み込む前に、変数を定義しておいてやると、その場合には default が定義されていると定義された変数の方が優先されます。だから、bootstrap-custom.scss を編集するだけでカスタマイズをすることが可能です。例えば文字の色を brand-danger と同じ色のしたいのであれば下の図のように @import “bootstrap/variables” の前に $text-color を定義してやればOKです。

image

こういうやり方だとカスタマイズした所がよく分かります。また、Bootstrap は、よくバージョンアップをしますが、Bootrap-sass のファイルを全く触らずにカスタマイズしているので、スムーズにバージョンアップをすることができます。

変数のカスタマイズ以上のことをしようとすれば、Sass のことを勉強する必要が出てきますが、基本は CSS ファイルと同じなので慣れるのは早いと思うし、Sass のページには、英語ですがきちんとしたドキュメントもあります。自分も、もう少しカスタマイズをしたいところがあるので Sass のことをもう少し勉強しようと思っています。

最後に、Visual Studio のことについてですが、Web デザインの関係では、自分が使い始めた数年前は本当にひどかったですが、現在では非常に優秀になっています。下の図のように、コードの変更をすぐに Page Inspector を使って見ることができるし、エディターは入力の補完機能が強力だし、カラーピッカーも備えています。自分のようにデザインなんかしたことがない人間でも、こういうWebデザインをする(させられる)時代になってきたので、Microsoft としては今後も力を入れていくと思います。その機能を Visual Studio Community 2013 か Express 2013 for Web であれば無償で利用できるので、WebデザインはAdobeのツールがいいとかいっていないで、どんどん使ってみたらいいと思います。

image

image

Web アプリをスマフォのホーム画面に登録してもらうためのメモ 1

2014年2月6日

Web アプリでもネイティブアプリのように iPhone や Android のホーム画面に登録できるし、オフラインで動作させることもできるということなので、実際にやってみて、まとめてみました。

まず、一番最初に準備するのがホーム画面に登録するためのアイコンで、そのサイズは以下のとおりです。

  • iPhone (iOS7) 120px × 120px
  • iPhone(iPhone 4以降でiOS6まで)114px × 114px
  • iPhone(iPhone 3 まで)57px × 57px
  • iPad (iOS7)152px × 152px 
  • iPad (iOS6までのRetina)144px × 144px
  • iPad (iOS6までの普通)72px × 72px
  • Android 48dp × 48dp

Android の場合は、Developers の Iconography をみると1x、1.5x、2x、3x、4x の機種があるので、48px, 72px, 96px, 144px, 192px のものになりますが、4x の XXXHDPi の機種は現実にはまだ殆ど存在しないはずで、3x と 2x が主流です。

これだけたくさんの解像度のアイコンを作るのは大変なので、取りあえずは152pxのアイコンを作っておけば、スマートフォン側で自動的に縮小、拡大してくれるので、それで対応することにしました。

作成したアイコンを表示させるためには、iPhone の場合は、それをPNG画像にして apple-touch-icon.png というファイル名でサイトのルートディレクトリに置いておけばいいだけです。apple-touch-icon-precomposed.png という名前で保存してもいいのですが、この場合は iPhone が自動でハイライト/シャドウを付けなくなります。iOS7からはフラットデザインになってiOS6以前のようなハイライト/シャドウはなくなったので、apple-touch-icon-precomposed.png を使う意味はあまりないと思います。

サイズを複数設置する場合は以下のようにアイコンのサイズを指定して設置すると、iPhone側で自動的に適当なサイズのものを選択してくれます。

apple-touch-icon-120x120.png

Android の場合は、ファイルを設置しただけでは認識してくれないので、以下のように link ダグで指定してやります。この指定の方法は、iOSの場合と同じです。

<link rel="apple-touch-icon" href="apple-touch-icon.png">

アイコンのサイズを指定したい場合は、以下のように sizes プロパティで指定することができます。この指定の方法も、iOSの場合と同じです。

<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png">

以上で、スマートフォンのホーム画面にアイコンを貼り付けることができるようになります。スマートフォン側でホーム画面にアイコンを貼り付ける操作をどうするかについては省略します。

Safari のスタンドアローンモード(フルスクリーンモード)について

Safari では、スタンドアローンモード(フルスクリーンモード、Webアプリモード)と呼ばれているモードがあります。このモードに設定して、ホーム画面から起動するとURLバーが無くなってネイティブアプリに近くなります。

設定は、metaタグを使って以下のようにします。

<meta name="apple-mobile-web-app-capable" content="yes" />

また、以下の設定をすると下側にある Safari のステイタスバーの色を自分のアプリの色に合わせて変更することができます。

<meta name="apple-mobile-web-app-status-bar-style" content="black">

しかし、このモードを実際に使ってみて、注意が必要だと思われる点がありました。具体的には以下のとおりです。

1. localStorage が mobile Safari とは別になってしまう。

mobile Safari で設定した内容が使えなくなるので、結構不便だと思いました。

2. 普通のリンクだと mobile Safari が起動してしまう

普通にリンクすると mobile Safari が起動して、mobile Safari の該当のページが表示されます。だから、最早スタンドアローンモードはなくなってしまって、簡単に戻ることもできなくなります。これを防ぐためには、リンクをページ内リンクにするか、JavaScript での移動にします。

下の参考に記載した stackoverflow の Q&A によると下のようなスクリプトを書いてやればいいようです。

var a=document.getElementsByTagName("a");
for(var i=0;i<a.length;i++)
{
a[i].onclick=function()
{
window.location='this.getAttribute("href");
return false
}
}

http://d.hatena.ne.jp/izit_kosuke/20110219/1298073430

http://stackoverflow.com/questions/2898740/iphone-safari-web-app-opens-links-in-new-window

3. 処理速度が遅くなる

スタンドアローンモードにすると、どうも起動時間が遅くなるように感じます。stackoverflow の Q&A にもあって、セキュリティの関係で Nitro という高速のJavaScriptエンジンが使えなくなるためのようです。

http://stackoverflow.com/questions/13413984/slow-initial-loadingscreen-ios-web-app

Android の場合にどうなるかを Nexus 5 で試してみました。Nexus 5 の場合は、localStorage は同じものを使います。普通のリンクにしておいてもモードが変わることはありません。その代わり、普通のリンクでは外部リンクであっても全画面表示のままになってしまいます。そして、ホーム画面のアイコンから立ち上げた場合、登録したページが表示されるのではなく、直近に表示されていたページがそのまま表示されます。

スタンドアローンモードを使うと見かけはアプリらしくなるのですが、採用するのがいいのかどうかは結構微妙です。localStorage が mobile Safari とは別になってしまうというのは、利用者にとっては結構戸惑うと思います。自分の場合は、アプリとしての完成度が低いので、当面はスタンドアローンモードを使わないことにしました。

次回は、Web アプリをオフラインで動作させることに挑戦したいと思っています。