2015年10月22日

無料でしかも簡単にWebサイトを公開する方法を聞かれたら

「お店のWebページを作りたいんだけど」と聞かれたので、ちょっと調べました。


Azure Web Apps とか Google App Engine とか Heroku ならサーバーサイドプログラム込みでほぼ無料で使えるし、静的なサイトだったら Amazon S3 とか GitHub Pages でも良さそうです。

でも、プログラマーでもデザイナーでもなく、今まで全くWebサイトを作った事が無い人にいきなりこれらのサービスを使えというのは厳しいものがあります。


そこで何か良い方法は無いものかと調べていたら、こんなのを見つけました。


Netlify



BitBalloon


どちらもドラッグ&ドロップでフォルダごとアップロード出来て、無料で使えます。
(独自ドメインの設定は有料ですが。)


これらのサービスが従来のレンタルサーバーなどと比べて優れていると思われるのは、コンテンツがグローバルなCDN経由で配信される点です。

そのため、大量アクセスにも強く、ページの表示速度も速いサイトを作る事が出来そうです。




あと、オンラインで販売まで行いたい場合は、日本では stores.jp か BASE が人気みたいですが、アメリカでは Shopify が圧倒的に強いみたいですね。







.

2015年10月16日

米国在住でSprintの携帯を持っている人は要チェック! 無料で使えるMVNOサービスを発見

しばらく使っていないiPhone 4SやGalaxy S3があるので、何かMVNOで安いプランは無いかな〜と探していたところ、ありました!

RingPlus Mobile


最初の3つが「Free Plan」で、そのうち「Future - Phase 9」というのだと毎月500MBのデータ通信(LTE)が可能となっています。

そう、無料です!

これはもう早速申し込んでみました。

契約するのに必要だったのは、

  1. Twitterなどのソーシャルメディアで拡散する事。
  2. 使っていないSprintの携帯(CDMA端末)。
  3. クレジットカード情報。

の3つだけでした。


1番目はこんな感じです。


拡散するソーシャルメディアは、Facebook、Google+、LinkedIn、Twitterから選べます。

アカウント認証後に、数パターンの文章から選んでツイートするフォームが表示されるので、コピペしたりする必要も無く簡単です。


2番目の端末ですが、CDMA方式に対応した端末が必要になります。既に持っているものがあれば、端末に記載されているIMEI番号というものを入力すれば使用可能かどうかチェックしてくれます。Sprintから売られている端末であればほぼ使えるのではないでしょうか。

今回は使っていない iPhone 4S があったのでこれを使うことにしました。使用可能な端末を持っていない人は、ebayなどで探すか、またはRingPlusのサイト内で新規に購入する事も出来ます。


3番目のクレジットカード情報は、最初に$5.62チャージされるのでその支払いのために必要です。この内訳は、
 $5.00 「Top Up」(要するにデポジットみたいなものだと思います。)
 $0.62 税金など
となっています。

という事は、多分無料プランとは言っても毎月$0.62はチャージされる事になりそうです。


プランに含まれているデータ通信量は500MB/月ですが、必要であれば「Add On」を購入して増やす事が出来るようです。

現在のところ、500MBで7ドル, 1GBで8ドルとなっています。



契約手続きが完了したら、あとは数分待てばiPhoneがSprintのネットワークにつながり、通話が出来る様になりました。
左上にSprintのキャリア名が表示されています。

繰り返しですが、無料プランですよ! スゴくないですか?


早速データ通信の速度を計測用のアプリで計ってみたところ、下り4Mbps, 上り1Mbpsぐらい出ています。私が今住んでいる地域でのSprintのLTE回線速度は大体こんなものなので、特に帯域制限が掛かっている様な感じも無さそうです。

パソコンへのテザリングも試してみましたが、全く問題無しです。

ほぼ無料でここまで出来てしまって、本当にこの会社大丈夫なんだろうかと心配になるぐらいです。出来るだけ潰れずにこの無料プランを続けてもらいたいものです。

