HTML5・CSS3フレームワークのまとめ情報

bootstrap vs foundation

Twitter Boostrap  VS Foundation
    (copyright  abetteruserexperience.com )

本日はお勧めのHTML5・CSS3 レスポンシブWEBデザインのフレームワークを紹介したいと思います。

上記フレームワークの特徴

  1. 無償提供
  2. 実装が楽
  3. githubで一般公開
  4. レスポンシブ
  5. ほとんどのブラウザー・OSに対応
  6. 便利なjavascriptライブラリーが入っている
  7. カスタマイズ可能

Foundation入門(日本語)
http://www.yuguri.com/2013/03/04responsive_foundatio/

Boostrap入門(日本語)
http://matome.naver.jp/odai/2133117623223774701

両フレームワークの比較記事(英語): 
http://abetteruserexperience.com/2013/05/twitter-bootstrap-vs-foundation-4-which-one-is-right-for-you/

by johann

広告

グーグル、Android OS断片化の拡大防止のため、SDKに新たな利用条件を設定

Android OSの使用許諾条件が変更されたようです。

この変更により多くの携帯メーカーは工夫が必要になるでしょう。

また、開発者に取ってはAndroid OS搭載の Chrome互換問題から開放されるでしょう。

 米国Googleは11月13日、Android 4.2(開発コード名Jelly Bean)および開発者向けのAndroid 4.2 SDK(ソフトウェア開発キット)をリリースしたが、それに伴いSDKの使用許諾の内容を拡大し、Android OSの断片化につながるような行為を禁止する事項を盛り込んだ。

 Android端末用のアプリを開発するためには、Google Android SDKの使用許諾条件に同意しなければならない。

 2009年4月にリリースされていた旧バージョンのサービス利用規約には含まれていなかった、今回追加された部分は以下の通りだ。

 「Android の断片化を生じるような行為はしないことに同意する。これには、公式なSDKから派生するソフトウェア開発キットの作成や作成への参加および配布を含むが、これに限定するものではない」

http://m.computerworld.jp/topics/576/205538

擬似個人情報(テストデータ) を作成するサービスの紹介

こんにちは、システム開発で工数のかかる作業の1つにテストデータの作成があります。

テストの種類にもよりますが、それらしいデータでなければテストが意味を成さないことが多々あります。

(この場合の意味を成さないとは、限界値等のバリデーションのことをさします)

そんな時に便利なツールを紹介します。

  1. なんちゃって個人情報 http://kazina.com/dummy/
  2. 疑似個人情報データ生成サービス http://hogehoge.tk/personal/

参照元はhttp://blog.satt.jp/article/314767109.htmlです。

※注意 サイトにもありましたが、完全ランダムみたいですので、たまたま名前が実在の人物と同姓同名になったり、電話番号が偶然実際に使われている物と同じになる場合があります。

by Saito

Javascritpで多言語対応

こんにちは、今日は『Javascriptでの多言語対応方法』についてまとめておきます。

一般的には下記の方法が使用されると思います。

<h2>サーバ再度でメッセージを管理</h2>

<h5>日本語の場合</h5>

<pre>&lt;script> 

  var messages = {};  

message.loading = ‘ロード中’;  

message.error = ‘エラーが発生しました。

‘; &lt;/script>

</pre>

<h5>英語の場合</h5>

<pre>&lt;script>  

var messages = {};  

message.loading = ‘now loading’;  

message.error = ‘error was occuerd’;

&lt;/script>

</pre>

上記の用に記述して、サーバ再度で保持しているユーザの言語設定やGETパラメタを利用したりします。 また、管理上下記のように利用したほうが便利です。

<h5>フォルダで管理</h5>

<pre>&lt;script type=”text/javascript” src=”/messages/ja/message.js” /> </pre>

<h5>ファイルで管理</h5>

<pre>&lt;script type=”text/javascript” src=”/messages/ja.js” /> </pre>

<h2>Javascriptでメッセージを管理</h2>

メッセージオブジェクトに階層を持たせて

<pre> var messages = {}; messages.ja = {}; messages.en = {}; </pre>

で使用するときに <pre> var useMessages = messages[‘ja’]; </pre>

こんな風に使ってみたり。 if分岐やscriptタグのsrcタグ属性で振り分けたり

