2011/11/04

#gdd11jp Google Developer Day


11月1日、パシフィコ横浜で Google Developer Day 2011 が開催されました。


毎年参加させていただいており、今年もなんとか参加してきました。


サプライズ


結果的にはとても楽しかった GDD。セッションに迷うのは毎度のことですが、今年は色々「しかけ」が用意されており、楽しめるイベントになっていました。

ただ、恒例?のサプライズ発表は特になかったので、ちょっと残念。


全体を通して、やっぱり HTML5(Chrome) と Android(Ice Cream Sandwich) に力入ってましたね。


今回参加したセッションは次の通り。


  • Android の最新情報
  • Google+ Hangout アプリを作ろう
  • 今までにないサイトを作る:HTML5 による最新ウェブアプリ
  • Google Apps : 新しい API、新機能、ベストプラクティス
  • Google のエンジニアの日常
  • イグナイト ( ライトニングトーク )

改めて見ると、新サービス関連に偏ってます。

セッションの内容も、サービスの説明から入る分、あまりコアな情報はありませんでした。

既存サービスのセッションのほうが割りと濃い内容だったみたいです。


Android の最新情報


気になる Android 4.0 。Android 4.0 からは、テレビ、タブレット、スマートフォンなど、すべてのデバイスをカバーする。

なので、デザインはより慎重に行う必要がある。画面サイズの管理も。

ソーシャルもより重要に。Google + が前面に出ています。インテントを利用した設計がおすすめ。

思った以上に、NFC の Android Beam は面白いですね。今開いているWebページが、相手の端末にも表示されるデモは素晴らしかったです。

それと、Wifi Direct ってのも気になります。端末同士がダイレクトにネットワークでつながるということで、面白い使い方ができそうですね。


Google+ Hangout アプリを作ろう


違うセッションを予定していたけど、基調講演で Hangout が気になったので続きを聞いてみた。


基本的に、iFrame のガジェットで構築。ビデオカンファレンスのようなものを手軽に構築できそう。

デモは、チャットルームのような Hangout で、招待された人とビデオチャットしながら、参加者のロボットアバターがアプリ内で動く。というもの。

データはひとつの Shared データなので、参加者全員にリアルタイムで更新される。

面白そうだけど、どんな使い道があるか?今後に期待です。


今までにないサイトを作る:HTML5 による最新ウェブアプリ


HTML5 のフルスペックである Chrome ならこんなことまでできる!という内容でした。

これからのWebアプリは、ビジュアルも重要だと。

HistoryAPI でシングルページだけど、URLが変わってブラウザの戻るも使える。GitHub みたいなページ遷移。たしかにコレ重要ですね。

FilesystemAPI では、ネイティブとの連携でファイルのドラッグドロップなど、ネイティブファイルを操作できる。

古いブラウザには、PolyfillsChrome Frame を使うのがいいみたい。


ライブラリは、lawnchair , Boilerplate , Modernizr を使うといい。


これらが ブラウザ標準で利用できるのが素晴らしいですね。(まだまだ対応していないブラウザも多いですが)


Google Apps : 新しい API、新機能、ベストプラクティス


DevQuiz での Apps Script が面白かったのでもう少し詳細を期待していましたが、やっぱり、そもそも Apps Script は知名度が低く、触り程度の紹介でした。

しかし、UI Builder や PickerAPI などビジュアル的にも Google UI と統一されたものが揃ってきて、かなり使えるという印象でした。

マーケットプレイスでの公開も拡充してきており、Apps Script は今後本気で勉強したほうがよさそうです。

Google Data API については、これまでの複雑なものをシンプルにすべく [HTTPS] [OAuth2] [JSON] で統一とのこと。これは嬉しいですね。

API の確認には、Google APIs Explorer が便利。


Google のエンジニアの日常


あの有名な yugui さんが登場とのことで、観てきました。

オープンソースな人から見た Google というのは面白かった。

オープンソースの世界では当たり前の光景が、Google という巨大な組織でも適用されているのがすごいと。

エンジニア主導、ドキュメント、コードレビュー、ひとつのリポジトリなどは、初めての GDD に聞いた時と変わっていないようで、その徹底ぶりが Google の強みだと改めて感じました。


イグナイト ( ライトニングトーク )



