タグ別アーカイブ: hottopic

モバイルアプリ開発 – クラウドで動くWebアプリ

iPhone iPad や Android で使える、モバイル・アプリ を開発してみましょう。iPhone や Android 固有のネイティブ機能を使わなければ、HTML や JavaScript などの Web技術だけでモバイル・アプリを作ることができます。AppStoreなどに登録しなくても良いのも利点ですが、Webサーバーが必要になるので、クラウドの Bluemix環境で作ってみます。

=> まだの方はこちらで Bluemix + Node.js の環境を構築してください

開発するのは、以下のアプリです。外国の方が日本に来た時に、日本のお店でこれを見せてコミュニケーションをすることを想定した、サンプル・アプリ です。

howsay_top

howsay_shop

このようにモバイル・アプリでは、通常のWeb画面に比べ、大きなボタンや、大きな展開画面になりますよね。iPhone、iPad、Androidデバイスは通常指でタップするため、マウスで操作するWeb画面とは異なるユーザー・インターフェースが必要です。

この時便利なのが、jQuery Mobileです。JavaScriptライブラリでポピュラーな jQueryの Mobile版です。上の画面のボタン等は、jQuery Mobileを使って表示しています。
ちなみにこの画面からjQuery Mobileを外すと以下のようにちょっと寂しい画面になってしまいます。比較してみると一目瞭然ですよね。

howsay_nojquery

jQuery Mobileは、以下のダウンロード・サイトのリンクから、その下の2つのファイルをダウンロードしてください。「min」 が付いているファイルは、インターネットで利用されることを想定し、サイズが圧縮され小さくなっているファイルになります。

=> jQuery Mobileのダウンロードはこちらから

Minified and Gzipped: jquery.mobile-1.4.5.min.js

Minified and Gzipped with Default theme: jquery.mobile-1.4.5.min.css

一番上のリンクにあった、「Bluemix + Node.jsの環境」 で、app.js などのNode.jsのファイルなどは、そのままにしておいてください。今回のサンプルではNode.jsは使いませんが、次のサンプルで使います。

Bluemixの、GITリポジトリにあるフォルダの中の、「public」 の下にHTMLファイルを置くことでこのモバイル・アプリをアクセスできるようにします。

「public」 フォルダ直下に、以下の index.htmlファイルを作ってください。

<!DOCTYPE html>
<html>
<head>
<title>How say in Japan Top</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css"/>
<link rel="stylesheet" href="css/index.css"/>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 <div data-role="page" id="p-button-jqm">
 <div data-role="header">
 <h2>How say in Japan Top</h2>
 </div>
 <div data-role="content">
 <h4>Where are you now ?</h4>
 <a rel="external" href="shop/index.html" data-role="button">Shop</a>
 <br />
 <a rel="external" href="station/index.html" data-role="button">Station</a>
 <br />
 <a rel="external" href="airport/index.html" data-role="button">Airport</a>
 </div>
 </div>
</body>
</html>

この中で指定している、先ほどダウンロードした、「jquery.mobile-1.4.5.min.js」 を、publicの下に 「js」 ディレクトリを作成してその中にコピーし、「jquery.mobile-1.4.5.min.css」 を、publicの下に 「css」 ディレクトリを作成してその中にコピーしてください。(EclipseならファイルのDrag&Dropで可能)

また、index.cssファイルを、その作成した 「css」 の中に作ってください。cssファイルは、「Cascading Style Sheets」 の略で、Webページの色やフォントの大きさといったデザインを指定するファイルです。「background」で背景色、「color」で文字の色、「font-size」で文字の大きさを指定します。また、「.ui-header」で一番上の横長ヘッダーのスタイルを指定でき、「linear-gradient」 は徐々に色が濃くなる度合いを指定できます。

/* index.css for How say in Japan */

.ui-page, .ui-mobile-viewport {
 background: #222230;
}

.ui-content {
 font-size: 120%;
 color: #88aacc; /* body text */
}

