月: 2008年12月

福岡で働くWebの人々(FWW)のサイトリニューアル

福岡で働くWebの人々 | 福岡のWeb制作現場で頑張っている皆さんを応援するコミュニティ
弊社(株式会社プロボ)もHTML/CSSの部分などでお手伝いさせて頂きました。
私、西嶋の名前しか出てない記事もありますが、ベースのコーディングは、弊社の興梠さんにやってもらいました。
工夫したポイントとかは、私か興梠さんが、FWWのサイトのブログとかでも書くと思います。
HTML/CSSのコーディングも、まあそこそこいけてると思います(笑
お仕事のご用命は、a-nishijima@probo.jpまでお気軽に。

今年も宜しくお願いします。

昨年は、みなさんのおかげで楽しい仕事も沢山できました。

2009年は、さらに飛躍の年にしたいと思っております。

本年も宜しくお願い致します。

CORESERVERを外部リポジトリにしたいな〜メモ

ナイスなブログを発見。
CORESERVERにSubversionをインストールする | stick stack
もうこのまんまでいいんだけど、Berkeley DB、Subversionのバージョンは自分の入れたいバージョンで。
パスが通ってないみたいなので.bashrcに、

export PATH=/virtual/ID名/local/bin:$PATH

とかするといいみたい。
あとは、VersionsのLocationに

svn+ssh://ID名@s*.coreserver.jp/virtual/ID名/var/repos/hoge

でいけた。
もともと、バックログの外部リポジトリに使いたかったのだが、
ここまで来て、CORESERVER.JP:コアサーバーは、WebDAV使えない事が判明orz
WebDAV使えないと、http:// とかhttps:// とかではリポジトリにアクセスできないんだよね〜。
そうなると、Web Hosting by DreamHost Web Hosting: Web Sites, Domain Registration, WordPress, Ruby on Rails, all on Debian Linux!が候補かな?
という気もするけども、やっぱりSSL経由でのSubversionは無理っぽいね〜。
参考:DreamHostで最初にやったこと – ぎじゅっやさん
どこか安くていいとこ知りませんか?

CORESERVERにsshログインするメモ

安くて日本語でみんな大好き、VALUE DOMAIN:バリュードメインXREA.COM
上位プランのCORESERVER.JP:コアサーバーは、当然知ってたけども、今までは、みんな沢山テストとか重たいことやらせてるんかな〜とか思って使ってなかったんだけども、ちょっと使ってみようかなと思った。
その時のメモです。
日本にあって日本人ユーザの情報多くて、15GBの容量で5,000円/年は安いでしょ。
自分用とかだったら充分ですよ。

sshログイン

XREA.COMと同じだと思う。
まずは、CORESERVER.JP:コアサーバーの管理画面でホスト情報の登録が必要。

5分程度で接続できるとあるので、しばらくしてアクセスしてみる。
ターミナルを立ち上げて、

ssh ID@s*.coreserver.jp

と入力すると、(IDは自分のID、s*のところは、サーバー名)

ID@s*.coreserver.jp's password:

とパスワードを聞かれるので、パスワードを入力するとめでたくsshログインができる。

毎回パスワード探すのもメンドクサイので、キーによる認証をする

上記でsshログインしたら、.sshフォルダはなかった。(当たり前か)

ssh-keygen -t dsa

と入力するとパスプレースを聞かれるので、入力してエンター
すると、.sshフォルダができて、その中にauthorized_keysというファイルができてるので、
自分のマシンのid_dsa.pubの中身を貼付ける。

2009/01/15追記
Nishiaki's Log: 【rbash】CORESERVERにsshログインするメモにメモるの忘れてたこと
authorized_keysというファイルできなかったので、作って自分のマシンのid_dsa.pubの中身を貼付けたらいけた

【辞書/翻訳/発音/検索】Firefoxアドオン『Quick TransLation(qtl)』が便利

「なんで今まで知らなかったんだ〜!」と後悔しちゃいました。

Quick TransLation (qtl)のサイト
Quick TransLation (qtl)
上記サイトに置いてあるデモ動画

ダウンロード先
Quick TransLation (qtl) :: Firefox Add-ons
オレオレポイント

  • 単語だけでなく、文章の翻訳もできちゃう
  • 単語の発音もしてくれちゃう。英語が苦手な私や『あの人』にもお勧め
  • インストールすると、Firefoxの右下に国旗のアイコン出来てるので、そこをクリック
    Firefox画面右下画像
  • 上ににょ〜んと国旗が沢山出てくるので言語を選択
    言語選択画面
  • 文章を翻訳しようとする場合、文章をドラッグして範囲選択すると、ウインドウが現れる。
    『hover yout mouse』のとこへマウス持っていく
    ウインドウ出現
  • タブが現れるので、その中で『Google』をクリックすると
    翻訳結果が表示されてる
    タブウインドウ画面
  • 単語の発音知りたい時は、
    単語を選択して、ウインドウ表示されるので、
    スピーカーアイコンをクリック
    スピーカーアイコン画面

コピペが大量に必要な場合などは、「ウザッ!」ってなるでしょうから、右下の緑丸/赤丸のボタンでオン/オフ切り替えると幸せになれそうです。

Google Maps APIメモ(v2) #6 オリジナルマーカー情報をjsonデータで読み込み

シリーズ第6弾、シリーズこれで終了
第5弾では、オリジナルマーカーは1種類1個だけだったのですが、今回はオリジナルマーカーを複数種類、複数個読み込んでみようかと。
しかも、それをjsonデータから読み込んで、ズームレベルでの表示/非表示の管理や、情報ウインドウの管理も一度にしちゃおうじゃないか。
というBlogに書くのがめんどくさくなった?反響がないことによる手抜き?みたいな感じです。

やることの整理

  • オリジナルアイコンは、第5弾で作った雪と、星の2種にする。
  • オリジナルアイコンの数は適当に複数個。
  • 任意のレベルでオリジナルアイコン出現
  • オリジナルアイコンをクリックするとそのアイコンの情報ウインドウが表示

参考にしたところ

サンプル

jsonデータ

用意したjsonデータは下記の通り

{
    "marker":[
    {
        "category": "star",
        "lat":75,
        "lng":10,
        "html":"オリジナルアイコンの一番星や〜!",
        "minZoom":1,
        "maxZoom":2
    },
    {
        "category": "star",
        "lat":-23,
        "lng":107,
        "html":"スターですが何か?",
        "minZoom":2,
        "maxZoom":3
    },
    {
        "category": "snow",
        "lat":60,
        "lng":60,
        "html":"オリジナルアイコンの初雪や〜!",
        "minZoom":2,
        "maxZoom":3
    },
    {
        "category": "snow",
        "lat":-64,
        "lng":18,
        "html":"きっと君は・・・",
        "minZoom":3,
        "maxZoom":3
    },
    {
        "category": "snow",
        "lat":-80,
        "lng":-117,
        "html":"降りますか?降られますか?",
        "minZoom":3,
        "maxZoom":3
    }
    ]
}

スクリプト

function createCustomTileLayer(){
    var dataLayer = new GTileLayer(new GCopyrightCollection(),0,3);
    //0,3はズームレベルの範囲
    dataLayer.getOpacity=CustomTileLayer_getOpacity;
    dataLayer.isPng=CustomTileLayer_isPng;
    dataLayer.getTileUrl=CustomTileLayer_getTileUrl;
    return dataLayer;
}
var CustomTileLayer_opacity = 1.0;
var CustomTileLayer_png = true;
var CustomTileLayer_getOpacity = function getOpacity() {
    return CustomTileLayer_opacity;
}

var CustomTileLayer_isPng = function getOpacity() {
    return CustomTileLayer_png;
}

var CustomTileLayer_getTileUrl = function(tile, zoom) {
    var x = tile.x;
    var y = tile.y;
    return "tiles/"+zoom+"/"+x+"_"+y+".png";
}

function createCustomProjection() {
    var myProjection = G_NORMAL_MAP.getProjection();
    myProjection.tileCheckRange = function (tile, zoom, tilesize) "
    return myProjection;
}

var map;
var manager;

function initialize(){
    if(GBrowserIsCompatible()){
        var mapCustom = new GMapType([createCustomTileLayer()],createCustomProjection(),"")
        map = new GMap2(document.getElementById("gMap"),{
            mapTypes:[mapCustom]
        });
        map.addControl(new GSmallMapControl());
        map.enableDoubleClickZoom();
        map.enableScrollWheelZoom();
        map.setCenter(new GLatLng(0,0),1);

        manager = new GMarkerManager(map);
        GDownloadUrl("./data.json",createMap);
        
        //クリックされた場所の緯度、経度を表示
        GEvent.addListener(map, "click", function(marker, point) {
            document.getElementById("lat").innerHTML   = point.lat();
            document.getElementById("lng").innerHTML = point.lng();
        });
    }
}

function createMap(jsondata){
    var json = eval("(" + jsondata + ")");
    for (i=0;i<json.marker.length;i++){
        var category = json.marker[i].category;
        var lat = json.marker[i].lat;
        var lng = json.marker[i].lng;
        var html = json.marker[i].html;
        var minZoom = json.marker[i].minZoom;
        var maxZoom = json.marker[i].maxZoom;
        var marker = createMarker(category,lat,lng,html,minZoom,maxZoom);
        manager.addMarker(marker,minZoom,maxZoom);
        manager.refresh();
    }
}

var icon = Array();

icon["snow"] = new GIcon();
icon["snow"].image = "./icon/snow.png";
icon["snow"].shadow = "./icon/snow_s.png";
icon["snow"].iconSize = new GSize(20,20);
icon["snow"].shadowSize = new GSize(21,23);
icon["snow"].iconAnchor = new GPoint(10,10);
icon["snow"].infoWindowAnchor = new GPoint(10,10);

icon["star"] = new GIcon();
icon["star"].image = "./icon/star.png";
icon["star"].shadow = "./icon/star_s.png";
icon["star"].iconSize = new GSize(34,34);
icon["star"].shadowSize = new GSize(35,37);
icon["star"].iconAnchor = new GPoint(17,17);
icon["star"].infoWindowAnchor = new GPoint(17,17);

function createMarker(category,lat,lng,html){
    var point = new GLatLng(lat,lng);
    var marker = new GMarker(point,icon[category]);
    GEvent.addListener(marker, "click", function(){
        map.panTo(new GLatLng(lat,lng));
        marker.openInfoWindowHtml(html);
    });
    return marker;
}

あんまりイラスト汚すのも忍びないので、数も少なめで雰囲気も似せてますが、オリジナルアイコンには影を付けてるのでよく見るとわかると思います。
minZoomというのは、アイコンが出現するレベルで、maxZoomまでは、アイコン出てます。
それ以上のズームレベルになるとアイコン消えます。
1箇所どうにもできないところがあって、mixZoom(オリジナルアイコンが表示されるズームレベル)が1の場合が、ズームレベル0の時も表示されてしまうようです。
これは、バグなんだろうか?
このネタは、もともと「沢山の情報をうまく整理して、楽しげにイラストに落とし込めないか?」というのを解決するために、Google Maps API使ったらできるかな。ということで作ったのが基になってまして、それをメモしてました。
なんかもやもやして解決したいことあったらお気軽にご相談ください。

サンプル

スペシャルサンクス
Sampleで使用しているイラストは、高田さんに無理言って借りちゃいました。
ありがとうございます。
プロジェクト管理ツールBacklog(バックログ)の本体、告知サイトSubversionページのインターフェースデザインも高田さんです。
関連エントリー

Google Maps APIメモ(v2) #5 オリジナルのマーカーを追加する(まずは1種類1個だけ)

シリーズ第5弾
第4弾で作ったマップにオリジナルのマーカーを追加してみる。
まずは1種類1個だけ。

参考にしたところ

オリジナルマーカー画像の作成について

アイコンの前面画像とアイコンの影(必要ない場合はなくてもいいんだろうけども)を作成するんだけども、起点は左上なので、影を書き出す時も、そこを気にして書き出せばOK。
Fireworksの場合は、背景透明で作って、PNG32で書き出せばいいみたい。影のアルファ値も保ってくれているようです。

  • 前面画像のようす

スクリプト

function createCustomTileLayer(){
    var dataLayer = new GTileLayer(new GCopyrightCollection(),0,3);
    //0,3はズームレベルの範囲
    dataLayer.getOpacity=CustomTileLayer_getOpacity;
    dataLayer.isPng=CustomTileLayer_isPng;
    dataLayer.getTileUrl=CustomTileLayer_getTileUrl;
    return dataLayer;
}
var CustomTileLayer_opacity = 1.0;
var CustomTileLayer_png = true;
var CustomTileLayer_getOpacity = function getOpacity() {
    return CustomTileLayer_opacity;
}

var CustomTileLayer_isPng = function getOpacity() {
    return CustomTileLayer_png;
}

var CustomTileLayer_getTileUrl = function(tile, zoom) {
    var x = tile.x;
    var y = tile.y;
    return "tiles/"+zoom+"/"+x+"_"+y+".png";
}

function createCustomProjection() {
    var myProjection = G_NORMAL_MAP.getProjection();
    myProjection.tileCheckRange = function (tile, zoom, tilesize) {
        var mapsize = 256*Math.pow(2,zoom);
        if (tile.y < 0 || tile.y * tilesize >= mapsize) {
            return false;
        }
        if (tile.x < 0 || tile.x * tilesize >= mapsize) {
            return false;
        }
        return true;
    }
    return myProjection;
}

snowIcon = new GIcon();
snowIcon.image = "./icon/snow.png";
snowIcon.shadow = "./icon/snow_s.png";
snowIcon.iconSize = new GSize(20,20);
snowIcon.shadowSize = new GSize(21,23);
snowIcon.iconAnchor = new GPoint(10,10);
snowIcon.infoWindowAnchor = new GPoint(10,10);

function initialize(){
    if(GBrowserIsCompatible()){
        var mapCustom = new GMapType([createCustomTileLayer()],createCustomProjection(),"")
        var map = new GMap2(document.getElementById("gMap"),{
            mapTypes:[mapCustom]
        });
        map.addControl(new GSmallMapControl());
        map.enableDoubleClickZoom();
        map.enableScrollWheelZoom();
        map.setCenter(new GLatLng(0,0),1);
        var html = "追加した雪だよ";
        var marker = new GMarker(new GLatLng(60,60),snowIcon);
        GEvent.addListener(marker, 'click', function() {
            marker.openInfoWindowHtml(html);
        });
        map.addOverlay(marker);
        //クリックされた場所の緯度、経度を表示
        GEvent.addListener(map, "click", function(marker, point) {
            document.getElementById("lat").innerHTML   = point.lat();
            document.getElementById("lng").innerHTML = point.lng();
        });
    }
}

右側の男の子の帽子の右上にオリジナルのアイコン置いてます。
マップを拡大縮小してもサイズが変わらないのがオリジナルのアイコンです。
通常、イラストのこの場所にアイコンを置きたい!とか決まっているはずなので、クリックしたらそこの緯度、経度を表示するようにしてます。
HTML側は、下記のようにしてます。

<div id="gMap"></div>
<ul>
<li>緯度(lat):<div id="lat"></div></li>
<li>経度(lng):<div id="lng"></div></li>
</ul>

サンプル

スペシャルサンクス
Sampleで使用しているイラストは、高田さんに無理言って借りちゃいました。
ありがとうございます。
プロジェクト管理ツールBacklog(バックログ)の本体、告知サイトSubversionページのインターフェースデザインも高田さんです。
関連エントリー

Google Maps APIメモ(v2) #4 オリジナルの画像をタイルレイヤーで表示

シリーズ第4弾
いつもは、地図とかで使っているGoogle MaGoogle Mps APIだけど、
使い方によっては、色んな事考えられるぞ。という例のメモ

オリジナルの画像や写真とかをGoogle MaGoogle Mps APIを使って表示できるようにする。

参考にしたところ

タイル画像の切り出しについて

タイル1枚は、256*256pxらしい。
FireBugで確認してみた画面↓

  • ズームレベル0でタイル1*1枚
  • ズームレベル1でタイル2*2枚
  • ズームレベル2でタイル4*4枚
  • ズームレベル3でタイル8*8枚

ということらしい。
じゃあ、横長や縦長の画像の場合は、どうなるんだ?とも思って実際に試してもみたが、
ズームレベル0だとやはりタイル1枚のみが表示される状態。
ということは、タイル画像を作成するときに、正方形にちょうど収まるように作ってやればいいみたい。
まずは、Sampleを見てみてください。

Fireworksでの作業手順メモ

  1. タイルの最大サイズを決めて、ファイル作成
    Sampleは、8*8枚、2048*2048pxとした。)
    丁度メモリの容量みたいな数字ですね。
  2. 最大サイズでスライスレイヤー(Webレイヤー)作る
  3. レイヤーフォルダ分けながら、半分のサイズにしながら、そのサイズの中でセンタリングする。
    ※レイヤーの名前は、ズームレベルと合わせとくと、わかりやすいかも。

    • ズームレベル3
    • ズームレベル2
    • ズームレベル1
    • ズームレベル0
  4. スクリプトで、
    "tiles/"+zoom+"/"+x+"_"+y+".png"とかで画像を読み込ますので、それに合わせて、画像を書き出す。
  5. いちいちFireworksのWebレイヤーに名前を付けるのがめんどうな時は、
    • 一度、Webレイヤーに名前を付けたファイルからコピペする
    • もしくはFireworks-ファイル-書き出しのオプションを変更して、Webレイヤーを削除しながら書き出す
      • Fireworks-ファイル-書き出しのオプション
      • 設定例