最後のセッションは、おなじみ?Google スタッフによるダンス!合計30時間も練習したんだとか。みなさん、お上手でした。

Chrome の WebAudio と Node.js のデモはすごかったですね。基調講演でも WebAudio が紹介されていて、Javascript と HTML5 で音まで操作できるみたい。昔の MIDI を奏でるサイトをパワーアップできそうです。



初めにもらった、3Dメガネ。結局自分は使わなかったけど、どうやら Youtube が 3D に対応した動画があるようで、帰宅後我が家は大興奮でした。

緑と赤のあのメガネをお持ちの方は、是非御覧ください。




まとめ


世の中、Javascript と HTML5 の世界になるようです。この2つの技術は必修科目ですね。

そして、進化した Android と AppEngine でバックエンドとモバイル。

ソーシャル対応に Google+ 。ビジネス Apps では、Apps Script 。

なんだかんだで、覚えることはイッパイです。

 

最後に、スタッフやボランティアの皆様方、お疲れ様でした!

2011/09/16

Google Apps Script ってすごいね

先日まで、Google Developer Day 2011 の DevQuiz がありました。

その中で Apps Script に関する問題が出題されていました。

個人的に気になっていたもので、ちょっとやってみることにしたのですが、ユーザガイドをみて驚きました。機能がすごく充実しています。

「オラ、わくわくすっぞ!」って感じです。


Google Apps Script ってなに?


Google Apps Script は、JavaScript を使用して Docs, Spreadsheets, Sites などから各種 Google サービスを制御することできます。
Microsoft Office における VBA のようなものです。

Apps Script では、作成した JavaScript のプログラムがサーバ上で実行される、という点が特徴ですね。


まだまだ日本語の情報が少ない Google Apps Script ですが、 Googleを追いかけろ! が参考になります。


Google Apps Script って何が出来るの?


何が出来るのかは、これから見ていきましょうw。

Excel を Apps Spreadsheets に移行する際の障壁は、VBA マクロだと思っていましたが、それが取り除かれた。と思ってもいいくらいなことができそうな予感です。


Google Apps Script を使ってみる


何はともあれ、どんなものかやってみましょう。


お題


よくある Excel マクロのように、CSV ファイルを読み込んで、Spreadsheets に出力してみます。


  1. スクリプトエディタ

    新規に作成した Spreadsheet から、ツールメニューの「スクリプトエディタ」でスクリプトエディタを起動します。

  2. コードを記述

    コード欄に下記を打ち込みます。

    function onOpen() {
      var app = UiApp.createApplication().setTitle("Upload CSV to Sheet");
      var form = app.createFormPanel().setId('frm').setEncoding('multipart/form-data');
      var formContent = app.createVerticalPanel();
      form.add(formContent);
      var file = app.createFileUpload().setName('thefile');
      var button = app.createSubmitButton('Submit');
    
      formContent.add(file);
      formContent.add(button);
    
      app.add(form);
    
      var doc = SpreadsheetApp.getActive();
      doc.show(app);
    }
    
    function doPost(e) {
      var app = UiApp.getActiveApplication();
      var fileBlob = e.parameter.thefile;
    
      var data = fileBlob.getDataAsString();
      if (!data) {
    	return app.close();
      }
      var csvData = data.split('\n');
    
      var sheet = SpreadsheetApp.getActiveSheet();
      sheet.getRange(sheet.getLastRow()+1, 1).setValue(fileBlob.getName());
    
      var startRow = sheet.getLastRow()+1;
      var startColumn = 1;
      for (var i=0,l=csvData.length;i<l;i++) {
    	var csvRow = csvData[i].split(',');
    	for (var j=0,l2=csvRow.length;j<l2;j++) {
    	  sheet.getRange(startRow+i, startColumn+j).setValue(csvRow[j]);
    	}
      }
    
      return app.close();
    }
    		
  3. Script の実行

    フロッピーアイコンでスクリプトを保存し、「関数を選択」より「onOpen」を選択します。

    再生ボタンでスクリプトを実行します。

  4. CSV をアップロード

    表示されたフォームより、適当な CSV ファイルを選択して、Submit です。

  5. CSV がシートに出力される

    CSV の内容がシートに書きだされました!