/* Header gradient */
.ui-header {
 background: #8888a0; /* Old browsers */
 background: -webkit-linear-gradient(top, #8888a0 0%, #303040 100%); /* Chrome10+,Safari5.1+ */
 background: -ms-linear-gradient(top, #b0bccd 0%,#8888a0 0%, #303040 100); /* IE10+ */
 background: linear-gradient(top, #b0bccd 0%, #8888a0 0%, #303040 100); /* W3C */
}


/* Button gradient */
.ui-btn {
 font-size: 120%;
 background: #8888a0; /* Old browsers */
 background: -webkit-linear-gradient(top, #c0c0e0 0%, #585868 100%); /* Chrome10+,Safari5.1+ */
 background: -ms-linear-gradient(top, #b0bccd 0%,#c0c0e0 0%, #585868 100); /* IE10+ */
 background: linear-gradient(top, #b0bccd 0%, #c0c0e0 0%, #585868 100); /* W3C */
 cursor: default;
}

その結果、以下のようなディレクトリ構成になります。

howsay_devops

また、Eclipseで開発し、Bluemix DevOpsにプッシュするのであれば、以下のようなイメージになります。

howsay_eclipse

そして、Bluemixの サーバーのダッシュボードから、「経路:」 のリンクをクリックすることで、最初のボタンが並んでいる画面が表示されます!

実際に上記サンプルが Bluemix でアクセスできるリンクは、以下になります。

=> How say in Japan

また、ボタンを押したら遷移する 「Shop」 の画面には、「public」フォルダの下に、「shop」フォルダを作成し、その中に 「index.html」 ファイルを作成しその内容を以下としてください。

<!DOCTYPE html>
<html>
<head>
<title>How say in Japanese Shop</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>
<link rel="stylesheet" href="../css/index.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script src="js/index.js"></script>
<link rel="shortcut icon" href="../img/touchstone.jp.icon2.gif">
</head>
<body>
 <div data-role="page" id="p-collapsible">
 <div data-role="header">
 <a href=".." data-rel="back">戻る</a>
 <h2>How say in Japan Shop</h2>
 </div>
 <div data-role="content">
 <div data-role="collapsible" data-content-theme="b">
 <h3>How much is it ?</h3>
 <p>これはいくらですか?</p>

 <div data-role="fieldcontain">
 <fieldset data-role="controlgroup" data-type="horizontal">
 <select name="select-choice-100man" id="select-choice-100man">
 <option value=" "> </option>
 <option value="1">1 ,</option>
 <option value="2">2 ,</option>
 <option value="3">3 ,</option>
 <option value="4">4 ,</option>
 <option value="5">5 ,</option>
 <option value="6">6 ,</option>
 <option value="7">7 ,</option>
 <option value="8">8 ,</option>
 <option value="9">9 ,</option>
 </select>
 
 <select name="select-choice-100" id="select-choice-100">
 <option value="0">0</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
 <option value="6">6</option>
 <option value="7">7</option>
 <option value="8">8</option>
 <option value="9">9</option>
 </select>
 <select name="select-choice-10" id="select-choice-10">
 <option value="0">0</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
 <option value="6">6</option>
 <option value="7">7</option>
 <option value="8">8</option>
 <option value="9">9</option>
 </select>
 <select name="select-choice-1" id="select-choice-1">
 <option value="0">0</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
 <option value="6">6</option>
 <option value="7">7</option>
 <option value="8">8</option>
 <option value="9">9</option>
 </select>
 <label for="select-choice-man"> 円 (yen)</label>
 </fieldset>
 </div>

 </div>
 <div data-role="collapsible" data-content-theme="b">
 <h3>Does this size fit for me?</h3>
 <p>このサイズは私に合っていますか?</p>
 </div>

 <div data-role="collapsible" data-content-theme="b">
 <h3>What is my size in Japan?</h3>
 <p>日本での私のサイズは何ですか?</p>
 <div data-role="fieldcontain">
 <label for="select-choice-1">Size: </label>
 <select name="select-choice-1" id="select-choice-1">
 <option value="10">XS</option>
 <option value="20">S</option>
 <option value="30">M</option>
 <option value="40">L</option>
 <option value="50">LL</option>
 <option value="30">XL</option>
 <option value="30">XXL</option>
 </select>
 </div>
 </div>

 <div data-role="collapsible" data-content-theme="b">
 <h3>Is there other color?</h3>
 <p>他の色はありますか?</p>
 <div data-role="fieldcontain">
 <label for="select-choice-1">Color: </label>
 <select name="select-choice-1" id="select-choice-1">
 <option value="10">白 White</option>
 <option value="20">黒 Black</option>
 <option value="30">赤 Red</option>
 <option value="40">青 Blue</option>
 <option value="50">水色 Turquoise</option>
 <option value="60">金色 Gold</option>
 <option value="70">グレー Gray</option>
 <option value="80">ピンク Pink</option>
 </select>
 </div>
 </div>

 <div data-role="collapsible" data-content-theme="b">
 <h3>Is there larger one?</h3>
 <p>もう少し大きいサイズはありますか?</p>
 </div>
 <div data-role="collapsible" data-content-theme="b">
 <h3>Is there smaller one?</h3>
 <p>もう少し小さいサイズはありますか?</p>
 </div>
 </div>
 </div>
 </div>
</body>
</html>

この中で 「p-collapsible」 は「+」が付いている展開可能な画面部分のことで、「select」 は数値やサイズを選択する事が可能になります。
最初のTop画面の 「Shop」 ボタンをクリックすると、この shop/index.html が表示されます!

他の画面のソースコードも必要であれば、以下のリンク先で表示し、ブラウザの 「ソースコードを表示」 機能でソースを表示してください。

=> How say in Japan

Node.jsのアプリを追加したい場合は、以下を参考にしてください。

=> Node.js と Ajax を使った Bluemixサンプル

また、jQuery Mobile の様々な機能に関しては、以下にアクセスしてソースコードを表示して見るのが一番参考になりました!

=> jQuery Mobileの様々な機能

 

Node.jsで ajaxと Cloudantを連携させる Bluemixで動く 簡単サンプル

ブラウザ から Ajaxで送ったデータを、Node.js 経由で代表的な NoSQLデータベースの一つである Cloudant に格納する簡単サンプルです。

=> まだの方はこの前回のサンプルを見て、まず Node.jsで Ajaxと連携するアプリを作ってください。

Node.jsアプリの Cloudant 対応

前回のサンプルを手順どおり Bluemix 上で稼動させ、ブラウザで名称を入力して 「追加」 ボタンを押すと、上の表に名称がリストされます。しかし、他のブラウザで同様に画面を表示してもそのリストは表示されません。また、サーバーを立ち上げ直すと、その入力データは消えてしまいます。これは、ブラウザ上にデータを保持しているだけで、サーバー側のデータベース (DB) に保存していないためです。

そこで今回は、前回のサンプルに手を加え、「追加」 したらJSONをそのまま Cloudant の DB に保管し、DBの中身を 「全件表示」 したり、「全件削除」 したりできるように機能追加してみましょう。追加した結果は、以下のような画面になります。

cloudant_ajax

最初に、Node.js のサーバー側 JavaScriptアプリケーションである 「app.js」 に手を加えて、Cloudant DBにデータを格納するよう機能追加します。
そのために以下のように、Cloudant のベースとなっている、CouchDB 用のアクセス・モジュールである、「cradle」 を以下のように 「package.json」 に追加し、[実行] [npm install] で導入します。

{
    "name": "Nodejs_Start",
    "version": "1.0.0",
    "description": "Sample nodejs + ajax app for Bluemix",
    "scripts": {
        "start": "node app.js"
    },
    "dependencies": {
        "express": "4.12.x",
        "body-parser": "*",
        "date-utils": "*",
        "cradle": "0.6.x"
    },
    "repository": {}
}

次に、Node.jsサーバー・アプリの、「app.js」 を以下のように変更します。
Cloudantへのアクセス・モジュールである、「cradle」 を組み込み、Cloudantへの接続情報である、‘cloudantNoSQLDB’ の credentials を環境変数より取得します(後述)。
cradle.Connection を new してDBへの接続を確立し、db.save でデータ追加、db.view で全件表示、db.remove で全件削除します。

// expressアプリ・フレームワークの設定
var express = require('express');
var app = express();

// POSTパラメータ取得用 body-parser設定 (express4からurlencoded()とjson()必要)
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// index.htmlの /public ディレクトリ設定
app.use(express.static(__dirname + '/public'));

// Date()で現在時刻を取得するためのユーティリティ
var dateutil = require('date-utils');

// Cloudant用アクセス・モジュール「cradle」設定
var cradle = require('cradle');

// Cloudant DB接続情報取得
var services = JSON.parse(process.env.VCAP_SERVICES);
var credentials = services['cloudantNoSQLDB'][0].credentials;
var host = credentials.host;
var port = credentials.port;
var options = {
 cache : true,
 raw : false,
 secure : true,
 auth : {
 username : credentials.username,
 password : credentials.password
 }
};

// データベース接続
var db = new (cradle.Connection)(host, port, options).database('itemsdb');

// 「追加」ボタンの id=add, ui_item.jsの url:'/add'でcall
app.post('/add', function(req, res){
 var date = new Date();
 var now = date.toFormat("YYYY/MM/DD HH24:MI:SS");
 req.body.date = now;

 // 項目の保存
 db.save(now, req.body);
 console.log('app.js saved: ' + JSON.stringify(req.body));

 res.send(req.body);
});

//「全件削除」ボタンの id=removeAll, ui_item.jsの url:'/removeAll'でcall
app.post('/removeAll', function(req, res){

 // 全件検索を、作成したview名 items_view にて実行
 db.view('items/items_view', function (err, rows) {
 if (!err) {
 rows.forEach(function (id, row) {
 db.remove(id);
 console.log("removed key is: %s", id);
 });
 } else { console.log("app.js db.remove error: " + err); }

 });

 res.send({});
});


//「全件表示」ボタンの id=getAll, ui_item.jsの url:'/getAll'でcall
app.post('/getAll', function(req, res){
 returnTable(res);
});

var returnTable = function(res) {
 // 全件検索を、作成したview名 items_view にて実行
 db.view('items/items_view', function (err, rows) {
 if (!err) {
 rows.forEach(function (id, row) {
 console.log("key: %s, row: %s", id, JSON.stringify(row));
 });
 } else { console.log("app.js returnTable error: " + err); }

 res.send(rows);
 });
};

//環境変数にポート番号が無ければ、port=3000 設定
var port = (process.env.VCAP_APP_PORT || 3000);
// サーバー開始
app.listen(port);
console.log('App started on port ' + port);

 

Bluemix上の Cloudantの設定

次に、=>リンク先のBluemixにログイン し、ダッシュボード画面からCloudant DBの設定を行います。対象のアプリケーションの画面(このサンプルでは「BMSampleC」)で以下の画面で、[Cloudant NoSQL DB] をクリックしてください。

bm_cloudant

すると Cloudant の初期画面が表示されるため、下の右にある、[起動] アイコンをクリックして Cloudant のコンソール(操作画面)を起動してください。(うまく起動しない場合はしばらくして再実行)

bm_cloudant起動

すると、以下のような Cloudant コンソールが表示されるはずです。ここで右上の [Add New Database] をクリックし、新しいデータベース名 「itemsdb」 を入力して、[Create] をクリックしデータベースを作成します。

bm_cloudant_add

次にそのitemsdbで検索するための索引(キーのIndex)を作成します。[All Design Docs +] で、[New Search Index] をクリックすることで索引を追加できます。

bm_cloudant_index

右に入力画面が表示されたら、以下のように [_design] に 「items」。[index name] に 「items_index」 とします。ここでは、キーを日付の「date」にしましょう。[Search Index Function] を以下のように 「date」 に変更し、[Save & Build Index] をクリックします。これで 「date」 をこキーにしての検索が可能になります。

bm_cloudant_index2

次にそのitemsdbで検索するためのビュー(返す列を決められる)を作成します。[All Design Docs +] で、[New View] をクリックすることでビューを追加できます。

bm_cloudant_newview

以下のように既に作った 「_design/items」 に対して、Index name 「items_view」 を追加し、その Map function (返す列のオブジェクト)を以下のように記述し [Save & Build Index] で保存してください。

cloudant_bm_view

 

function(doc) {
 var row = { id: doc._id,
   date: doc.date,
   item1: doc.item1 };
 emit(doc._id, row);
}

 

これで、これらの索引(Index)やビューで検索可能になります。

Bluemixの Cloudant用環境変数の変更

メニューの [ダッシュボードに戻る] をクリックし、ダッシュボード(上の最初の画面)に戻り、左のメニューから [環境変数] をクリックすると、環境変数エディターになります。(左にメニューが表示されていない場合は、[ダッシュボードに戻る] の右側の [∧] をクリック)

bm_環境変数2

このエディターに表示されている、「 { 」 から始まるテキストを全てコピーし、テキスト・エディターやメモ帳で、改行を削除して一行の文字列にしてください。
(「 { “cloudantNoSQLDB”: [ { “name”: “Cloudant NoSQL DB-qn”,”label”: “cloudantNoSQLDB”,”plan”: “Shared”,”credentials”: { “username”: ・・・」 となります)

次に、Eclipseの 「app.js」 を右クリックし、[実行] [実行の構成] を選びます。左のリストの中から、「Node Application」 の下の自分のNode.jsプロジェクトの、「-app.js」 が付いているものを選んでください。右にダイアログが出ますので、[環境] タブを選び [新規] ボタンを押してください。
そこの [名前] に 「VCAP_SERVICES」 を入力し、下の [値] に、先ほどの一行にした文字列 「 { “cloudantNoSQLDB”: [ { “name”: “Cloudant NoSQL DB-qn”, ・・・」 をコピーしてください。
これで、ローカルでもBluemixのクラウド上でも、同じ Cloudantアクセス用環境変数を取得できるようになりました。


画面の機能追加

画面 「index.html」 は以下のように変更し、「全件表示 (getAll)」 や 「全件削除 (removeAll)」 のボタンを加えます。index.html はシンプルなままにしておきました。

<html>
 <head>
 <title>Node.js Ajax Cloudant Sample</title>
 <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
 <script type="text/javascript" src="js/ui_item.js"></script>
 </head>

 <body>
 <table id="dataTable" border="1">
 <thead>
 <tr>
 <th>時間</th><th>項目</th>
 </tr>
 </thead>
 <tbody id='tableItems'></tbody>
 </table><br>

 <div id="form">
 <br>
 <button value="全件表示" id="getAll"> 全件表示 </button>
 <button value="全件削除" id="removeAll"> 全件削除 </button>
 <br><br>
 <span>項目名: </span><span><input type="text" id="item1"></span>
 <button value="追加" id="add"> 追加 </button>
 <br>
 </div>
 </body>
</html>

ブラウザ側 JavaScript として作成した、「ui_item.js」は以下のように、$.ajax のサーバー呼び出しに、追加の「/add」、全件表示の「/getAll」、全件削除の「/removeAll」 の3つの機能を追加しました。
いずれも、画面上部の表 「#tableItems」 に結果を表示するようになっています。

// ui_item.js ブラウザUI用 JavaScript (index.htmlより呼ばれる)

 $(function(){
 console.log('ui_item.js in');

 // サーバから取得したデータを、htmlテーブルに追加
 var showTable = function(data) {
 $("#tableItems").append("<tr></tr>")
 .find("tr:last")
 .append("<td>" + data.date + "</td>")
 .append("<td>" + data.item1 + "</td>")
 };

 // 追加ボタン(index.htmlのid=add)押下時 実行
 $("#add").click(function(e){ e.preventDefault();
 var param = {};
 param.item1 = $("#item1").val() || "";

 // POSTでのajaxコールで、サーバーのapp.jsのapp.post /add呼び出し
 $.ajax({
 type: 'POST',
 data: JSON.stringify(param),
 contentType: 'application/json',
 url: '/add',
 success: function(data) {
 console.log('success add: ' + JSON.stringify(data));
 showTable(data);
 },
 error: function(data) { console.log('error add: ' + JSON.stringify(data)); }
 });

 // 入力項目名を空白に
 $("#item1").val('');
 });

 // 全件表示ボタン(index.htmlのid=getAll)押下時 実行
 $("#getAll").click(function(e){ e.preventDefault();
 $("#tableItems").empty();

 // POSTでのajaxコールで、サーバーのapp.jsのapp.post /getAll呼び出し
 $.ajax({
 type: 'POST',
 data: {},
 contentType: 'application/json',
 url: '/getAll',
 success: function(rows) {
 for(var i=0; i<rows.length; i++) {
 console.log(' row '+ i +": "+ JSON.stringify(rows[i]));
 showTable(rows[i].value);

 }
 },
 error: function(data) { console.log('error getAll: ' + JSON.stringify(data)); }
 });
 });

 // 全件削除ボタン(index.htmlのid=removeAll)押下時 実行
 $("#removeAll").click(function(e){ e.preventDefault();

 // POSTでのajaxコールで、サーバーのapp.jsのapp.post呼び出し
 $.ajax({
 type: 'POST',
 data: {},
 contentType: 'application/json',
 url: '/removeAll',
 success: function(data) { console.log('success removeAll'); },
 error: function(data) { console.log('error getAll: ' + JSON.stringify(data)); }
 });

 $("#tableItems").empty();
 });
 });

 

前回同様、Eclipseで、「app.js」を右クリックし、[実行] [Node Application] を実行することで、Node.js サーバーを立ち上げて、ブラウザで 「http://localhost:3000/」 をアクセスすると、最初に貼り付けた画面のイメージが表示されるはずです。項目の「追加」や、「全件表示」、「全件削除」ができるはずです。

これらのソースコードは、Eclipseでは以下のような構成になります。

cloudant_eclipse

 

 

Node.js Express4 Ajaxを活用した Bluemixで動く 簡単サンプル

Node.js とそのフレームワークである Express v4 を活用し、Ajaxからアクセスする簡単サンプルを Eclipse で作って、クラウドの Bluemix で動かしてみましょう。次のサンプルも考慮し、Cloudantも一緒にセットアップします。完成すれば以下のような画面になり、下に名前を入力すると、上の表に追加されます。

nodejs.ajax.web

Bluemixの Node.jsと Cloudant のセットアップ

リンク先のBluemix にログインし、クラウド環境を構築します。(=>Bluemixを利用したこと無い方は、こちら)
Bluemix の初期画面から、[+ アプリの作成] で [Web]、[SDK for Node.js] と選び、[新規アプリの名前] で自分の好きな名前を入力して [完了] してください。(ここでは、「BMSampleC」という名前にしていますが、同じ名前は登録できないので、変えてください)

add_appl

add_web

add_nodejs

add_appl_name

[どのようにコーディングを開始するか] は [GIT] をクリックした上で、画面一番下の [アプリの概要の表示] をクリックしてください。

add_GIT

そこの [+ サービスまたはAPIの追加] をクリックし、Bluemixの数あるサービスの中から、[データ管理] の [Cloudant NoSQL DB] をクリックし、[作成] してください。ポップアップが出たら、[再ステージング] をクリックしてください。「ダッシュボード」 に戻り、Cloudantが追加されていると思います。これでもう、Bluemix のクラウド側は Ready! です。

add_service

add_cloudant

ダッシュボードの右上に、[GITの追加] がありますので、そこをクリックしてください。[GITリポジトリーの作成] で [作成] とし、「ダッシュボード」 に戻ると先ほど [GITの追加] と表示されていたところが、[GIT URL:] になります。この右のURL (「https://hub.jazz.net/git/xxxx/BMSampleC」 など)をクリップボードにコピーしておきます。

Bluemix上の DevOpsサービスで開発を継続しても良いのですが、今回はローカルPCでのテストを試すために、自分のPCのEclipseで開発してみます。(=>Eclipseの導入はまずこちら)


Eclipseの設定と、ローカルPCへのNode.jsの導入

Eclipseの [ファイル]メニューで [インポート] [Git] [Gitからプロジェクト] で、[URIの複製] のURIに、上でコピーしたURLを貼り付けます。下の[ユーザー:][パスワード:]は、BluemixのユーザーID/パスワード(IBM ID)か、JazzHubのを入力して、[次へ]をクリック。[master]がチェックされている状態で[次へ]をクリックし、ディレクトリの変更が無ければそのまま[次へ]で、[一般的なプロジェクトとしてインポート]を選択し[次へ]に行き[完了]をクリックします。

Eclispeの「プロジェクト・エクスプローラ」上に、Bluemix上のGITのプロジェクトがインポートされ、表示されているはずです。

次に、Eclipseでの Node.js開発に便利な、nodeclipse を導入します。Eclipseメニューの[ヘルプ] [Eclipseマーケットプレース] をクリックしてマーケットプレースを立ち上げ、[検索:] に、「nodeclipse」 と入力してください(”e”の数に注意!)。リストの中から、「Nodeclipse .17.plus」 の[インストール] ボタンをクリックし導入します。(=>参考)

add_nodeclipse

[選択されたフィーチャー] は基本全て選択の状態で、[確認] [使用条件に同意] にチェックし、[完了] してください。

次に、Note.js 本体 (JavaScriptエンジンと、npm) を導入します。以下からダウンロード (INSTALL) してください。node-xxxx.msi がダウンロードされたら実行し、基本そのままのデフォルト設定で導入します。

=>Node.js の ダウンロード (INSTALL)


Eclipseで Node.jsの実行

Bluemixから取得したサンプルのプロジェクトを Eclipseで開き(上の例は、BMSampleC)、「package.json」 を右クリックします。そこで、[実行] [npm install] で、package.json で実行すると、package.json に記述された、このサンプルに必要なモジュールが全て自動的にダウンロードされ、セットアップされます。(npmはNode.jsに含まれているため、ローカルへの導入と、PATHがきれていることが前提)

npm_install

次に同様に、サンプルの中の、「app.js」 を右クリックし、[実行] [Node Application] をクリックすることで、Node.js がローカルPCで実行されます。(エラーの場合は、下の章を参照)
実行後に、「Port番号 3000 で実行」 などと英語で表示されますので、Eclipseの地球アイコンの「Webブラウザーを開く」か、通常のブラウザで以下のURLをアクセスして、実行結果を表示してください。

http://localhost:3000/

app.js_result

起動したサーバーを止めるには、Eclipseの下の [コンソール] のペインで [選択されたコンソールの表示] アイコンで起動した 「Node.js process」 を選択して表示し、赤い四角の [終了] ボタンを押すと停止します。停止すると、サーバーを再度実行できます。


Node.jsの実行でエラーが表示された場合

「app.js」の実行で、Eclipseのコンソールに以下のエラーが表示される場合があります。

path.js:233
      throw new TypeError( ‘Arguments to path.join must be strings’);

 これは、サンプルで使われている、「cfenv」 というCloud Foundryを使って環境情報を取得する部品のバージョン不整合エラーです。
「app.js」 を以下のように「cfenv」を使わないように書き換えて、保存して再度実行してみてください。(これを動かさなくても次のステップに行けます)

// This application uses express as it's web server
// for more info, see: http://expressjs.com
var express = require('express');

// create a new express server
var app = express();

// serve the files out of ./public as our main files
app.use(express.static(__dirname + '/public'));

//------
//There are many useful environment variables available.
//VCAP_APPLICATION contains useful information.
var appInfo = JSON.parse(process.env.VCAP_APPLICATION || "{}");
var services = JSON.parse(process.env.VCAP_SERVICES || "{}");
var host = (process.env.VCAP_APP_HOST || 'localhost');
var port = (process.env.VCAP_APP_PORT || 3000);
//Start server
app.listen(port, host);
console.log('App started on port ' + port);


Ajaxを使う Node.jsサンプル・アプリケーションの開発

次に、サンプル・アプリケーションを Ajaxを活用するよう変更します。このサンプルでは 「express」 のv4.x に加え、「body-parser」 「date-utils」 というオープンソースを使います。
まずEclipseのプロジェクト・エクスプローラーで、「package.json」 を開き、以下のように変更してください。

{
    "name": "Nodejs_Start",
    "version": "1.0.0",
    "description": "Sample nodejs + ajax app for Bluemix",
    "scripts": {
        "start": "node app.js"
    },
    "dependencies": {
        "express": "4.12.x",
        "body-parser": "*",
        "date-utils": "*"
    },
    "repository": {}
}

次にEclipseでその 「package.json」 を右クリックし、[実行] [npm install] をクリックすると、ローカルPCで Node.js のパッケージ管理機能である 「npm」 が必要なモジュールを一通りダウンロードしてくれます。「node_modules」 フォルダに保管されるため、プロジェクト・エクスプローラーのプロジェクトを [リフレッシュ] して確認してください。

最初に起動されるサーバー側の 「app.js」 は、以下のように変更してください。汎用アプリケーション・フレームワークの 「express」 と、ブラウザとサーバーでやり取りするデータを取得するための 「body-parser」 と、日付を取得するための 「date-utils」 をセットアップし、「app.post」 でブラウザからPOSTで送られてきたデータに日付を追加し、「res.send」 で返します。

// expressアプリ・フレームワークの設定
var express = require('express');
var app = express();

// POSTパラメータ取得用 body-parser設定 (express4からurlencoded()とjson()必要)
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// index.htmlの /public ディレクトリ設定
app.use(express.static(__dirname + '/public'));

// Date()で現在時刻を取得するためのユーティリティ
var dateutil = require('date-utils');

app.post('/', function(req, res){
    var date = new Date();
    var now = date.toFormat("YYYY/MM/DD HH24:MI:SS");
    req.body.date = now;

    console.log('app.js req.body: ' + JSON.stringify(req.body));
    res.send(req.body);
});

//環境変数にポート番号が無ければ、port=3000 設定
var port = (process.env.VCAP_APP_PORT || 3000);
// サーバー開始
app.listen(port);
console.log('App started on port ' + port);

 

Node.jsにデータを送る Ajax画面サンプルの開発

次に画面側を作成します。プロジェクトエクスプローラの 「public」フォルダにある、「index.html」 を以下のように変更してください。
「script」で、ブラウザ上で動かすJavaScriptである 「js/ui_item.js」を指定しています。 前半の 「dataTable」 が表示する表で、中央の 「dataItems」 に後からデータの行を追加します。一番下の 「form」 のところが、データ追加用ボタンです。

<html>
    <head>
        <title>jsonp test</title>
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/ui_item.js"></script>
    </head>

    <body>
    <table id="dataTable" border="1">
    <thead>
        <tr>
            <th>時間</th><th>項目</th>
        </tr>
    </thead>
    <tbody id='tableItems'></tbody>
    </table><br>

    <div id="form">
        <br>
        <span>項目名: </span><span><input type="text" id="item1"></span><br>
        <button value="追加" id="add">追加</button>
        <br>
    </div>
    </body>
</html> 

その index.html から呼ばれるJavaScriptを追加しますので、「public」フォルダを右クリックし、 [新規追加] [フォルダ] で、「js」 を追加し、その下に、[新規追加] [ファイル] で、「ui_items.js」 を追加し中に以下をコピー&ペーストしてください。
最初の 「showTable」 が、画面の表に一行追加する部分で、「#add」 部分が「追加」ボタンが押された際に呼び出され、「$.ajax」 部分でサーバーにデータがPOST送信されます。

// ui_item.js ブラウザUI用 JavaScript (index.htmlより呼ばれる)

 $(function(){
   console.log('ui_item.js in');

   // サーバから取得したデータを、htmlテーブルに追加
   var showTable = function(data) {
     $("#tableItems").append("<tr></tr>")
     .find("tr:last")
     .append("<td>" + data.date + "</td>")
     .append("<td>" + data.item1 + "</td>")
   };

   // 追加ボタン(index.htmlのid=add)押下時 実行
   $("#add").click(function(e){
        e.preventDefault();
        var param = {};
        param.item1 = $("#item1").val() || "";

        // POSTでのajaxコールで、サーバーのapp.jsのapp.post呼び出し
        $.ajax({
            type: 'POST',
            data: JSON.stringify(param),
            contentType: 'application/json',
            url: '/',
            success: function(data) {
                console.log('add success: ' + JSON.stringify(data));
                showTable(data);
            },
            error:  function(data) { console.log('error ' + JSON.stringify(data)); }
        });

        // 入力項目名を空白に
        $("#item1").val('');
     });
 }); 

これらのファイルを追加すると、以下のようなフォルダ構成になります。

nodejs.ajax


稼動テスト

保管が終了したら、まず Eclipse上で 「app.js」 を右クリックし [実行] [Node.js] を実行してください。コンソール上に ポート3000 で稼動していると英語で表示されたら、サーバーは稼動しています。ブラウザで以下のURLをアクセスして、実行結果を表示してください。一番上のWeb画面が表示されるはずです。

http://localhost:3000/

=> 次の記事は、このサンプルの Node.js側で、データを Cloudant DBに格納します!

 

補足)ローカルEclipseと、クラウドBluemixのコードの同期

最後にローカルPCのEclipseで変更したコードを、クラウド上のBluemixと同期します。Eclipseの [プロジェクト・エクスプローラー] のプロジェクトを右クリックし、、[コミット] を実行します。[コミット・メッセージ]  にコメントを記入して、[ファイル] の右の [全て選択] アイコンをクリックし、 [コミット] ボタンを押します。(=>詳しくはこちら参照)

[チーム同期化] パースペクティブの、[同期化]タブのアイコンのうち、左から4番目の矢印がオレンジ色の [プッシュ] をクリックし、ローカルの更新をリモートのクラウドにプッシュします。

Bluemix上のGITビューで、[着信] が来ているはずですので、真ん中の上向き矢印アイコン [ブランチのコンテンツをアクティブ・ブランチにマージ] をクリックします。上に「成功しました」と表示されれば、変更の全体への反映が完了です。(=>詳しくはこちら参照)

これでBluemix上に反映することができましたので、Bluemixの 「アプリケーションURLを開く」 か、「経路」 をクリックして稼動を確認してください!

なお、Bluemix 上に反映された変更を、他のEclipse と同期する場合は、まずローカルPCのEclispeで同様に、プロジェクトに対し [チーム] [ワークスペース同期化] を実行します。プロジェクトに対し、[マージ] を実行すると、ローカルのソースコードと、リモート(Bluemix)のコードの比較が表示されます。そこで、[ソースの比較] タブの左から2番目のアイコンで [双方向比較 (上位を無視)] をクリックします。次に、左から3番目のアイコンの [右から左に全ての非競合をコピー] か、4番目の [右から左に現在の非競合をコピー] で一つずつ反映するかを選択し、実行してください。サーバーのコードとマージできますので、[保管] してください。

単純にBluemixからコードを取得する場合は、[チーム同期化] パースペクティブの [同期化] タブの [プル] を実行してください。

ソースコードが何かのはずみでおかしくなり、元のバージョンに戻したい場合は、そのファイルに対し右クリックし、[置換] [ローカルヒストリーの前回のものと置換] を実行し元に戻してください。

自分だけの ブログ・サイトの作り方

皆さん、自分だけの ブログ(blog)・サイト を持ちたいと思ったことはありませんか? 私が一番思ったのは、某アメブロで自分のブログを立ち上げた時に、自分の ブログ に女性用下着の広告ばかりが表示された時です。やはり、自分のイメージのデザインのホームページに、自分の好みの広告が載った、自分の ブログ・サイトを持ちたいですよね。

以下の ブログ・サイトの作り方 の手順に従って構築すれば、自分だけのアドレス(ドメイン名)を持った、自分が自由にデザインできる ブログ サイトを立ち上げることができます!

クラウド(レンタル・サーバー)代が月1000円くらいかかりますが、それくらいで自分のサイトが持てれば安いものですよね!?

サイトの作り方1) -独自ドメイン取得 編

レンタルサーバー で サーバー を申し込むと、今見ていただいているこのサイトのように、 http://xxxx.xsrv.jp/ という自分で決めた名前(xxxx)を含む …

サイトの作り方2) -エックスサーバー設定 編

【レンタルサーバーお試しの申し込み方法】 エックスサーバー(Xserver) に上の イメージ をクリックしてアクセスすると、以下のような画面が表示されます。 …

サイトの作り方3) -WordPressでブログ作り 編

【WordPressのコンテンツ作成】 WordPress で ブログ作り の手順を以下に共有いたします。  …

サイトの作り方3.1) -WordPress テンプレート Twenty Fifteen への移行編

このサイトを、WordPress v4.1 にアップグレードし、v4.0 で使っていたテンプレート Twenty …

サイトの作り方4) -WordPressおすすめプラグイン 編

  【WordPress プラグイン活用とは】 WordPressプラグイン とは、WordPress 本体ではできない追加の便利機能で、容易に導入・活用することができます。例えば WordPress本体では、 …

サイトの作り方5) -アフィリエイトで稼ぐ 最初の一歩 編

アフィリエイト  を活用すると、自分の ホームページ に貼り付けた提携広告を閲覧者が クリック することで …

サイトの作り方5.1) -アフィリエイトの広告例

アフィリエイトの広告例 Google AdSense: …

サイトの作り方6) -Googleと情報共有して SEO対策 編

Webサイト を作ったからには、たくさんの人に見ていただきたいわけで、そのためには Google の検索結果の上位にリストされたいというのは皆同じですよね。そのためには Googleさん と 情報共有 …

iPhone/iOSと Android 両方で動くアプリ開発環境 Cordova

iPhone / iOSと Android 両方で動くアプリを開発してみたいと思っていたら、Apacheの Cordova というオープンソースで作れるとのことで Windows7 に開発環境をセットアップしてみました。

Cordova で提供される Cordovaフレームワーク は、モバイル上で稼動するアプリを作る際に、iOSやAndroidの実装の違いを吸収するために作られた PhoneGap が元になっています。HTML5やJavaScriptを使って一つアプリを作れば、いろんなモバイルで動かすことが可能になるとは便利ですよね。

ダウンロードと環境準備

iOSとAndroidの両方の環境設定が必要なだけに、環境準備はちょっとややこしいです。が、それもあってか Cordovaセットアップ用コマンドが用意されていますので、それを活用しましょう。JavaScriptで稼動するため、JavaScriptエンジンの Node.js を以下からダウンロード (INSTALL) してください。

=>Node.js の ダウンロード (INSTALL)

node-xxxx.msi がダウンロードされたら実行し、基本そのままのデフォルト設定で導入します。すると、Node.js のパッケージ管理コマンド 「npm」 が実行できるようになり、後述のCordovaセットアップで使います。

次に、Java開発環境である「Java SE 7」のJDKが導入されていない人は、以下からJDKをダウンロードして導入してください。(JREだけではNGでSDKが必要。Oracle版が必須)

=>JDK (Java SE Development Kitの、jdk-7u79-windows-x64.exe 等) 

また、ビルドに必要なApacheのAntを導入してください。
http://ant.apache.org/bindownload.cgi の中ほどにある、apache-ant-X.X.X-bin.zip をダウンロードして解凍してください。EclipseのPleiades等を導入している人は、以下の例のようにPATHを設定すればそのまま使えます。

Android SDK 実行のために、WindowsにJava実行のPATHを設定します。Windowsの[コンピューター][システムのプロパティ][詳細設定][環境変数]で、以下の2つをセットしてください。

ユーザー環境変数(新規追加): JAVA_HOME
変数値(例): C:\Program Files\Java\jdk1.7.0_79

ユーザー環境変数(新規追加): ANT_HOME
変数値 (Pleiadesが入っている場合の例): C:\pleiades\eclipse\plugins\org.apache.ant_1.9.2.v201404171502

ユーザー環境変数 [Path] を編集し、後ろに以下を追加
…… ;%JAVA_HOME%\bin;%ANT_HOME%\bin

Android 用開発キット(SDK)の、「Android Studio」を以下からダウンロードし、android-studio-xxxx.exeを実行してください。(android-studio-bundle-141.1890965-windows.exe で900MB近くあり、導入はさらに4GB程度必要となります)
基本そのままのデフォルト設定で大丈夫です。(前のバージョンを聞かれたら、Do not have previous version を選択)

=> Android Studio

Intel HAXMがインストールされていないと、エミュレーターを実行することができません。導入最後にこれらのエラーが表示されたら、BIOSのCPU Configurationで、[(Intel) Visualization Technology]をオンにして Android Studio を再導入してください。

Macの人は、iOS用開発キット(SDK)の、「Xcode」を以下からダウンロードしてください。AppStoreからダウンロードする形になります。

=> Xcode

残念ながら、私のようなWindows環境の人にはこの Xcode を導入することが基本的にできません。実際に iOS環境でテストしてみるのは Mac購入後にするとして、iOSでも動くアプリになると信じて、まずはWindows上の Android環境でテストしてみたいと思います。

Cordovaのセットアップ

Windowsのアクセサリのコマンド・プロンプトを立ち上げ、以下を実行してください。(以下のように、Node.jsを導入したディレクトリから実行)

C:\Program Files\nodejs> npm install cordova -g

すると、以下のようなメッセージを出力し、導入が完了します。

cordova@5.0.0 C:\Users\XXXX\AppData\Roaming\npm\node_modules\cordova
├── q@1.0.1
├── underscore@1.7.0
├── nopt@3.0.1 (abbrev@1.0.5)
└── cordova-lib@5.0.0 (valid-identifier@0.0.1, osenv@0.1.0, ….

次に、Cordovaプラグイン を実行するための plugman を以下で導入します。

C:\Program Files\nodejs> npm install plugman -g

以下のように、cordova コマンドで引数 -v を与えると、バージョンが表示されるはずです。

C:\Program Files\nodejs> cordova -v
5.0.0

また、cordova コマンドが、Android SDKの各種ツールを呼び出せるようにするために、以下の2つのPATHを、Java同様に追加します。(以下の「ユーザー名」のところは、各環境に合わせて変更)

ユーザー環境変数 [Path] を編集し、後ろに以下を追加
……;C:\Users\ユーザー名\AppData\Local\Android\sdk\tools;C:\Users\ユーザー名\AppData\Local\Android\sdk\platform-tools;

うまくPATHが設定できていれば、以下の android コマンドをコマンドプロンプトで実行すれば、ヘルプが参照できるはずです。

> android -h

Cordovaでアプリのプロジェクト作成

C:\apli など、これから Cordova で作るアプリを置く場所を決めて、コマンド・プロンプトで表示してください。ここでは、Sample1 プロジェクトの中に、jp.touchstone パッケージで、SampleApli1 ファイルを作ります。

C:\apli> cordova create Sample1  jp.touchstone  SampleApli1 -d

作成した Sample1ディレクトリに移動し、以下のコマンドを実行することで Android対応アプリに必要なモジュールが組み込まれます。
(Sample1下の[platform]ディレクトリに、Android特化のコードが含まれるディレクトリが生成される)

C:\apli\Sample1> cordova platform add android

次に、コマンドプロンプトから、android コマンドで Android SDK Managerを立ち上げて、必要な環境のモジュールの追加を行います。

C:\> android

cordova_android_sdk

上のように、Android x.x.x など必要な環境をチェックして、右の下から2番目の [Install XX packages] ボタンを押し、ポップアップ画面で [Accept Licenses] をチェックしてInstallすることができます。
SDKモジュールを追加したら、再度 platform add androidを実行します。

C:\apli\Sample1> cordova platform add android

以下のコマンドで Android Virtual Device(ADV) 画面を立ち上げ、[Device Definition]の[Create Device]ボタンで新しいデバイスを定義し、[Create AVD]ボタンでテストするAndroid環境を登録することができます。とりあえず、初期登録済みのNexus (以下のAPI Level 22は、Android 5.1.1)を使って試してみる事も可能です。

C:> android avd

cordova_android_adv

 Cordovaでアプリ開発

Sample1の下の、www ディレクトリに生成された index.html を変更して、実行してみましょう。まず index.html を、Windowsアクセサリの ワードパッドなどで開いてください。<body> 下の以下の記述の部分を、

<div class=”app”>
<h1>Apache Cordova</h1>
 <div id=”deviceready” class=”blink”>
 <p class=”event listening”>Connecting to Device</p>
 <p class=”event received”>Device is Ready</p>
 </div>
</div>

以下のようにタイプして書き換えてください。(実質、<a onClick … から始まる一行のみ)

<div class=”app”>
<h1>Apache Cordova</h1>
 <div id=”myApp”>
 <a onClick=”push()” id=”button”>Add</a>
 </div>
</div>

また、その下の以下の行を見つけたら、

<script type=”text/javascript” src=”js/index.js”></script>

その行の下に、以下のJavaScriptの記述を追加してください。

<script type=”text/javascript”>
var num = 0;
function push() {
num ++;
button.innerHTML = ‘追加 ‘+ num;
}
</script>

次に、以下を実行することで、Android用のアプリの実行モジュールを作成します。

C:\apli\Sample1> cordova build

実機でのアプリ実行

Android本体で実行する場合は、 「USBデバッグ」可能に します。まず手持ちの Android端末を、デベロッパー(開発者)モードに変更します。 USB接続しない状態で、Androidの[設定][端末情報]で、[ビルド番号]で記号が並んでいるところを、7回タップします。すると、「デベロッパー・モード」になります。(デベロッパーになるまであと n ステップ・・・とか表示されます)

[設定]に戻ると、[開発者向けオプション]が表示されているはずです。そこで、[USBデバッグ]をチェックします。
[設定]に戻り、[セキュリティ]で[提供元不明のアプリ]を、オンにします。
Android端末をUSBで接続します。これでUSB経由で作成アプリを実行できます。

Sony Xperiaの場合は、PC側に PCコンパニオンを導入 して起動します。またAndroid側に 「PCソフトウェアのインストール」が表示されたら、タップしてPC側にドライバをインストールし、PCを再起動します。AndroidをUSB接続すると、「USBデバッグが接続されました」と表示されれば接続されています。

PC側では、以下のコマンドでデバイスの接続を確認できます。

C:\> adb devices

ここで、例えば Android v5.0.x (android-21) でテストしたい場合には、Android コマンドで Android SDK Manager を立ち上げて、Android v5.0.x のSDKを導入してください。

AndroidSDK5.0.x_2

その上でビルドしますが、> cordova platform add android コマンドの後に、以下の2ファイルの変更が必要です。

C:\apli\Sample1\platforms\android\AndroidManifest.xml
の、以下の行を、

<uses-sdk android:minSdkVersion=”10″ android:targetSdkVersion=”22″ />

以下に変更(22などの元のAPI値を、21に変更)

<uses-sdk android:minSdkVersion=”10″ android:targetSdkVersion=”21″ />

C:\apli\Sample1\platforms\android\project.properties
の、以下の行を、

target=android-22

以下に変更(22などの元のAPI値を、21に変更)

target=android-21

以下を実行し、本体での稼動を確認してください!

C:\apli\Sample1> cordova build

C:\apli\Sample1> cordova run android -device -d

AndroidApli

(Xperiaで動かない場合は、Sony – PC Companion を立ち上げてUSB接続し、Xperia側で 「USBデバッグが接続されました」 と表示されることを確認してください)

エミュレータでのテスト実行

以下を実行することで、Windows上の Android エミュレータでテスト実行されます。

C:\apli\Sample1> cordova emulate android -d
:
:
Booting up emulator (this may take a while)……… 

と表示されしばらく(かなり)待つと、Android画面をエミュレートした画面がPC上に表示されます。スワイプやタップはある程度マウスで可能で、戻るボタンは[Esc]です。

エミュレータ的な画面が立ち上がっても1時間以上アプリが表示されない場合は、AVDでよりリソースの小さい「Nexus S」などにDeviceを変更して試してみてください。

上の 「………」 にもならず、エミュレータが立ち上がらずにすぐにエラーになる場合は、Intel HAXMがインストールされていない可能性があります。上の「Intel Visualization Technology」の設定からやり直してください。

毎回エミュレータの立ち上げに時間がかかるので、簡易的にPCのブラウザで稼動確認した場合は、以下のコマンドでサーバーを立ち上げることができます。

C:\apli\Sample1> cordova serve android

上記実行後、ブラウザで以下のURLを指定して確認してください。

http://localhost:8000/

Android SDK Toolsの、monitor.bat でデバイス・モニターを実施することも可能です。

=> モバイルアプリ開発の、Webアプリ版はこちら

 

Node.jsとは何?まず Bluemix で仕組みを理解する

最近よく耳にする Node.js ですが、要するに サーバー・マシン (ノード) で動く JavaScript ですね。Java と違って JavaScript はクラス定義や変数定義が楽なので、何か作って動かしてみるには速そうです。
まず、まだの人は以下のリンクで、Bluemixの Node.js サーバー環境と DevOps環境を立ち上げてください。無料で簡単に作れます。

=>Bluemixで動く クラウド開発環境 簡単サンプル

上記で既に Node.js が動いている状態なのですが、初めての人には何がどう動いているのか分からないと思います。Node.js はサーバー側で簡易プログラム(JavaScript)が動くため、自分のPCはブラウザがあれば何のセットアップもいりません。上の簡単サンプルで立ち上げれば、プログラムも全てサーバー (BluemixのGIT)上で以下のように管理されています。

node.js_devops

Node.js のサーバー用設定ですが、まず上の「manifest.yml」をクリックして開いて見て下さい。ここで、Host名: bmsample2、Domain名: mybluemix.net になっており、Path: . (下のディレクトリ無し) となっているため、この Node.js が実行されるURLは、「http://bmsample2.mybluemix.net/」 となります。
name: はアプリケーション名なので、自分で好きに付けてください。

では、実行されるサーバー側の JavaScriptはどう指定するのでしょうか?上記の設定だけでも、app.js が実行されますが、明示的に以下の真ん中5行目のハイライト部分のように、 command: で実行 サーバーJavaScript 「app.js」 を指定することもできます。

node.js_command

Node.js のサーバーの構成上重要なのは、以下の 「package.json」 になります。  Node.js を動かす時に利用する、他のモジュール(オープンソース)とそのバージョンの指定になります。これがあることで、このプログラムをどこに持っていっても同じセットで動かすことができます。

以下のBluemix付属のサンプルは、真ん中にある、「express」と「jade」を利用するようにpackageが設定され既に組み込まれていますが、最低限のセットとしてはこれで十分ですので、このままで進めましょう。(新しいサンプルには、jade を使ってないバージョンがありますので、packageにjadeが入ってない場合はjadeの部分は読み飛ばしてください)

node.js_package

ここで、「express」とは、Node.jsでWebアプリケーションを作成するためのフレームワーク(基本機能)で、例えば画像ファイルやスタイルシート(CSS)ファイルの扱いを簡単にしてくれたりします。また、URLとプログラムの対応付けや、テンプレート呼び出し、エラー対応なども基本機能として備えているため、開発者は設定が楽になります。

またそのexpressで活用可能なWeb画面テンプレートが、「Jade」になります。Jadeは、htmlが通常 <head> などタグで区切って記述するのに対し、ややプログラム的にシンプルに記述できるのが特徴です。

Bluemix環境でNode.js を実行すると、サーバーJavaScriptである app.js が実行されますが、 その冒頭で expressと Jadeの設定を行います。

node.js_app.js

app.js の後半は、以下のようにアプリケーションの環境変数の(JSONをparseして)読み込みと、サービスの環境変数の読み込みが実行されています。
最後は、Host名 (loalhost)と、Port番号 (3000) を設定し、Webアプリケーション express (=app) を、同じマシン内であれば、http://localhost:3000/ で実行するように、listen で設定します。

app.js のここまでの記述はほとんど決まりきったお作法なので、Bluemixサンプルのままにしておいてください。

node.js_app.js_2

console.log は、サーバー・コンソールにログのメッセージを出力するものです。自分の好みのメッセージを出力してください。

ここまでで、app.js には何もWeb画面に出力する内容が含まれてないことに気が付かれたと思います。画面出力は、express フレームワークに登録した、Jade の部分になります。これは、「views」 ディレクトリにある、「index.jade」 ファイルに登録されている .jade ファイルが呼び出されます。サンプルでは、「head.jade」 「body.jade」 2ファイルが登録されているため、これらが表示されます。「head.jade」 はヘッダー用で、文字コードやスタイルシート名が記述されているのでそのままにしてください。
(jadeが使われないサンプルの場合は、これら .jade は含まれず、代わりに通常の「index.html」が画面部分の全てとなります)

node.js_body.jade

実際に画面に表示される本体は、上の 「body.jade」 です。例えば、img の中で指定されている /images/newapp-icon.png ファイル  (静的ファイルは全て 「public」 ディレクトリ下) が画面に表示され、「h1」 や 「p」 タグでその右に記述されたメッセージが表示されます。
このメッセージを書き換えると画面表示が変わることは、既に前回実行いただいていると思います。

Node.js が動くのに必要なファイルの仕組みは、これで理解いただけましたね。後はいろいろと変更して動かしてみましょう!

 

=> express、Jade についての詳細

 

Eclipseと Bluemixで DevOpsする 簡単サンプル

 

=> 以下の記事は新しく更新し、こちらに引っ越しました!

 

Eclipse で開発した コード をすぐに クラウドの サーバーで稼動させる、いわゆる DevOps (Dev:開発と Ops:運用の統合)が Bluemixで簡単に(cfコマンド不要!)できるということなので、やってみました。前提として Bluemix の クラウド の セットアップ(無料)ができている必要があるので、まだの方は以下で一通り セットアップください。

=>Bluemixで動く クラウド開発環境 簡単サンプル

Eclipseのセットアップ

まずは、ローカルPC開発環境用のEclipseのダウンロードと導入です。(既に持っている方は飛ばしてください)
MergeDocプロジェクトのページ (http://mergedoc.sourceforge.jp/) で、Eclipse 4.4 Luna Pleiades All in Oneを選択してください。以下が表示され、Java等のオープンな統合開発環境である Eclipse と周辺オープンソースコードがまとめてダウンロードできます。

eclipse_download2

Downloadボタンの中から、64 bit / Full Edition / Java でクリックすると、約1GBのZIPファイルがダウンロードされます。ZIPを開き、c: ドライブ直下などに解凍してください(ExplorerでpleiadesディレクトリごとZIPファイル内からDrag&Dropなど)。

pleiadeseclipse フォルダ下のeclipse.exeを実行すると、以下の画面が表示されます。(ワークスペースを聞かれたら、「../workspace」 のままでOKです)
まず、Bluemixに接続しますので、メニューの[ヘルプ][Eclipseマーケットプレース]をクリックしてください。1.eclipse_init_market

すると、以下のようなマーケットプレースの画面が表示されますので、上部の[検索]タブの[検索:]のところに「bluemix」と入力し、検索してください。真ん中にBluemix関連が表示されますので、「IBM Eclipse Tools for Bluemix」の右の[インストール] ボタンをクリックします。全てにチェックしたままで[確認]ボタンをクリックし、次で [使用条件に同意] をクリックすると、Bluemixへ接続可能になりました。
3.eclipse_bluemix2

まず、Eclipseのメニューの [ウィンドウ][パースペクティブを開く][その他]で[Java EE]を選んで画面構成をJava EE用にしてください。
4.eclipse_java_perspective

次に、右下のServerタブの中で右クリックし、[新規][サーバー]で、[IBM][Bluemix]を選択してください。(もしリストに[IBM]が無ければEclipseを立ち上げ直し、リストが見えにくい場合はウィンドウを縦に引き伸ばす)
次の画面で、Bluemix用のEメールとパスワードを入力(分からない場合はココをクリック)。[Validate Account]でチェックの上、完了します。
うまく接続できれば、画面の右下の[サーバー]タブに 「IBM Bluemix – …」 のサーバーが表示されます。
5.eclipse_nre_server


BluemixのDevOps環境との連携

次に、Bluemix上に構成されているDevOps開発環境(GIT)に接続し、そのプログラムをこのローカルPCのEclipseにコピーします。

既に自分のBluemix DevOpsサービスのチーム開発環境が以前のサンプルでセットアップされている場合はこちらのBluemixにアクセスし、以前作成した[アプリケーション] (以前のサンプルは「BMSample」)を開き、以下のように右上の[GIT URL:]の右に表示されるURLをクリップボードにコピーして下さい。(https://hub.jazz.net/git/xxxxx/BMSample など)

bm_code_url

Eclipseの [ファイル]メニューで [インポート] [Git] [Gitからプロジェクト]から、[URIの複製] のURIに、上でコピーしたURLをペーストします。下の[ユーザー:] [パスワード:]は、BluemixのユーザーID/パスワード(IBM ID)か、JazzHubのを入力して、[次へ]をクリック。[master]がチェックされている状態で[次へ]をクリックし、ディレクトリの変更が無ければそのまま[次へ]で、[一般的なプロジェクトとしてインポート] を選択し[次へ]に行き[完了]をクリックします。

これでうまくローカルPCにコピーできれば、以下のように左のプロジェクトのタブにBluemixのクラウドDevOps環境と同じコードがコピーされています。例えば[views]下の[body.jade]をダブルクリックすると、真ん中の領域にソースコードが表示され編集可能です。

ここで以下のように、[body.jade]の11行目の後ろに文字を追加し、以下のように書き換えて保管して(Ctrl+S 実行)みましょう。

h1 Hi there! Eclipseより!!

bm_eclipse2_body


BluemixのDevOpsとの同期

保管後、左のプロジェクトのタブでプロジェクト名(上の例では「BMSample」)を右クリックし、[チーム][ワークスペース同期化]をクリックします。

bm_eclipse4_syncronize

[チーム同期化パースペクティブを開きますか?] と聞かれるので[はい]で開きます。以下のように、Eclipse右上の[チーム同期化]パースペクティブが選択されている状態で、左の[同期化]タブのGitの中で、変更したファイルをダブルクリックすると、ローカルのファイルと、クラウド上のファイルの差分を表示してくれます。以下の状態は、ローカルとリモートのファイルの色が付いている部分が異なっているため、まだローカルPCの変更がリモートのクラウド上に反映されていない事を意味しています。

bm_eclipse4_syncronize2

リモートに反映させるためには、まず変更を確定させるため、ローカルにコミットする必要があります。変更した、頭に [>] が付いたファイル(かプロジェクト)を右クリックし、[コミット]を実行します。次に画面が表示され、[コミット・メッセージ] に対し 「ローカルPCで変更」などコメントを記入して、[ファイル] の右の [全て選択] アイコンをクリックし、 [コミット] ボタンを押します。すると頭の [>] が消え、ローカルにコミットされた状態になります。

次にいよいよクラウドに送ります。上の画面左の[同期化]タブの下のアイコンのうち、左から4番目の矢印がオレンジ色の [プッシュ] をクリックし、ローカルの更新をリモートのクラウドにプッシュします。
ユーザーIDを聞かれたらBluemixのID (IBM ID)を入力します。([セキュア・ストーレージに保管]をチェックしておくと、秘密のパスワードを登録でき、次から入力不要)

最初はプッシュ仕様を指定するため[構成済みリモート]を選択し[次へ]で、以下の画面で[ソース参照:]は[master]を選択。真ん中の [すべてのブランチ仕様を追加] をクリックし、[完了]をクリックします。

bm_eclipse6_push3 全てのブランチ仕様を追加をクリック2

次の画面で[構成]をクリックし、[プッシュ構成]でブランチは「master」の状態で[保管およびプッシュ]をクリックすると、[プッシュ結果]が表示さます。先のコミットのコメントなどを確認し[OK]をクリックすると、リモートのクラウドに反映されているはずです。

以下のように、Bluemixのクラウド上のGITでその変更依頼を確認できます。[コードの編集 (Editor)] 画面からであれば、左に縦に並んでいるアイコンのうち、3番目のひし形の[Git]アイコンをクリックし、Gitリポジトリを表示してください。以下の画面が表示されます。(この時点ではまだ変更は全体のアクティブ・ブランチには反映されておらず、エディターで見えるクラウド上のファイルは古いままです)

ローカルPCのEclipseから、リモートのクラウドのGITへの反映依頼が成功していれば、以下の左真ん中のように [着信 (1)] となり、コミット時のコメント「ローカルPCで変更」などが表示されているはずです。(更新されてなければ[フェッチ]ボタンでリフレッシュ)

bm_git


Bluemixでの稼動確認

これでローカルPCからの変更依頼を受け取った状態ですので、左側でその着信をクリックして選択し、着信のところにあるアイコンのうち真ん中の上向き矢印アイコン[ブランチのコンテンツをアクティブ・ブランチにマージ]をクリックします。上に「成功しました」と表示されれば、変更の全体への反映が完了です。

bm_git4

最後に、Bluemixの左側の鉛筆アイコン[編集]でエディターに戻って、コードの反映を確認します。以下のように同じ [views]下の[body.jade]を開くと、ローカルPCでの変更が、BluemixのDevOpsサービス環境(のアクティブ・ブランチ)にも反映されていることがわかります。

このコミットやブランチへのマージの仕組みは少々手間に思えますが、何人かのチームで開発する場合には有効です。自分のコードのちょっとした変更が不用意に他の人の環境に影響を与えたりとか、他の人がコードを勝手に上書きしたりするのを防ぐことができるからです。

bm_editor

上画面の中央の[再生ボタン]の[ワークスペース・コンテンツを使用したアプリケーションのデプロイ]をクリックしてしばらく待ち、その3つ右の[アプリケーションURLを開く]アイコンをクリックすると、以下のような画面で実行結果のWeb画面が表示されるはずです!

bm_result


上記を一度やっておけば、Eclipseでソースを変更・コミットして、クラウドのGitにプッシュして、すぐにサーバーの上で稼動できるので、本当に開発と実行環境を統合したDevOps環境の出来上がりですね!

=> 次は上記を発展させて、Ajaxを活用し画面をダイナミックに変更するサンプルです

=> Node.jsとは何? まず仕組みを理解したい場合はこちら

Bluemixで動く クラウド開発環境 簡単サンプル

 

=> 以下の記事は新しく更新し、こちらに引っ越しました!

 

Bluemixとは、IBM が提供するソフトウェア込みの クラウド環境、つまり PaaS です。これが、ローカル環境を一切使わず アプリ開発できる クラウド開発環境ということなので、どういう事かやってみました。
最近は複数PCを使っていたり、タブレット を使う時間も増えているので、クラウド開発環境 があれば確かに便利かもです。

Bluemixの無料試用登録

Bluemix は 30日間は無料で使えるので、まず以下の入り口画面に入り、右上の[登録]ボタンから無料ユーザーIDを取得します。

https://console.ng.bluemix.net/       (トップのイメージ)

すると以下の登録(Register)画面になるので、アスタリスク(*)付きの必須項目に入力します。Security Questionは、「高校」とかにして、その右に高校名を入れるといった感じです。

bm00_register


Bluemixのログインとセットアップ

そこで入力したe-mailアドレスと、指定したパスワードがIBM IDになりますので、それで Bluemix にサインイン(ログイン)します。すると以下のような「ダッシュボード」が表示されます。Bluemix のクラウド環境を構成する場合は、必ずこの画面から実施します。

bm01_select

下にスクロールすると、[アプリケーション]のところに、[+ アプリの作成] という四角がありますので、ここをクリックします。bm02_apl+

すると以下のように、[WEB] と [モバイル] を選択する画面が出てきます。何と、これだけでどちらかの環境が自動的に構成されます。(これは素晴らしい) [WEB] をクリックしてブラウザ用アプリを作りましょう。
bm03_web

次に、まずどのサービス(ソフトウェア)の上でプログラムを動かすか聞いてきますので、一番簡単な、Node.js を選びましょう。[SDK for Node.js] というのがソレです。js とは JavaScriptのことで、言語としては JavaScript がクラウド側で動かせるようになります。[続行] ボタンで次に進んでください。

bm05_nodejs

次に、新規作成するアプリの名前を入力します。以下の [アプリ名] のところに自由な名前を入れることができますが、既存の名称と重複すると再入力になるので、重複しないように名前を入れます。(この名称がURLになるため)
私は 「BMSample」 にしましたが、これとは違う名前にしてください。入力し、Enterを押したらすぐにアプリケーション環境が起動します。
bm04_aplname

すると、以下のような開発環境を選択する画面が表示されます。一番右の [GIT] を選んでみましょう。ローカルPC環境でなく、クラウド上で開発することができます。
bm06_git

下にスクロールして、[アプリの概要の表示] ボタンを押してください。
bm07_git2

すると以下のような「アプリの概要」の画面になり、既に自分で追加したアプリケーションがクラウド上で稼動しているのが確認できます。右に [アプリは稼動しています] とありますよね。
bm05_2_addGit


Bluemix開発環境: DevOpsサービスのセットアップ

次に、開発環境を作成します。上の画面の右上に、[GITの追加] がありますので、そこをクリックしてください。すると、以下のように Jazz ID でのログイン画面が表示されます。Jazz IDを既に持っている場合は入力し、持っていない場合は別途取得してからこの画面に戻ってきてください。(以下のURLで簡単に取得でき、後からBluemixのIDと統合できます)

Jazz IDの取得: https://jazz.net/wiki/

bm08_jazzid

以下の画面が表示されたら、[リポジトリにスターター・アプリケーション・パッケージを取り込み・・・] にチェックがされていることを確認の上、[続行] ボタンを押してください。チェックされていると、サンプルコード等が一緒に取り込まれます。
bm09_gitrepo

Gitリポジトリを作るのに少し時間がかかるため、待ちます。Gitリポジトリはソースコードを置く場所のことです。普通自分のPCにソースコードを置いて、それをEclipse等で編集してプログラムを作成しますが、クラウド上のGitリポジトリにプログラムを置き、そのままクラウド上で編集・稼動させることができるようになります。
ちなみにJazzは、そういったソースコードを共有しながら複数の人で共同開発するための環境です。

[正常に終了しました] と表示されると、以下の [アプリの概要] に戻れます。右上に[GIT URI: xxxx] と、 [コードの編集] が表示されるようになります。GIT URLがソースコードの置かれる場所のアドレスになります。右の [コードの編集] をクリックして、クラウド開発環境である Web IDE 環境に入りましょう。
(このGIT URLでDevOpsのコード編集画面に直接ジャンプできますので、このURLをブックマークしておいてください)

bm09_2_editCode


Node.jsサンプルを変更して稼動確認

すると以下のようなブラウザ上の統合開発環境、Web IDE(統合開発環境)が表示されます。Eclipse Orionプロジェクトで開発されている、Webブラウザだけで動く統合開発環境ですね。左のツリーの [views]フォルダーから、[body.jade] を選択してみてください。右にソースコードが表示されます。

そのソースコードの 11行目は、以下のようになっていると思います。

h1 Hi there!

この後ろに以下のように、「こんにちは!」 と入力して以下のように変更してみましょう。(下のイメージは変更後)

h1 Hi there! こんにちは!

変更したら、左にある、[ファイル] メニューを開いて、[保存] をクリックして保存しましょう。

bm010_edit_save

以下のようにメニューバーのやや右にある [▶] をクリックして、「このアプリケーションを再度デプロイ」 してください。サーバーが一度停止し、再起動します。(このボタンが無かったら、右上の[Build&Deploy]をクリックしてから戻ってください)
しばらく時間がかかりますが、[実動の実行中] の緑の表示に変わったら、再度実行可能になります。

bm011_redeploy

次に、この変更したプログラムを実行してWeb画面に結果を表示しましょう。先ほどの2つ右のアイコンをクリックし、「URLを開く」 を実行します。
bm011_2_openURL

すると、以下のように自分で入力した 「こんにちは!」 が、画面に追加されているはずです!これで自分で変更したアプリがクラウド上で動いたことが確認できます。
bm012_result1

ブラウザに表示される URL も、以下のように自分が指定したアプリ名称のURLになっていることが確認できます。

https://bmsample.mybluemix.net/

これは自分のPCではなく、既にクラウドで動いているため、どのPCのブラウザからでもこのURLを入力すれば画面を見ることができます。

次にもう少し編集してみましょう。以下の2行を、それだけ残して後は削除するか、その下のイメージのように行の先頭に 「//」 を入力しコメントアウトすることで実行しないようにしてください。

body
h1 こんにちは!

bm013_edit2

そして再度保存し、「このアプリケーションを再度デプロイ」 と、「URLを開く」 を実行すると、以下のように表示されるはずです!

bm014_result2

後は自分の好きに編集してみてください!

クラウド上の開発環境、面白いですね。
Web IDEなどこのブラウザ上の開発環境は、IBM DevOps Services (IDS) と呼んでいるようですが、まさにクラウド開発したものをすぐに同じクラウドで動かす 「DevOps」 環境ですね!

決して反応は速くはありませんが、気軽に何か作って動かしてみるには、いろんな端末から使えるので便利そうです。


=> Eclipseを使ってBluemixの開発をするための手順

=> Node.jsとは何? まず仕組みを理解しよう

=> Bluemixについての紹介資料

 

サイトの作り方6) -Googleと情報共有して SEO対策 編

Webサイト を作ったからには、たくさんの人に見ていただきたいわけで、そのためには Google の検索結果の上位にリストされたいというのは皆同じですよね。そのためには Googleさん と 情報共有 することが大切だと思っています。つまり、こちらの情報を提供して、Google からもこちらをどう見ているか情報を提供してもらうことですね。それを気長に続けることが、検索エンジン最適化 SEO: Search Engine Optimization につながると思います。

そうはいえ、最低限やるべき事はありまして、おすすめはWordPress で何らかの SEO プラグイン を利用することです。WordPress も SEO対策 は良くできていると思いますが、さらに SEOプラグイン を使うといろいろ教えてくれます。私は「Yoast WordPress SEO」を使っています。このような基本的な対策を行うことで、以下の基本が分かってきます。

  • まずそのページがどのような用語で検索されるかを想定
  • その用語が、タイトルやURL、本文に多く出てくると検索されやすくなる
  • 従ってURLは文字のパーマリンクで、検索して欲しい文字を入れた方が良い
  • タイトルの文字数は少ない方が良い。多いと1単語の重みが減り、検索結果も尻切れになってしまう
  • Googleに自分のサイトマップを登録し、自分のサイトを検索してもらい易くする
  • 他のサイトのページからリンクしてもらう

いずれも重要ですが、おそらく一番努力すべきは、最後の他からリンクをしてもらうことです。ただこれは、お金を払って多数リンクしてもらうようなバレバレな事をすると逆効果のようです。

もう一つ自分でやるべき事は、Googleへのサイトマップの登録です。Googleに自分のサイトの最新状況をお知らせすることで、検索エンジンが見回る(クロールする)際に最新のページも認識してくれます。

私はWordPressの「Yoast WordPress SEOプラグイン」を導入しているので、その[SEO][XMLサイトマップ]メニューから入り、まず「XML サイトマップの機能を有効にするには、このチェックボックスをオンにします。」のチェックボックスをチェックしました。その下の[XMLサイトマップ]のボタンを押すと、作成されたサイトマップ(とその目次のインデックス)を見ることができます。要するに、このWebサイトにどんなページが存在するかのリストです。最後の「変更を保存」ボタンで保存することでページが追加されれば自動的にサイトマップをGoogleやYahooに通知することができます。

次はそのサイトマップをGoogleに登録します。
https://www.google.com/webmasters/tools/home?hl=ja からGoogle ウェブマスター・ツールに自分のGoogle IDでログインしてください。[サイトを追加]などで自分のドメイン名(URL・・・私は touchstone.jp )を入力すると、自分のサイトである事の確認に入ります。「メタタグ(HTMLタグ)を使用して確認できませんでした」 といったメッセージが表示されます。[おすすめの方法]でHTMLファイルを送付する方法もありますが、私は[別の方法]タブの[HTMLタグ]で選びました。すると、以下のようにメタタグ(HTMLタグ)が画面に表示されるため、その部分をコピーして、自分のサイトのホームページの<head>セクション内に貼り付けます。

webmaster metatag

具体的には、Yoast WordPress SEOを使っている場合は、[SEO][ダッシュボード]のGoogleウェブマスターツールに指定します。もしくは、[外観][テーマの編集]にある、ヘッダー(header.php)の、</header> の直前にコピーし、[ファイルを更新]しても可能です。更新後、ウェブマスターのページに戻り、[確認]ボタンを押して確認できれば、仕込みは完了です。複数のドメインを持っている場合は、Google ウェブマスター・ツールの[ホーム]でサイトを追加できます。

ウェブマスター・ツールの、それぞれのサイトの[サイトのダッシュボード]にある[クロール]の[サイトマップ]で、サイトマップのGoogleによる解析を確認できます。サイトマップがまだ追加されていない場合は、右上の[サイトマップの追加/テスト] ボタンで追加します。ボタンを押すと、URLを入力するボックスが表示されますので、そこでサイトマップやサイトマップ・インデックスのXML名を入力してください。私の場合、Yoast WordPress SEOで作成したサイトマップ・インデックス、「sitemap_index.xml」を入力しサイトマップをテストしました。同様に[サイトマップを送信]するとそのサイトマップがGoogleに送信され、画面をリフレッシュすると。サイトマップがリストされるようになります。これでGoogleに自分のサイトの現在の内容を共有することができました。

webmaster sitemap

以下のように、[クロール]の[クロールの統計情報]でどの程度のページがGoogleクロールでチェックされているか、わかります。

webmaster analytic

ウェブマスター・ツールの[検索トラフィック]の[検索クエリ]で、どのページが何度検索で表示され、その中で何回クリックされたかを確認することができます。これで自分のサイトがどのように検索され、どのようにアクセスされているか、一目瞭然ですね。このサイトは、「oneshopmobile」 に関する検索が一番多かったです。皆さん、oneshopmobile でネット注文するとどうなりそうか、人の経験が知りたいようです。

webmaster_query

また、Googleアナリティックスを使うことで自分のサイトの分析をしてもらうこともできます。
http://www.google.com/intl/ja/analytics/premium/ のURLに自分のGoogle IDでログインすることで簡単に利用可能です。ウェブマスターと同様に、各ページのヘッダーにメタタグを挿入することで、サイトへのユーザーのアクセス状況などを確認することができます。[レポート]で以下のような利用状況を見ることができます。

google_analytics_report

一連の流れをやっていて思ったのは、要するにGoogleの検索エンジンで上位に表示してもらうということは、Googleと仲良くしてもらえるようこちらも情報提供するということですね!


サイトの作り方5.1) -アフィリエイトの広告例

アフィリエイトの広告例

Google AdSense:
上のタイトル下 (320×50)
左サイドバー上 横長カスタム(200×60)
左サイドバー下 レスポンシブ(動的サイズ)
本文下 (336×280)

Amazon広告ランキング (パソコン・周辺機器)固定タイプ (468×60)

Amazon広告ランキング (家電・カメラ)可変タイプ (240×100の2×2)

Amazon広告ランキング (本)可変タイプ (240×100の1×2)

Amazon広告ランキング (洋書)可変タイプ (240×100の1×2)

以下は、楽天モーション・ウィジット(A8より)

総合・画像タイプ(468×60):

総合・画像タイプ(468×160):

商品ランキング 総合(468×60):

楽天ゴルフ(234×60)

楽天カード(234×60)

楽天トラベル

楽天トラベル(468×60)

るるぶトラベル(224×33)

JTB(468×60)

一休(468×60)

エクスペディア(468×60)

ShutterShock(728×90)

楽天ペット専用ホテル


楽天トラベル(234×60)


エクスペディア(234×60)


るるぶ(234×60)


JTB(234×60)


楽天ペットホテル(縦長)


楽天ゴルフ


楽天カード


楽天ショッピング(234×60)


はりっぱ旅行(1×5)



エックスサーバー 234×60


A8(234×60)


A8(190×80)


エックスサーバー(200×200)


画像素材 250×250