画像の切り出しをやってくれるツールもあるみたいです。

実際にオリジナルのマップを作成する場合には、文字を入れたりもするでしょうから、縮尺によって文字サイズを変更したい場合も出るはずです。
ちなみに、Sampleもクレジット表記部分は、ズームレベルによって大きさを変えている

スクリプト

function createCustomTileLayer(){
    var dataLayer = new GTileLayer(new GCopyrightCollection(),0,3);
    //0,3はズームレベルの範囲
    dataLayer.getOpacity=CustomTileLayer_getOpacity;
    dataLayer.isPng=CustomTileLayer_isPng;
    dataLayer.getTileUrl=CustomTileLayer_getTileUrl;
    return dataLayer;
}
var CustomTileLayer_opacity = 1.0;
var CustomTileLayer_png = true;
var CustomTileLayer_getOpacity = function getOpacity() {
    return CustomTileLayer_opacity;
}

var CustomTileLayer_isPng = function getOpacity() {
    return CustomTileLayer_png;
}

var CustomTileLayer_getTileUrl = function(tile, zoom) {
    var x = tile.x;
    var y = tile.y;
    return "tiles/"+zoom+"/"+x+"_"+y+".png";
}

function createCustomProjection() {
    var myProjection = G_NORMAL_MAP.getProjection();
    myProjection.tileCheckRange = function (tile, zoom, tilesize) {
        var mapsize = 256*Math.pow(2,zoom);
        if (tile.y < 0 || tile.y * tilesize >= mapsize) {
            return false;
        }
        if (tile.x < 0 || tile.x * tilesize >= mapsize) {
            return false;
        }
        return true;
    }
    return myProjection;
}