下記の用にしたりする方法もあるようです。

<pre>

var LANGUAGE = ‘en’;//デフォルト設定

var s = document.getElementsByTagName(‘script’); for(var i =0,len = s.length;i<len;i++){   if(s[i].src.indexOf(‘hoge.js?’) > 0){

    var tmp = s[i].src.splite(?)[1].splite(‘&’);

    for(var j = 0,leng = tmp.length;j<leng;j++){

      var tmp2 = tmp[j].splite(‘=’);

      if(tmp2.length == 2 && tmp2[0] == ‘lang’) LANGUAGE = tmp2[1];

    }

  } } var useMessages = messages[LANGUAGE];

</pre>

<h2>(<a href=”http://ja.wikipedia.org/wiki/%E5%9B%BD%E9%9A%9B%E5%8C%96%E3%81%A8%E5%9C%B0%E5%9F%9F%E5%8C%96” title=”国際化と地域化” target=”_blank”>i18n</a>のための)jqueryを利用する</h2>

<strong>個人的には管理上この方法を利用することが最も良いと思います。 </strong>

<h5>利用方法</h5>

<ul>  

<li>下記のリンクから”jQuery.i18n.properties” をダウンロードします。</li>

<a href=”http://codingwithcoffee.com/?p=272” title=”codeing with coffee” target=”_blank”>jQuery.i18n.properties</a>

 <li>Messages.propertiesを用意します。</li>

Messages.propertiesを言語に応じて用意します。(ここでは一般的なものと日本語を用意します) <strong>Messages.properties(一般的に利用される)</strong>

 <pre># This line is ignored by the plugin MSG_HELLO = Hello MSG_COMPLEX = Hey, {0} </pre>

<strong>Messages_ja.properties(日本語に利用される)</strong>

 <pre> # This line is ignored by the plugin MSG_HELLO = こんにちわ MSG_COMPLEX = やあ、{0} </pre>  

<li>リソースファイルを任意のフォルダに保存します(ここでは /i18n/におきます。)</li>

 <li>ヘッダに”scriptタグ” を追加する</li>

<pre>

&lt;script src=”/js/jquery-1.5.1.min.js” type=”text/javascript”>

&lt;/script> &lt;script src=”/js/jquery.i18n.properties.js” type=”text/javascript”

>&lt;/script>

 </pre>

 <li>Javascriptを記述する</li>

<pre>

jQuery.i18n.properties({

   name: ‘Messages’,

   path:’/i18n/’,

   mode:’both’

          callback: function() {

               alert(MSG_HELLO);

               alert(MSG_COMPLEX(‘John’));

          } });

 </pre>

以上で『jQuery.i18n.properties』の使い方は終わりです。

by Saito

<h2>引用</h2>

<ul>

<li>

<a href=”http://dev.chrisryu.com/2007/12/multi_language_by_javascript.html” title=”JavaScriptの多言語対応の方法についてぼんやり考えてみた” target=”_blank”>JavaScriptの多言語対応の方法についてぼんやり考えてみた</a>

</li>

<li>

<a href=”http://d.hatena.ne.jp/shinobu_siv/20110326/1301164497” title=”しのぶの日記 (技術編)” target=”_blank”>javascriptで国際化(多言語対応)</a>

</li>

</ul>

pgpool-IIの環境構築

こんにちは、LAMPでpgpool-IIの構築をしようとしたら思いのほか最新版かつ一貫した内容のブログが無かったので、インストール手順を残しておきます。

環境

OS: CentOS 6.3 (64 bit)
Postgres: pgsql-9.1
pgpool: pgpool-II-91

手順

操作は「リポジトリアップデートをするだけ!」なので非常に簡単です。

    1. リポジトリの更新

# wget http://yum.postgresql.org/9.1/redhat/rhel-5-x86_64/pgdg-centos91-9.1-4.noarch.rpm
# rpm -ivh pgdg-centos91-9.1-4.noarch.rpm
# yum check-update

    1. PostgreSQLのインストール

・準備
# groupadd -g 1003 post
# useradd -g post -u 1003 postgres -d /home/postgres -s /bin/bash
# passwd postgres
[postgres]

・メモリー、スワップ領域の確認(16MB以上)
# grep MemTotal /proc/meminfo

・ディスク領域の確認(要件は約150MB)
# df -h

・OSの確認(要件は2.6.9 以上)
# uname -r

・インストール
# yum install postgresql91-server

・初期化
# service postgresql-9.1 initdb
→データベースを初期化中: [ OK ]

・動作確認
# service postgresql-9.1 start
→postgresql-9.1 サービスを開始中: [ OK ]

・postgresの動作確認
# su – postgres

# l
→データベースのリストが表示さればOK

# q
→ちゃんと外に出ましょう。

    1. pgpool-IIのインストールと設定

# yum install pgpool-II-91

・設定
# cp /etc/pgpool-II-91/pgpool.conf.sample-replication /etc/pgpool-II-91/pgpool.conf
# vi /etc/pgpool-II-91/pgpool.conf
++ ackend_hostname0 = ’192.168.0.3′
# Host name or IP address to connect to for backend 0
++ backend_port0 = 5432
# Port number for backend 0
++ backend_weight0 = 1
# Weight for backend 0 (only in load balancing mode)
++ backend_data_directory0 = ‘/opt/PostgreSQL/9.1/data’
# Data directory for backend 0
++ backend_flag0 = ‘ALLOW_TO_FAILOVER’
# Controls various backend behavior
# ALLOW_TO_FAILOVER or DISALLOW_TO_FAILOVER
++ backend_hostname1 = ‘host2′
++ backend_port1 = 5432
++ backend_weight1 = 1
++ backend_data_directory1 = ‘/data1′
++ backend_flag1 = ‘ALLOW_TO_FAILOVER’

++ load_balance_mode = on
++ log_statement = true

・プロセスID生成ディレクトリの設定(インストール時にディレクトリ指定をしていない場合は作って下さい)
# mkdir /var/run/pgpool/
# chown postgres /var/run/pgpool

・認証設定(※Postgresの認証が”trust”だとNGなので、”passwd”に変更します。ちゃんとレプリケーションしている全てのPostgresの設定を行います)
# cp /usr/pgsql-9.1/share/pg_hba.conf.sample /usr/pgsql-9.1/share/pg_hba.conf
# vi /usr/pgsql-9.1/share/pg_hba.conf
内容は適宜記載して下さい。
こちらのページが参考になります。

・pgpoolをpostgres権限で起動するための権限設定
# chown postgres /etc/pgpool-II-91/pool_passwd

・動作確認
# pgpool -n >> /home/postgres/pgpool.log 2>&1 &
# tail /home/postgres/pgpool.log
→ LOG: pid 26526: pgpool-II successfully started. version 3.1.3 (hatsuiboshi)
このようなメッセージが表示されれば正常に動いています。

    1. psqlより動作確認

$ psql -h localhost -p 9999 -U postgres
Password for user postgres:
↑のように表示され、DBに対して操作が行えれば、終了です。

<h3>参考文献</h3>

<ol>

 <li>リポジトリの更新- こちら</li>

<li>Postgresのインストール要件・設定- こちら</li>

<li>pgpool-II導入ガイドIBM- こちら</li>

<li>Welcome to pgpool -II page- こちら</li>

<li>エスキュービズム ラボ Blog- こちら</li>

<li>kunikuの日記- こちら</li>

</ol>

by Saito

 

Node.js入門: hello world 出力

nodejs

Wikiから

Node.js はイベント化された入出力を扱うUnix系プラットフォーム上のサーバーサイドJavaScript環境である(V8 JavaScriptエンジンで動作する)。Webサーバなどのスケーラブルなネットワークプログラムの記述を意図している。

☆☆インストール手順はコチラ☆☆

まずは httpライブラリーを変数に入れます。

var http = require('http');

httpのcreateServerメッソードを読んで、パラメターとして匿名変数を入れておきます。

この変数の中にres(レスポンス)パラメターのwriteHeadメッソード(ヘッダー設定)とendメッソード(コンテンツ+出力)を呼びます。

最後にhttpオブジェクトのlistenメッソードでポートを設定しました(1337);

http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(1337, '127.0.0.1');

フールソースコード(index.js)

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(1337, '127.0.0.1');

nodeで実行する:

node index.js

ブラウザでアクセスしてみます! http://127.0.0.1/1337

By johann