プログラムの説明を少しすると、[onOpen]という関数が、シートを開いたときに自動実行される関数です。VBA にもありますね。

ここで、アップロードフォームを作成し、表示させています。

もう一つの[doPost]という関数。これはフォームポスト時に呼び出されるもので、データの取得とシートへの書き出しを行っています。

doPost がポスト時に呼ばれるということに気付くまで結構はまりました…。


参考までに、アップロード時に使用した CSV と、Spreadsheet は下記から。参考にしてください。
*スクリプトの実行はできません


Google Apps Script をやってみて


リファレンスとにらめっこが必要ですが、汎用的な JavaScript で記述できるので非常にわかりやすいですね。

これから少しずつ、どんなことができるのか確認しながら、紹介してきたいと思います。

2011/09/12

Google AppEngine の新料金体系

とっても久しぶりのブログ更新です。皆さんお元気ですか?僕は元気です。


最近、AppEngine の料金体系変更によって、大幅に料金が増えるという話題をよく目にします。

気になって自分も確認してみました。
そして、多分にもれず驚いたのでメモしておきます。


AppEngine 新料金体系


AppEngine の新料金体系は、従来(現行)の CPU Time での課金から、Instance Hours での課金に変更されます。


料金の詳細は、 Google cloud services – App Engine に記載されています。


また、気になる、新料金体系ではどのように見積もられるのか?は、Admin Console の Billing History から確認することができます。



via Managing Your App's Resource Usage - Google App Engine - Google Code

今なら半額キャンペーン中!


上記のレポートの一例では、 Frontend Instance Housrs は、 $12.41 となっています。

為替レートが 1米ドル /円 = 77.089115 (ほんと円高ですね)ということなので、約956円/日。一ヶ月で 28,700円です。


でもよくみると、「Frontend Instance Hour costs reflect a 50% price reduction active until November 20th, 2011.」となっています。

11月20日までは半額キャンペーン中みたいです。

確かに Frontend Instance Hours: $0.04/Hour となっています。正規の料金は $0.08/Hour ですよね!


キャンペーンが終了したらどうなるのでしょうか?

単純に倍なので、約1,912円/日。一ヶ月で 57,400円です。


これ、みんな気づいているんでしょうか?僕は最初気がつかなかったです。

ダブルでビックリしますね。


新料金体系対策


今まで無料枠で気軽にアップしていたアプリが、突然金食い虫になったらたまりません。


App Engine アプリケーションのリソースを管理する方法 - Kay's daddy のリソースの管理方法が参考になります。


要は、ちゃんとリソース意識してアプリ作ってね、ということですが、

一番手軽な方法は、Admin Settings にある、 Max Idle Instances を 1 にする ということでしょうか。


近頃は、フリーミアムモデルからフリーの部分がなくなる、もしくは縮小される傾向が強いように思います。

手軽な環境がなくなっていくのは残念ですね。

2011/02/23

Rails 3, MySQL, jQuery, Shoulda, FactoryGirl

Rails 3 で、MySQL, jQuery, Shoulda, FactoryGirl を使うときのプロジェクトメモ。

MySQL でプロジェクトを作成

デフォルトでは Sqlite3 を使用するので、オプションで MySQL を使用するように指定。

$ rails new appname -d mysql

jQuery, Shoulda, FactoryGirl の設定

jQuery, Shoulda, FactoryGirl を使用するために、各ファイルを編集する。

environment.rb
require 'openssl'
OpenSSL::SSL::VERIFY_PEER = OpenSSL::SSL::VERIFY_NONE
Gemfile
gem 'jquery-rails'
gem 'rails3-generators', :group => :development
group :test do
  gem 'shoulda'
  gem 'factory_girl_rails'
end
application.rb
config.generators do |g| 
  g.test_framework :shoulda, :fixture => true
  g.fallbacks[:shoulda] = :test_unit
  g.fixture_replacement :factory_girl, :dir => "test/factories"
end

インストール

$ bundle install

Shoulda / FactoryGirl が適用されているか確認。

$ rails g scaffold --help
...

Shoulda options:
  [--dir=DIR]                   # The directory where the model tests should go
                                # Default: test/unit
  [--fixture-replacement=NAME]  # Fixture replacement to be invoked
                                # Default: factory_girl