function initialize(){
    if(GBrowserIsCompatible()){
        var mapCustom = new GMapType([createCustomTileLayer()],createCustomProjection(),"")
        var map = new GMap2(document.getElementById("gMap"),{mapTypes:[mapCustom]});
        map.addControl(new GSmallMapControl());
        map.enableDoubleClickZoom();
        map.enableScrollWheelZoom();
        map.setCenter(new GLatLng(0,0),1);
    }
}

サンプル

スペシャルサンクス
Sampleで使用しているイラストは、高田さんに無理言って借りちゃいました。
ありがとうございます。
プロジェクト管理ツールBacklog(バックログ)の本体、告知サイトSubversionページのインターフェースデザインも高田さんです。
関連エントリー

Google Maps APIメモ(v2) #3 マーカーがクリックされたら情報ウインドウを表示する

まだまだ基本的なシリーズ
マーカーがクリックされたら情報ウインドウを表示する

function initialize(){
    if(GBrowserIsCompatible()){
        var map = new GMap2(document.getElementById("gMap"));
        map.addControl(new GSmallMapControl());
        map.enableDoubleClickZoom();
        map.enableScrollWheelZoom();
        map.setCenter(new GLatLng(33.590456,130.401793),13);//13はズームレベル
        var point = new GLatLng(33.584361,130.398607);
        var html = 'マーカーと<br />情報ウインドウの<br />テストですが何か?';
        marker = new GMarker(point);
        GEvent.addListener(marker, 'click', function() {
            marker.openInfoWindowHtml(html);
        });
        map.addOverlay(marker);
    }
}

サンプル

関連エントリー

Google Maps APIメモ(v2) #2 簡単コントローラーの追加

シリーズ第2弾

コントローラーの追加

地図へコントローラー追加

  • 地図へ小さいコントローラー追加
  • ダブルクリックでズーム
  • スクロールホイールでもズーム
function initialize(){
    if(GBrowserIsCompatible()){
        var map = new GMap2(document.getElementById("gMap"));
        map.addControl(new GSmallMapControl());
        map.enableDoubleClickZoom();
        map.enableScrollWheelZoom();
        map.setCenter(new GLatLng(37.4419,-122.1419),13);
    }
}

サンプル

関連エントリー