日本から友人が来た時に貸すなど、手元に余ったCDMA端末がある場合には非常に便利に使えるのではないでしょうか。





.

2015年9月18日

React.jsの練習に◯☓ゲームを作ってみた。

ある日の深夜1時にふと思い立ってどうしても実際にReactで何か作りたくなり、朝5時までかかって大体の部分を作りました。

終了判定の部分がバグっていたりしたので2時間ほど眠ってからまた3時間ほどかけてデバッグ。翌日にまた約1時間かけて調整をして一応出来ました。

合計8時間もかかってますね。 汗)   
何せ初めてのReactなので。

クリックすると別ウィンドウでRunstant Liteが開きます。
https://goo.gl/Psx5fl

使ったツール


@phi_jp さん作成の「Runstant Lite」素晴らしいです。
ソースコードをエンコードしてURLに保存するというアイデアには脱帽しました。



初めてReact.jsで書いてみた感想


実は今AngularJSも勉強中ですが、それと比べるとReactの方が覚えないと行けない事が圧倒的に少ないので精神的に楽です。

まず親コンポーネントをとりあえず作って四角いDIVを表示する事が出来れば、そこに一つずつ子コンポーネントを付け足して行く感じでUIの作成はそれほど苦労せずに出来ました。

今回は

  • Board (盤面の背景を描画)
  • Cell  (個々のセルを描画)
  • StatusPanel (「X」の番です、などゲームの状態を表示)
  • ResultPanel (「X」の勝ち!、引き分け、などの結果を表示)

の4つのコンポーネントを作成しました。

最初は個々のCellにStateを持たせてクリック時の表示の更新をCellの内部で行っていました。でもそれだとBoard全体としての処理(終了判定など)との連携が面倒になる事に気付いて、Reactの世界の外側に作ったAppクラスで全ての状態を管理する様にしました。

ReactはあくまでView担当なので、Modelは自分で作らないとダメなんですよね。

そうなると今度は
1. Reactのコンポーネント内で発生するイベント(クリックされた、など)をModel側に伝える方法
2. 逆にModel側で発生するイベント(勝敗が着いた、など)をReactコンポーネント側に伝える方法
が必要になります。

前者の場合は単純にonClickなどのハンドラからAppクラスの関数を直接呼ぶ事も出来るのですが、後者のやり方が分からずにちょっと悩みました。

そこでFlux関係の解説を読み漁って、「とにかくPubSubで疎結合にしろ」という事なのかな〜と理解しました。

その結果、自分なりにEventEmitterもどき(?)を作って、Reactコンポーネントとモデルが必ずそれを経由して対話する様な形になりました。よくFluxで言われる「単方向のフロー」にはなっていない様な気もしますが、一応「PubSubで疎結合」にはなっているのではないかと思います。

こういうのはやっぱり自分で作って試行錯誤して見ないと腹の底から理解する事は出来ないですね。

単純な◯☓ゲームでしたがとりあえず作ってみて、Reactへの理解を少し深める事が出来たと思います。Android版のReact Nativeも出て来た事だし、これからもさらにReactに時間を投資して見ようかなと思います。


※追記 


きちんとFluxに則って作られたきれいな◯☓ゲームを見つけました。コードも見た目もきれいです。これは参考になります。

https://github.com/hackhat/tic-tac-toe-flux

ついでに、Reactで作られたゲームの一覧もありました。

36 Game Examples with ReactJS
http://react.rocks/tag/Game



React.jsの勉強のために読んだ本


入門 React ―コンポーネントベースのWebフロントエンド開発



参考になったサイト


reactjs - Reactデザインパターン - すべてがeになる - Qiita
http://qiita.com/shunjikonishi/items/ba6d981880e316131836

Flux – Dispatcher【日本語訳】と実装のポイント | mae's blog
http://mae.chab.in/archives/2738

一人React.js Advent Calendar 2014 - Qiita
http://qiita.com/advent-calendar/2014/reactjs

チュートリアル | React
https://facebook.github.io/react/docs/tutorial-ja-JP.html




.