Webアプリを創る

Web をするなら PHP だけでなく JavaScript を使ってみよう

2016年2月5日

JavaScript は、Webデザイナーのための簡易言語だと言われたり、まつもとゆきひろ氏には「人類のためにJavaScriptは何とかしたほうがいい(出典:エンジニアライフ)」と言われたりしたプログラム言語ですが、ECMAScript 2015 が承認されたことでモダンな言語に変身しつつあります。

2ヶ月ほど前の話ですが、PHP Advent Calendar 2015 の「PHPを使いもせずDISってる君達へ」という記事をみて、JavaScript は、PHP より遙かにモダンな言語になると思ったのでメモしておきます。

その記事では例を、Ruby で書いてありますが、JavaScript の場合はどうなるかというと、ECMAScript 5.1(ES5)では以下のように記述できます。IE8 は対応していませんが、それ以外の普通に使っているブラウザーは対応しています。

var a = [2,4,6,8,10]
    .filter(function(num){return num <= 8})
    .map(function(num){return num * num})
    .filter(function(num){return num >= 20})  
    .reduce(function(previous, current, index, array){return previous * current});  

また、ECMAScript 2015(ES6)では、アロー関数式が使えるので、Ruby と同様に以下のように簡潔に記述できます。

var a = [2,4,6,8,10]
    .filter((num) => num <= 8)    
    .map((num) => num * num)    
    .filter((num) => num >= 20)    
    .reduce((previous, current) => previous * current);      

やはり、PHP の配列処理はやはり不便です。PHP も配列などのコレクションの処理をするときには、高階関数を使って処理できるようになってほしいと思います。

JavaScript の ECMAScript 2015 への対応状況ですが、ECMAScript Compatibility Tableというサイトで調べると、Edge13 83%、Firefox45 85%、Chrome49 91%、Safari9 54% という状況で対応が進んできていますす。

ECMAScript Compatibility Table

ブラウザーではIE11が全く対応していないので、直接使うことは厳しい状況ですが、TypeScript を使えば、ソースコードとして使えるし、Node.jsだと、近いうちに直接書くことができるようになると思います。

JavaScript は Node.js を使えばサーバー側でも動くし、PHP では動かないブラウザー上でも動作します。これからは、Webをしたいのであれば、PHP だけでなく JavaScript を使った方がいいと思っています。

参考までに、C#の場合は、LINQを使って以下のように書けます。C#は、以前は Ruby の方が効率的にプログラムが書けると思っていましたが、C# 3.0 で LINQが使えるようになり、C# 5.0では async/await で非同期処理ができるようになって Ruby に追いついたと思います。配列処理のことについては、C# やるなら LINQ を使おうに詳しい解説があるので、ここでは説明を省略します。

var a = new int[] { 2, 4, 6, 8, 10 }
    .Where((num) => num <= 8)    
    .Select((num) => num * num)    
    .Where((num) => num >= 20)    
    .Aggregate((previous, current) => previous * current);  

WordPress ばかり使っていないで Wix, Weebly, Tumblr も使ってみよう

2015年10月27日

日本のWebサイト制作では、WordPressが一人勝ちになっています。WordPressは優秀なソフトですが、猫も杓子もWordPressというのは行き過ぎではないかと思います。

ささっとWebサイトを作りたい場合には、Webサービスの方を使ってみた方がいいと思います。代表的なウェブサイトビルダーといえば、以下のようなものがあります。

Wix

デザイン性の高いテンプレートが揃っています。 Google検索で site:wix.com とするとかなりの数の Wix で作成したサイトが見つかります。例としては、久米島ホタルの会のWebサイトがあります。素人でも少し美的センスがあれば、結構見た目のいいWebサイトを作ることができます。PowerPoint を使える人であれば、間違いなくそれなりのサイトは作れると思います。

Weebly