jQuery をインストール

generator で jQuery に置き換えます。

$ rails g jquery:install

2011/02/14

Rails 3 で OpenSSL::SSL::SSLError

Rails 3 でプロジェクト作成後、まずは jquery を使うようにしようと思い

$ rails g jquery:install

すると、早速エラー発生。

    fetching  jQuery UJS adapter (github HEAD)
c:/ruby/lib/ruby/1.8/net/http.rb:586:in `connect': SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (OpenSSL::SSL::SSLError)

ソースを github から取得する際に、SSL 接続でエラーということか。

Rails3 で jQuery を使う を参考に、environment.rb に下記を追記。

require 'openssl'
OpenSSL::SSL::VERIFY_PEER = OpenSSL::SSL::VERIFY_NONE

無理やり SSL 非接続にしてなんとか回避。とりあえずは、よしとします。

2011/02/09

Google Maps API v3 でカスタムマップを作成

暫く前に、「googlemapでドラクエ」ということで、ドラゴンクエストの世界地図を Google Maps で表示するサイトが話題になりました。
当時、コレを見て感動したのを覚えています。

今では Google Maps API も v3 となり、v2 は正式に廃止され、アップデートすることが推奨されています。

ということなので、カスタムマップの作成を v3 でやってみます。

大きい画像の用意

まずは、拡大時に耐えるような大きな画像を用意します。

1900年に作成された日本の世界地図 から拝借しました。

タイル(tile)を作成

Google Maps は、それぞれのズームレベルに合わせて 縦横 256px の画像(タイル)を地球全面に覆う仕組みになっています。
例えば、ズームレベル 1 では、256x256 px の画像を縦横 2枚、計 4枚のタイルにより構成されます。
ズームレベル 2 では、縦横それぞれ 2 倍の、計 16枚のタイルで構成されます。

GMIC - The GMap Image Cutter

というわけで、多数のタイルが必要になるのですが、自力でカットしていくのははっきり言って無理があります。

そこで GMIC というとても便利なツールの登場です。

このツールを使えば、用意した画像を Google Maps に合わせたタイルにカットしてくれます。しかも、解像度から最大ズームレベルまで判断してくれます。

使用方法も簡単で、ダウンロードした zip を解凍し、GMapImageCutter.batを実行(Windows の場合。その他は .sh)して起動させます。

起動したら、File を Open して、 Create するだけ!簡単です。動作も高速であっという間に作業が完了します。

出力ファイルには、タイル画像だけではなく、作成したタイルを表示するためのサンプル HTML も出力されます。
大きな画像を Google Maps 的に見たい!というなら、これだけで OK ですね。

V3

GMIC より出力された HTML は、残念ながら今現在は v2 の Google Maps API を使用しています。

そこでやっと本題の、カスタムマップを v3 で書き換えてみます。

ポイントは、ImageMapType というクラスを使うことで、一から MapType インターフェースを実装する手間を省いています。

サンプルは下記リンクから!

Google Maps API v3 カスタムマップサンプル

 

参考:

2011/02/02

さくら VPS で Wordpress のチューニング

さくら VPS はメモリが 512M とちょっと少なめです。Swap が有るためメモリオーバーで即ダウンするとこはありませんが、すぐに Swap メモリに手を出し極端なパフォーマンス低下を招いたりします。

Wordpress でサイト構築した際は、チューニングを事前に実施しておくことで、Swap を食いつぶして Apache がアクセス不能になって焦る、ということがないようにしたいものですね。

APC - PHP アクセラレータ

Wordpress は PHP, MySQL を使用しています。
まずは PHP のチューニングということで、定評のある APC をインストールします。

APC(Alternative PHP Cache) は、PHPの中間コードのキャッシュや最適化を行う拡張モジュールです。

インストールは、 yum で。Remiリポジトリからインストールするので、予め有効にしておきます。

$ sudo yum search php-pecl-apc
php-pecl-apc.x86_64 : APC caches and optimizes PHP intermediate code

$ sudo yum install php-pecl-apc

設定(/etc/php.d/apc.ini)はデフォルトを使用し、インストール後は httpd を再起動します。

$ sudo /etc/rc.d/init.d/httpd restart

APC の動作確認用ファイルをコピーして、ブラウザから動作チェックできるようにします。
なお、管理者情報はデフォルトから変更しておきます。

$ cp /usr/share/doc/php-pecl-apc-3.0.19/apc.php /var/www/html/www.domain.com/
$ sudo vi /var/www/html/www.domain.com/apc.php
defaults('ADMIN_USERNAME','apc');
defaults('ADMIN_PASSWORD','password');

MySQL のチューニング

次は、MySQL の設定を変更し、キャッシュとバッファの設定をします。

$ sudo vi /etc/my.cnf
[mysqld]
query_cache_limit=1M
query_cache_min_res_unit=4k
query_cache_size=24M
query_cache_type=1
key_buffer = 16M
sort_buffer_size = 1M
read_buffer_size = 256K

$ sudo /etc/rc.d/init.d/mysqld restart

Apache のチューニング

次は、Apache の設定の見直し。

$ sudo vi /etc/httpd/conf/httpd.conf

Timeout 45                  #接続を切るまでの時間
KeepAlive On                #接続の継続を許可
KeepAliveTimeout 3          #継続時間

StartServers       5        #起動時のプロセス数
MinSpareServers    5        #待機プロセス数の最小個数
MaxSpareServers   10        #待機プロセス数の最大個数
ServerLimit       64        #プロセス数の上限
MaxClients        64        #稼動プロセスの最大個数
MaxRequestsPerChild  4000   #一つのプロセスが実行するリクエスト数


$ sudo /etc/rc.d/init.d/httpd restart

ついでに、PHP の設定で、 zlib を有効にし、転送速度を向上させておきます。

$ sudo vi /etc/php.ini

zlib.output_compression = On

WP Super Cache - Wordpress プラグイン

最後に、Wordpress 自身のチューニングで、WP Super Cache というプラグインをインストールします。

プラグインのインストールは、Wordpress のダッシュボードからインストール出来ます。

インストール後は、設定ページから Caching On にすると有効になります。

まとめ

  • APC で PHP のチューニング
  • キャッシュとバッファの設定で、MySQL をチューニング
  • メモリに合わせて、Apache をチューニング
  • WP Super Cache で、Wordpress をチューニング

これで、かなり高速・軽量になったかと思います。
あとは、状況に合わせて細かな設定変更をしていくといいと思います。

 

参考
AKIBE - さくらのVPS CentOSでサーバ構築 13 – パフォーマンス

2011/01/24

[WordPress]ウィジェットのメタ情報デフォルト値を編集する方法

ウィジェットのメタ情報

WordPress のウィジェットで「メタ情報」というのがありますが、これをどうにか編集できないか?というわけで、その方法の Tips です。

デフォルトのメタ情報

  • サイト管理
  • ログイン/ログアウト
  • 投稿の RSS
  • コメントの RSS
  • WordPress.org

default-widgets.php

デフォルトのメタ情報の内、コメントの RSS と、WordPress.org へのリンクは不要だったのでコレを削除。

wp-includes の default-widgets.php がウィジェットのデフォルト値を管理しているので、こちらを修正すれば OK です。

wp-includes/default-widgets.php 300行目あたり
      <ul>
      <?php wp_register(); ?>
      <li><?php wp_loginout(); ?></li>
      <li><a href="<?php bloginfo('rss2_url'); ?>" title="<?php echo esc_attr(__('Syndicate this site using RSS 2.0')); ?>"><?php _e('Entries <abbr title="Really Simple Syndication">RSS</abbr>'); ?></a></li>
      <li><a href="<?php bloginfo('comments_rss2_url'); ?>" title="<?php echo esc_attr(__('The latest comments to all posts in RSS')); ?>"><?php _e('Comments <abbr title="Really Simple Syndication">RSS</abbr>'); ?></a></li>
      <li><a href="http://wordpress.org/" title="<?php echo esc_attr(__('Powered by WordPress, state-of-the-art semantic personal publishing platform.')); ?>">WordPress.org</a></li>
      <?php wp_meta(); ?>
      </ul>

ちなみに、デフォルト値を変更せずに、各サイトごとに修正するにはどうするんだろうか…?知ってる方がいましたら教えてください!

WordPress レッスンブック 3.x対応
エビスコム
ソシム
売り上げランキング: 874