2010/06/30

ブラウザ三国志GreasemonkeyスクリプトMap-StarをChrome対応させてみた(1)

http://d.hatena.ne.jp/romer/20100201で公開されているMap-StarをChrome対応させてみました。以下のコピーして3gokushi-mapstar-chrome.user.jsなどのファイル名を記載して保存します。そのファイルをブラウザで読み込めばインストールされると思います。

追記:配下同盟対応版はこちら
// ==UserScript==
// @name  3gokushi-MapStar-Chrome
// @namespace  3gokushi
// @description ブラウザ三国志のマップに★の数を表示します。Chrome対応版。
// @include http://*.3gokushi.jp/map.php*
// ==/UserScript==

var LOCAL_STORAGE = "bro3_mapstar";

//main
(function(){
//window.addEventListener("load",function() {
initGMWrapper();


 GM_VAL_PREFIX = "GMMS_";

 /**
  * 設定データ初期化
  */
 var dataTable = new Array();
 dataTable["w"] = new Array("#FFFFFF", "#000000", GM_getValue(GM_VAL_PREFIX
   + "w", true)); // white
 dataTable["r"] = new Array("#FF0000", "#FFFFFF", GM_getValue(GM_VAL_PREFIX
   + "r", true)); // red
 dataTable["g"] = new Array("#00FF00", "#000000", GM_getValue(GM_VAL_PREFIX
   + "g", true)); // green
 dataTable["b"] = new Array("#0000FF", "#FFFFFF", GM_getValue(GM_VAL_PREFIX
   + "b", true)); // blue
 dataTable["y"] = new Array("#FFFF00", "#000000", GM_getValue(GM_VAL_PREFIX
   + "y", true)); // yellow
 dataTable["p"] = new Array("#FF00FF", "#FFFFFF", GM_getValue(GM_VAL_PREFIX
   + "p", true)); // pink
 dataTable["bk"] = new Array("#000000", "#FFFFFF", GM_getValue(GM_VAL_PREFIX
   + "bk", true)); // black
 dataTable["bg"] = new Array("#0066FF", "#FFFFFF", GM_getValue(GM_VAL_PREFIX
   + "bg", true)); // skyblue

 /**
  * 設定on/off処理関数
  */
 function onSettingClick() {
  var key = this.getAttribute("type");
  var gmv = GM_getValue(GM_VAL_PREFIX + key, true);
  GM_setValue(GM_VAL_PREFIX + key, !gmv);

  var clsName;
  var displayVal;
  if (gmv) {
   clsName = "off";
   visibleVal = "hidden";
  } else {
   clsName = "on";
   visibleVal = "visible";
  }

  var XPath = '//div[@class="mapStar_' + key + '"]';
  var list = document.evaluate(XPath, document, null,
    XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

  for ( var i = 0; i < list.snapshotLength; i++) {
   list.snapshotItem(i).style.visibility = visibleVal;
  }

  XPath = '//div[@type="' + key + '"]';
  document.evaluate(XPath, document, null,
    XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.firstChild.className = "outer "
    + clsName;

 }

 /**
  * 設定ボックスの挿入
  */
 var insset = document.getElementById('mapboxInner');

 if (insset != null) {

  var html = "\
     <style>\
     .outer{ width:10px;height:10px;margin:2px 4px 2px 0px;float:left;border:1px solid #000000;cursor:pointer; }\
     .on{ filter:alpha(opacity=100);-moz-opacity:1;opacity:1; }\
     .off{ filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;border:1px solid #999999; }\
     </style>\
     <div style='background-color:#ffffff;'> </div>";

  var set = document.createElement('div');
  set.innerHTML = html;
  insset.appendChild(set);

  for ( var key in dataTable) {
   var onoff = dataTable[key][2] ? "on" : "off";
   html = '<div class="outer ' + onoff + '" style="background-color:'
     + dataTable[key][0] + ' ;"> </div>';

   var setItem = document.createElement('div');
   setItem.innerHTML = html;
   set.appendChild(setItem);

   setItem.setAttribute("type", key);
   setItem.addEventListener("click", onSettingClick, false);
  }
 }

 /**
  * MAPサイズ取得
  */
 var mapSize = document.getElementById('rollover').style.zIndex - 1;

 /**
  * 地図データの取得
  */
 var mapMap = new Array(mapSize + 1);
 var mapAreaDoc = document.getElementById('mapsAll');
 var imgRegCmp = new RegExp(/img\/panel\/[^_]*_([^_]*)_/);

 var imgMap = mapAreaDoc.getElementsByTagName('img');
 for ( var i = 0; i < imgMap.length; i++) {
  var clstxt = imgMap[i].className;
  if ((clstxt != null) && (clstxt.search(/mapAll(\d+)/) != -1)) {
   var mapIndex = RegExp.$1 - 0;
   var imgSrc = imgMap[i].src;
   if (imgRegCmp.exec(imgSrc)) {
   var imgRegCmp = new RegExp(/img\/panel\/[^_]*_([^_]*)_/);
    mapMap[mapIndex] = RegExp.$1;
   } else if (0 <= imgSrc.indexOf("blanc")) {
    mapMap[mapIndex] = "wall";
   }
  }
 }

 /**
  * 地図へ埋め込み
  *
  */
 var areas = mapAreaDoc.getElementsByTagName('area');

 // mapSizeからzIndexの値とmarginSizeを決定する
 var marginSize = "32px 0px 0px 23px";
 var zIndex = mapSize + 2;
 if (200 < zIndex && zIndex < 400) {
  marginSize = "25px 0px 0px 17px";
 } else if (400 <= zIndex) {
  marginSize = "16px 0px 0px 12px";
 }

 var regCmp = new RegExp(
   /(\'[^\']*\'[^\']*){5}\'(\u2605+)\'.*overOperation\(\'.*\'.*\'(.*)\'.*\'(.*)\'/);
 var j = 0;

 var alpha = 6;
 for ( var i = 1; i < mapMap.length; i++) {
  if (mapMap[i] != undefined && mapMap[i] == "wall") {
   continue;
  }

  if (areas[j] == undefined) {
   break;
  }
  var mo = areas[j++].getAttribute('onmouseover');
  if (mo.search(/\u2605/) < 0) {
   continue;
  }

  if (regCmp.test(mo)) {
   var dataKey = (mapMap[i] == undefined) ? "w" : mapMap[i];
   var bg = dataTable[dataKey][0];
   var cl = dataTable[dataKey][1];

   if ( RegExp.$2.length < 1 ) {
    continue;
   }

   var div = document.createElement('div');
   if (!dataTable[dataKey][2]) {
    div.style.visibility = "hidden";
   }

   if (bg != null) {
    div.style.backgroundColor = bg;
   }

   if (cl != null) {
    div.style.color = cl;
   }

   div.className = "mapStar_" + dataKey;
   div.style.left = RegExp.$3;
   div.style.top = RegExp.$4;
   div.style.position = "absolute";
   div.style.width = "8px";
   div.style.height = "8px";
   div.style.margin = marginSize;
   div.style.padding = "0px 0px 2px 3px";
   div.style.zIndex = zIndex;
   div.style.fontSize = "8px";
   div.innerHTML = RegExp.$2.length;

   if (RegExp.$2.length >= 6) {
    div.style.border = "1px solid";
   }
   if (RegExp.$2.length >= 4) {
    div.style.fontWeight = "bold";
   }

   div.style.filter = 'alpha(opacity=' + (alpha * 10) + ')';
   div.style.MozOpacity = alpha / 10;
   div.style.opacity = alpha / 10;

   mapAreaDoc.appendChild(div);
  }
 }
//},false);
})();

//Google Chrome用GM_*系ラッパー関数
function initGMWrapper() {
  // @copyright   2009, James Campos
 // @license  cc-by-3.0; http://creativecommons.org/licenses/by/3.0/
 if ((typeof GM_getValue == 'undefined') || (GM_getValue('a', 'b') == undefined)) {
  GM_addStyle = function(css) {
   var style = document.createElement('style');
   style.textContent = css;
   document.getElementsByTagName('head')[0].appendChild(style);
  }

  GM_deleteValue = function(name) {
   localStorage.removeItem(LOCAL_STORAGE + "." + name);
  }

  GM_getValue = function(name, defaultValue) {
   var value = localStorage.getItem(LOCAL_STORAGE + "." + name);
   if (!value)
    return defaultValue;
   var type = value[0];
   value = value.substring(1);
   switch (type) {
    case 'b':
     return value == 'true';
    case 'n':
     return Number(value);
    default:
     return value;
   }
  }

  GM_log = function(message) {
   console.log(message);
  }

  GM_registerMenuCommand = function(name, funk) {
  //todo
  }

  GM_setValue = function(name, value) {
   value = (typeof value)[0] + value;
   localStorage.setItem(LOCAL_STORAGE + "." + name, value);
  }
  
  //by froo
  GM_listValues = function() {
   var res = new Array();
   for (var i = 0; i < localStorage.length; i++) {
    var key = localStorage.key(i);
    if (key.indexOf(LOCAL_STORAGE + ".", 0) == 0) {
     res.push(key.replace(/^.*?\./, ""));
    }
   }
   return res;
  }
 }
}
何か問題点があれば連絡ください。ファイル保存はUTF8形式でお願いします。
もちろん自己責任でお願いします。

Javascriptで要素を取得する方法

JavaScriptで要素を取得する方法のメモ


・DOM
idから検索 document.getElementById()
タグから検索 document.getElementsByTagName()
CSSのクラスから検索 document.getElementsByClassName() - IE等では使えない

取得した中身は配列として扱う
ただし入り組んだデータを取得するのは結構めんどい

・XPath
idから検索 document.evaluate('id("...")')
タグから検索 document.evaluate('.//div')
CSSのクラスから検索 document.evaluate('.//div[@class="..."]')
var xpathResult = document.evaluate(xpathExpression, contextNode, 
            namespaceResolver, resultType, result );
引数は下記の5つ
xpathExpression:XPath
contextNode:(HTMLなら基本documentで。)
namespaceResolver:基本null
resultType:戻り値の型の指定
result:基本null

resultType(戻り値の型)指定は次の通り
0 ANY_TYPE
1 NUMBER_TYPE - 倍精度浮動小数点数 (double)
2 STRING_TYPE - 文字列
3 BOOLEAN_TYPE - 真偽値
4 UNORDERED_NODE_ITERATOR_TYPE
5 ORDERED_NODE_ITERATOR_TYPE
6 UNORDERED_NODE_SNAPSHOT_TYPE
7 ORDERED_NODE_SNAPSHOT_TYPE
8 ANY_UNORDERED_NODE_TYPE
9 FIRST_ORDERED_NODE_TYPE


6~7で取得した中身にはsnapshotプロパティでアクセスする


無名関数の基礎

Javascriptの基本として関数を宣言して実行するのが通常のフローですが無名関数を使いその場で実行することもできます。

(function(){
処理を記載
})();


()の中に無名関数を入れて、その後();で実行します。関数に変数を使わないし、ライブラリの重複、定義と実行を分けないで良いので簡単な処理を書くときに便利です。

2010/06/29

TomblooでYoutubeにポストエラー

Tomblooは数クリックでTumblrなどにポストできるアドオンです。非常に便利なのですが、Youtubeの画面仕様の変更でエラーが出るようになりました。対応方法がhttp://d.hatena.ne.jp/tondol/20100402/1270206802
にありましたので対応したところ無事動きました。

追記としては該当ファイルの場所ですが下記の場所ににあります。
macでは
/Users/ユーザー名/Library/Application Support/Firefox/Profiles/XXXXX.default/extensions/tombloo@brasil.to/chrome/content/library

winでは
C:\Documents and Settings\ユーザー名\Application Data\Mozilla\Firefox\Profiles\XXXX.default\extensions\tombloo@brasil.to\chrome\content\library

書き換え後はブラウザーを再起動して下さい。

2010/06/26

CakePHPの初期設定

CakePHPは便利なフレームワークです。初期設定のデータベース設定の時に凡ミスをしていたのでメモしておきます。データベースの設定はデータベースを作成後、app/config/database.phpのファイルを設定すれば良いです。これをちゃんとやっているのにうまく接続できない場合はPHPがデータベース(MySQLなど)のdriverを持っているか確認しましょう。持ってなかった場合はインストール後、Apacheを再起動してください。

MySQLのユーザー管理コマンドまとめ

MySQLのユーザー管理コマンドをまとめておきます。

ユーザーの作成
GRANT 権限 ON *.* TO ユーザ名 IDENTIFIED BY 'パスワード' WITH GRANT OPTION;
ユーザーの確認
SELECT host,user FROM mysql.user;
パスワードの変更
SET PASSWORD FOR ユーザ名@"ホスト名"=password('変更後のパスワード');
ユーザーの削除
DELETE FROM mysql.user WHERE user='ユーザ名';

2010/06/22

MySQLのインストールと自動起動

MySQLのインストールと自動起動は基本ですが念のため。
yum -y install mysql-server
/etc/init.d/mysqld start
chkconfig --add mysqld
chkconfig mysqld on
chkconfig --list mysqld //確認

ついでにデータベースの作成と削除
CREATE database データベース名; //作成 
DROP databae データベース名;  //削除

テーブルの作成(CakePHPのチュートリアルから)
CREATE TABLE posts (
id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(50),
body TEXT,
created DATETIME DEFAULT NULL,
modified DATETIME DEFAULT NULL
);
テストデータ投入(CakePHPのチュートリアルから)
INSERT INTO posts (title,body,created)
VALUES ('タイトル', 'これは、記事の本文です。', NOW());
INSERT INTO posts (title,body,created)
VALUES ('またタイトル', 'そこに本文が続きます。', NOW());
INSERT INTO posts (title,body,created)
VALUES ('タイトルの逆襲', 'こりゃ本当に面白そう!うそ。', NOW());

2010/06/21

Dropboxを用いた開発環境

Dropboxを用いて開発環境を作ると便利です。ソースをそのまま突っ込んでもいいですがSubversionなんかを使っている場合はレポジトリをDropboxにしてしまう方法もあります。注意する点としては共有するマシン間でマシン名が異なるとディレクトリが異なるのでDropboxの初期設定から「Dropbox Folder Location」で名前を設定するとよいでしょう。レポジトリのURLはfile:///Users/設定名/Dropbox/SVNRepository みたいな感じになります。

2010/06/17

シェルスクリプトの書き方

サーバーメンテナンスなど定期的な処理は自動化しておくとミスも少なくなり便利です。基本的なシェルスクリプトの書き方をまとめておきます。


文章の頭には実行するための決まり文句を書きます。これは実行するファイルを指示しています。rubyやpythonであれば#!/bin/ruby、#!/bin/pythonなどと書きます。また指定位置は実行環境によって異なります。
#!/bin/sh 

次にファイルに実行属性をつけます。
$ chmod u+x ファイル名.sh 

あとはファイル内に命令を書き込むだけです。$で始まる文字列は変数として扱われます。条件分岐はif文、forループ、while文など使えます。
#!/bin/sh
TEST_TXT=/users/user/test.txt
TEST01=test01

echo replace test01.txt
cp ${TEST_TXT}.${TEST01} $TEST.TXT

あとは定期的に実行させるにはcrontabなどに登録しておけば良いです。
    下記コマンドにてcrontabの登録を行います。
    $ crontab -e
    
    設定項目は左から「分」「時」「日」「月」「曜日」となっています。
    下記の場合であれば毎月10日6時45分に実行されます。
    45 6 10 * * ファイル名
    
    「/」の後に実行したい間隔の値を設定することで、その間隔を設定可能。
    「-」で指定することで、実行範囲を設定可能。
    「,」で区切ることで、複数の値を設定可能。

    2010/06/16

    Mac Portのメンテナンスについて

    mac を使う時にパッケージ管理のためMac Portsを導入すると便利です。また定期的にメンテナンスをしましょう。メンテナンスコードは下記の通り。なおGemを使っている場合はそちらもついでに更新すると良いでしょう。


    $ sudo port -d selfupdate 
    $ sudo port upgrade installed 
    $ sudo gem update --system
    $ sudo gem update 


    追記:こっちの方が良いっぽい。
    $ sudo port -d selfupdate
    $ sudo port -v selfupdate //portの更新
    $ sudo port upgrade outdated //古いバージョンをアップデート
    $ sudo gem update --system
    $ sudo gem update
    

    2010/06/15

    Wordpressのインストールの仕方

    WordpressはCMSとして大変便利でサイト制作によく使われます。インストールの仕方も極めて簡単です。
    1. zip ファイルを空のディレクトリに展開します。
    2. WordPad などのテキストエディタで wp-config-sample.php を開き、データベースの接続情報 (データベース名、ユーザー名、パスワード、およびホスト名) を記入します。
    3. このファイルの名前を wp-config.php として保存します。
    4. すべてのファイルをアップロードします。
    5. /wp-admin/install.php をブラウザで開きます。これによりあなたのブログに必要なデータベースのテーブルが設定されるはずです。もしエラーが発生するようなら wp-config.php ファイルをもう一度確認し、再度このインストーラを試してください。それでも失敗する場合は、できるだけ多くのデータを集めてサポートフォーラムに行ってください。
    6. パスワードが自動的に生成され表示されます。これをメモしてください。
    7. その後、このインストールスクリプトはあなたをログインページに案内するはずです。ユーザ名 admin と、インストール中に生成されてメモしたパスワードを使ってログインしてください。このパスワードはログイン後、管理画面の「ユーザー」をクリックして変 更することができます。
    公式サイトより

    事前準備としてデータベースを用意しておく必要があります。データベースの作成の仕方は次の通り。


    mysql> CREATE DATABASE databasename;
    Query OK, 1 row affected (0.00 sec)
     
    mysql> GRANT ALL PRIVILEGES ON databasename.* TO "wordpressusername"@"hostname"
        -> IDENTIFIED BY "password";
    Query OK, 0 rows affected (0.00 sec)
      
    mysql> FLUSH PRIVILEGES;
    Query OK, 0 rows affected (0.01 sec)
    
    mysql> EXIT
    Bye

    簡単ですね。なれれば10分くらいでインストールできます。

    2010/06/14

    iPad,iPhoneと母艦(mac)間のファイル連携

    JailBreak後の対応限定ですが母艦(mac)とiPadのファイル連携についてまとめておきます。方法は3つあるそうです。
    • Netatalkインストール後、共有ファイル設定
    • OpenSSHインストール後、SCP などでファイルをアップ
    • DiskAidと言うツールを使う(シェアウェア)
    二つ目の方法を使うときのmac用のSCPソフトはCyberduckと言うものがあります。

    2010/06/13

    GAEで静的ファイルを表示させる方法

    静的ファイルhtdocsフォルダ以下に配置します。
    app.yamlに次のように追記します。
    - url: (.*)/
    static_files: htdocs\1/index.html
    upload: htdocs(.*)/index.html
    
    - url: /(.*)
    static_files: htdocs/\1
    upload: htdocs/(.*)
    
    
    ちなみに静的ファイルのみでも運用できます。

    2010/06/11

    MySQLのログファイルの管理について

    GAEを使っているとKey-Value Storeの方に慣れてしまいますが、MySQLのログを管理する機会があったのでまとめておきます。


    mysql-bin.xxxxxx
      レプリケーション設定のために保存される「mysql-bin.xxxxxx」ファイルが有りますが、この末尾の番号は世代管理になります。よってレプリケーションに必要な物は最新(番号が大きいもの)があれば問題ありません。


      ホスト名-slow.log
        実行に long_query_time 秒より長くかかった SQL コマンドがすべてログファイルに書き込まれるファイルです。パフォーマンスチューニングを行うときに参考になります。

        また、ログファイルは放っておくとどんどん肥大化していくので適宜ログローテートをした方が良いです。強制的にログファイルの入れ替えをするには下記のコマンドすれば良いです。


        mysql > FLUSH LOGS;
        


        ログデータは放置しておくと意外とストレージ容量を圧迫しますので、定期的に確認した方が良いでしょう。




        海外用のiPhoneアプリやiPadアプリについて

         iPhoneやiPadアプリを見ていると日本国内では販売(無料を含む)していないのに、アメリカ合衆国では販売している物がチラホラあります。iTumesStoreで販売してる映画なんかもアメリカ合衆国向けだけです。

         恐らくこれらは映画会社やアプリ制作会社などの権利者とApple社との交渉でアメリカ国内のみでの販売しか認められていないからでしょう。

        その為、ソフトを入手するにはiTunes USのアカウントが必要になります。ただし、iTuneUSのアカウントを作る上で、居住地がアメリカにないと規約違反になるそうです。一応、アカウント作成方法についてまとめておきます。
        1. iTunes store右下の国旗のマークをクリックしアメリカ合衆国に切り替える
        2. iTunes USのアカウントを作成しログインする
        3. 決済情報を求められるので海外のギフトカードなどで対応する。
        住所等は実在の住所かかなり厳しくチェックされます。

        最初にも書きました通り居住地以外の登録は規約違反になるらしいので自己責任でお願いします。権利者交渉が上手く進み、こうしたこと全てが必要なくなれば良いのに。

        2010/06/09

        GAEの最初の手順

        Google App Engine(GAE)は無料で利用できるクラウドサービスです。手軽に利用できるので小規模開発にもってこいです。GAEを利用するにはアカウントを作る必要があります。まずはhttps://appengine.google.com/にてログインしてください。Googleアカウントがあればそのまま入れます。


        ログイン後「Create an Application」をクリックするとアプリケーションを作れるのですが、初回のみ携帯のメールにて認証が必要になります。携帯のメールアドレスを入力すると、認証コードが送られてくるので、それを登録すればOKです。

        違うGoogleアカウントにログインしながらこれらの作業をやると、上手くいかない場合があるので、違うウィンドウは閉じて行う方が安全です。

        アプリケーションを作成するときのIDを入れますので、アップロードするときにはこちらのIDを入力して下さい。

        2010/06/08

        Vi,Emacsの基本操作まとめ

        開発をしているとViを触る機会が多いかと思いますがついついコマンドを忘れがちなのでまとめておきます。ここに記載してるのは本当に基礎的な部分のみです。

        vi ファイル名新規作成
        i入力モードへ
        ESCビジュアルモードへ
        :w (ファイル名)保存(ファイル名が無い場合は上書き保存)
        :q終了
        h,j,k,l左、下、上、右 (キーが一列に並んでいる)
        /文字列検索 (nで次へ)
        yw単語のコピー
        Ctrl-vビジュアルモード(矩形選択)
        pペースト
        u元に戻す
        Ctrl-rやり直す

        ついでEmacsについてもまとめておきます。

        Ctrl-x Ctrl-f新規作成
        Ctrl-x Ctrl-s保存
        Ctrl-x Ctrl-w名前を付けて保存
        Ctrl-f
        Ctrl-b
        Ctrl-n
        Ctrl-p
        Ctrl-x u元の戻す
        Ctrl-u 1やり直す
        Ctrl-vコピー
        Ctrl-y張り付け
        Ctrl-@範囲の開始位置を指定
        ESC-w選択範囲をバッッファにコピー

        普段、使わないと忘れがちなのでテキスト編集する時こまめに使うと良いのではないでしょうか。

        Windows環境のファイルバックアップ用バッチ

        Window XPでファイルサーバーを用意するのはWindows XP Professionalでも同時接続が最大10人までなのであまりオススメはできません。とはいえ、皆がWindowsを使っている環境で手軽に(一時的に)ファイル共有するには便利です。

        もしくは、Wiki等を立ち上げたりするかも知れません。そんな時忘れてはいけないのがデータのバックアップです。そんな時はバッチファイルを作り、タスクスケジューラーにそのバッチを実行させると簡単です。バッチファイルの書き方は次のような感じで。
        XCOPY /Y コピー元のディレクトリ コピー先のディレクトリ /e /s /f
        
        ファイル名はbackup.batか何かで保存すればOKです。複数に分けて保存したい場合は下にどんどん追記すればOKです。

        2010/06/07

        iPadのWifiネットワーク設定について

        iPadのwifiネットワーク設定についていろいろトラブルが報告されています。そもそもwifiネットワークが弱いとも言われていますが、wifiネットワークに接続できても全くインターネットに接続できないケースがあります。

        この現象が起こるケースとして2つのケースがありました。

        一つ目はスリープモードから復帰した時にインターネットに繋がらなるケースです。このケースでは面倒ですが、設定画面から一旦、wifiをOFFにしてすぐONに入れ直せば復帰します。おそらくこれはiPad側の問題で、将来のアップデートで対応されるかと思います。(予想ですが)

        二つ目はルーターのネットワークが192.168で始まっていない場合(169.254.0.2など)です。古いルーターなどで見られるケースです。通常のネットワーク機器であれば、他のネットワークアドレスでもインターネットにつながるのですがiPadはダメみたいです。同じケースとしてWiiも同じ問題をかかえています。

        対応策としてはルーターのファームウェアを最新のものに更新したあと、DHCPの設定を確認し、192.168で始まるように(例えば192.168.0.2〜など)再設定してください。同一ネットワークにある機器全てに影響が出るので、若干面倒ですが、今後の運用も考えて一般的な192.168の設定しておく方が良いのではないでしょうか。

        2010/06/06

        バージョン管理について

        システム開発では各バージョンを管理するためバージョン管理のシステムを使うことがほとんどです。このバージョン管理はソースコードだけでなく、画像ファイルやデータなども管理できるので大変便利です。具体的には、何かのトラブルで前のバージョンに戻したいときや。バグの修正ログを確認する際に非常に有効です。

        さてバージョン管理用のソフトですが、CVSからSubversion、そしてGitという風なトレンドになっています。私個人はSubversionを今でも使用していますが、Gitもたまに使います。いまはGitがアツイようです。SubversionからGitへの以降も下記で簡単にできます。

        
        $ git svn clone -T trunk -b branches -t tags <subversion リポジトリ="">
        
        Gitの有利な点は分散管理を取っている点で、Subversionでは毎回変更をサーバー側に登録(コミット)しなくてはいけません。そのコミット作業がファイル作業が膨大になってくると意外と時間がかかります。Gitではそのコミット作業をローカル環境で行えます。小さい修正をローカルで行い、ある程度の段階で中央に反映するといったことができるのが利点です。

        まあいずれにせよバージョン管理システムを管理する人が必要ですので、その管理のシステムは一本化した方が良いと思われます。今からバージョン管理を仕様とする人はGitにしておくほうがオススメです。

        ただプロジェクトを複数持っている場合は管理人も複数いる場合が多く、一本化するのは中々難しいです。私はまだSubversionを使っていますので、その場合のケースをまとめておきます。

        Subversionのサーバーを立てる方法はいろいろありますが、linuxの場合はyumコマンドでインストール(yum install httpd subversion subversion-server)、Windowsの場合はバグトラッキングシステムも含めたtrac lightningをインストールするのが簡単です。

        私の場合プロジェクトメンバーが各所にいる場合はLinuxでサーバーを立ち上げApacheのDAVモジュールも利用します。サーバーには認証キーを用い、ssh経由で接続($svn co svn+ssh://なんたらかんた)してもらいます。

        ローカル環境で開発を行う場合は、わざわざバグ管理も面倒ですのでtrac lightningを使用します。tracを使うメリットとしては、GUIが優れていますのでシステム屋でなくともバグ登録ができ、wikiシステムも備えていますのでナレッジの一本化ができます。(Gitに移行する際に諸刃ともなりますが)

        クライアント側ではターミナルを使っての管理か、Eclipseのプラグイン管理か、 tortoiseSVNでの管理かは好みによって使い分ければよいかと思います。

        あと忘れてはいけないのがコードバックアップです。ちゃんと定期的に異なるハードディスクにコピーできるようにしておきましょう。バッチファイルか何かで処理してしまうのが手っ取り早いでしょう。trac lightningであればbackup.batがついてきますのでこれを利用すればOKです。

        2010/06/05

        時間がかかる処理などでターミナルが切断されてしまうとき

        恐らくサーバー機器にはリモート環境で接続してメンテナンスを行う人が多いかと思います。ただしターミナル接続は長時間放置すると自動的に切断されるような設定になっています。定期的にパケットを送り合い切断されないようにする方法もありますが、ここでは簡単なコマンドを紹介します。
        nohup コマンド内容
        
        行いたい処理の最初にnohupをつけるだけでログアウト後も実行をし続けてくれます。
        nohup コマンド内容 &
        
        最後にアンパサンド(&)をつけるとコマンド内容で指定した処理がバックグラウンドで実行され、割り込みも無視されます 。

        シェルか何かで大規模な処書き換え理を行う時など時間がかかる処理を行うときは大変便利です。よく使う機能では無いですが覚えておくと便利でしょう。 

        2010/06/04

        CSSの指定の方法

        CSSの書き方は対応するブロックに対してデザインを指定するだけですので、基本的にはそんなに難しくはありません。求められるのデザインセンスです。ただ初心者にはわかりにくいクラスとIDについてまとめておきます。

        CSSのはクラスとIDの2つの方法で記述されます。

        HTML側で <div id="header">〜</div>
        となっている場合はIDでCSSでは#header { color: #FFF; }のように指定します。

        HTML側で<p class="note">〜</p>
        となっている場合はクラスでCSSではp.note { color: #000; }のように指定します。

        IDとクラスの違いは、IDは一度しか出てこないもの、クラスは何度も出てくるものと理解しておけば良いでしょう。綺麗にCSSを記述することでファイルサイズも小さくなり、微差ですがページ読み込みも早くなります。最近はSEOのもページ読み込みスピードは多少影響するので綺麗記述しておくことに越したことはないでしょう。

        2010/06/03

        仮想環境構築

        ウェブサービスを開発を行う上で必要なものはサーバーが必要ですが,状況に応じてローカル環境にて行う必要があります。そんな時、仮想化環境を構築するのが便利です。私の場合だとWindowsは必要ありませんが、メインマシンはMacですので仮想環境内にCentOSを動かしています。Linuxが必要なときは仮想環境を使います。

        さて仮想環境ですが仮想環境を作るには主に3つのソフトがあります。

        Virtual PC(Microsoft)
        Virtual Box(Sun)
        VMware(VMware)
          VMwareは有料になるので試していません。VirtualPCとVirtualBoxですがファイル連携などからVirualBoxの方がややオススメです。ファイル共有やネットワーク設定等比較的簡単に出来ます。環境構築やLinuxのインストールはさほど難しく無いので、普段環境を作ったことがある人であればできるでしょう。インストールはisoファイルでネットインストールするのが便利です。

          GAE開発環境構築

          GAE(Google App Engine)は無料で使えるクラウド環境で非常に便利です。気軽に試すにはもってこいです。GAEを利用するにはアカウント認証の際に携帯電話のメールアドレスが必要です。おそらく個人で複数アカウントを使いまわせないようにだと思うんですが、携帯のアドレスを変換すればいくつでも作れます。ただ1アカウントで10アプリケーションまで使えるのでその必要は余りなさそうですが。

          GAEにアップロードするには専用のツールを使いますが、オフィシャルサイトで落とすことができます。MacはGUIが在りますがWinはコマンドからアップします。ただEclipseのプラグインでも開発環境を整えることができ、アップロードもこちらからできるのでおすすめです。

          Eclipseは普通にインストールすれば良いです。オフィシャルのツールはプラグインを通して使うのでダウンロードしておく必要があります。プラグインとしてpydevをインストールすればあとは完成。設定で先のオフィシャルのツールの場所を指定してやればOKです。

          iPad開発で気を付けること

          iPad開発にはiPhoneSDKが必要ですがそのインストールにはSnow Leopardが必要になります。Leopardではダメです。Snow Leopardのシングルユーザライセンスは米国で29ドル、日本では3300円で提供され、一家5人までが使えるSnow Leopard Family Packは米国で49ドル、日本で5600円で販売されるとのこと。

          2010/06/02

          最初の投稿

          このサイトはGAEやiPhoneやRubyやcssなどについての備忘録です。