Wix と比べると地味な感じのテンプレートが多くなっています。Wixと違ってHTMLとCSSでフルカスタマイズすることが可能なので、テンプレートに Bootstrapを使うことも可能です。地味な会社サイトを作りたい場合にはWixより適していると思います。Weeblyで作成したWebサイトの例としては、あま り有名なものはありませんが、site:weebly.com で Google検索をすると結構な数のWebサイトが表示されます。例えば、柏まちづくり文化賞というサイトがあります。これぐらいのWebサイトであれば素人でも少し HTML, CSS を勉強すれば作れるのではないかと思います。

Tumblr

映像や画像を多用するサイトとの相性がいいサービスで、今回の漫画「Tumblrでポートフォリオを作ろう(基本編)(1)」で紹介しています。漫画の中で紹介しているGAPのページはTumblrの特徴を上手に使っています。GAPのことをいえば、Pintrestの方にもGAPのページがありこちらの方でもPintrestの機能をうまく使っています。Webデザイナーであれば、WordPressを勉強するのではなくGAPのようなサイトを作るのも一つの方向だと思います。

WordPressは本当に安いの

Wixの有料プランの料金は、下の図のようになっていて、「無制限」の値引き前の価格で年15600円です。

Wix Price

それでも、WordPressユーザーには高いという人がかなりいます。そしてWordPressは無料で安いと言います。でも、WordPress を使えるようになるまでにいくら時間がかかるかの計算をしていないからそういうことがいえるのです。

石垣島ITブートキャンプが1ヶ月間でWordPressの作り方を習得するようです。それでも素人が1人で WordPress で WEB製作をできるようになるのはなかなか難しいようです。その期間の人件費と授業料を考えれば50万円~100万円ぐらいのコストにはなると思います。

また、Web制作を委託にだしてWordPressで作成してもらった場合も同じぐらいの費用が必要になります。それに、WordPressの場合、自社で運用するのが難しくて、年10万以上の運営管理費を制作会社に払っているところは多いと思います。

学習コストを考えると、年1万や2万というのは安いものです。

Weeblyは、本当に日本語フォントがない?

Google で Weebly と検索すると日本語でトップに出てくるサイトでは、以下のように書いてあります。

簡単なレストランのサイトを作ろうとしました。
作ろうとしましたが、断念しました。決定的な理由は簡単に言うと以下です。

  • 日本語フォントがない
  • モバイル版がいまいち

そのほかは、なかなか素敵です。

これでは、Weebly があまりにも可哀想です。

Weeblyでは、コントロールパネルの「フォントの変更」には確かに日本語フォントはありませんが、CSSを直接編集することにより、日本語フォントもちゃんと使えます。

「デザイン」のパネルを表示すると、「フォントの変更」の下には「HTML/CSSの編集」というボタンが一番下にあって、HTML/CSSを編集できることはすぐわかります。

Wix Price

それをクリックすると、下の図のようにHTMLやCSSの編集画面が表示されます。自分の使ってみたテーマでは、main_style.css がメインのスタイルシートになっていて、そこで、font-familyに日本語フォントを追加していってやるだけです。

Wix Price

それから、モバイル版もいまいちということはありません。レスポンシブルのテーマを使えば、モバイル版はきちんと表示されます。試しにWeeblyでページを作ってみましたが、それほど問題なく表示されています。

ブログの筆者は、わざわざレスポンシブルでないテーマを使っていますが、その場合は、PC版とモバイル版のヘッダー画像が別のものになるというのが仕様のようです。その場合でも、同じヘッダー画像にしようと思えば、PC版もモバイル版もヘッダーなしを選択して、自分でヘッダーを作れば大丈夫です。

ブログの筆者が言うようにWeeblyは「なかなか素敵」です。

 

ASP.NET 5 Beta 7 を Ubuntu Server で使ってみた

2015年9月12日

ASP.NET 5 Beta 7 が公開されましたが、公式ブログで Mono なしで動作するということだったので Ubuntu Server に実際にインストールしてみました。

Ubuntu Server につては、Microsoft Azure でイメージは Ubuntu Server 14.04 LTS を使用しています。

インストールについては、ASP.NET 5 の公式マニュアルの Installing ASP.NET 5 On Linux のページを見てしました。最初は、注意を読んでなくて dnvm をインストールすると、下の図のように「dnvm needs unzip to proceed.」というメッセージが出ました。マニュアルをちゃんと見ると note に dnvm のインストールには unzip が必要と言うことが書いてありました。

ubuntu01.png

DNX とlibuv については、マニュアルどおりにインストールしました。

実際の動作のテストは、VS 2015 で作成した ASP.NET 5 プレビューテンプレートの Web Application を使ったものを使用しました。修正点は、Kestrel サーバーが動作するように project.json に以下の項目を追加しました。

"dependencies" に追加
"Microsoft.AspNet.Server.Kestrel": "1.0.0-beta7"

"commands" に追加
"kestrel": "Microsoft.AspNet.Hosting --server Microsoft.AspNet.Server.Kestrel --server.urls http://localhost:8000"

それで、「dnu restore」で依存パッケージを取得して、「dnx kestrel」で kestrel を起動するととアプリが動作しました。意外にあっけなく動作させることができました。

ubuntu02.png

Qiitaの「ASP.NET5 クロスプラットフォームでアプリケーションの動作環境を構築する」という記事では、「Ubuntuは、手順にある通りではうまくいきません。」と書かれていますが、それから比べると ASP.NET 5 の Linux 対応もかなり進んだと思います。

kestrel のポート番号を80に設定して起動するとチェックでエラーになります。本番環境での運用は、Nginx をリバースプロキシサーバーして使うようになるケースが多いような気もします。

コンソールアプリケーションの方もテストしてみました。ローカルディスクへの保存の処理を書いてみたのですが、このあたりは、DNX 4.5.1 と DNX Core 5.0 でライブラリーに変更があるのでコードの修正が必要になってきます。こういうケースでは、"frameworks"の設定は、VS だとどちらかでエラーがあるとコンパイルしないしエラーの表示もよく分からないものが表示されるので、使わない方の"framework"を削除しておいた方がいいようです。この関係を調べていて、.Net Core のドキュメントのページができているのに気がつきました。ただし、まだほとんどのページが作成中で使える状態にはなっていません。

以上テストをしてきて、ASP.NET 5 が Linux で実用的に使えるようになる日がかなり近づいていると感じました。

 

5374 徳島市版を作ってわかった地域アプリの厳しさ

2015年9月1日

今日から9月です。約3ヶ月このWebサイトを更新するのに時間がかかっていたのでブログの更新ができていませんでした。最初に 5374 徳島市版のアクセス状況を書いてみます。

8月分のページビュー数は、73PVでした。うち5374 の本来の使い方である Direct が約半数の36PVで1日で1PVという感じで、アクセスは本当に少ない状況です。

自分でも5374徳島市版は使っていません。「ごみの日」を知る必要があるのは後片付けの時なので、手がぬれている場合が多いのでスマートフォンは使う気がしません。台所にごみカレンダーを貼っておいた方が便利だと思います。

金沢の成功事例である5374の本家版の利用者は、月間で4000人だそうです(出典:TheWave の 「強い想いが仲間と流れをよびよせた/Code for Kanazawa(前編)【鈴木まなみ】」)。

ecitizen.jp 全体だと8月のユーザー数は31000人なので、5374の本家版よりも8倍も多くなっています。

それで、ecitizen.jp の方が 5374の本家版より優れているというつもりはありません、5374の本家版は金沢市が対象なので46万人が対象になりますが、ecitizen.jp だと全国の市町村の人口のグラフを作っているので日本全国が対象になるので、対象人口が大きく違います。

Code for Kanazawa のように地域で活動するのも一つの方法ですが、それでうまくいかない場合に、あきらめずにもう少しグローバルに考えるという方法もあると言いたかったのです。

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

2015年6月22日

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

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

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

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

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