和文と英文がサンセリフで表示され、3点リーダーは縦位置中央に、引用符は左右が異なる形になるのがとりあえずの理想です。

画像でかいので気をつけてね。

なるべく指定を少なくする方向で考えてみると、FireFoxとChromeは指定なし、Safariはヒラギノのみ指定、IEはMS Pゴシック（またはメイリオ）のみ指定、とするのが良さそうです。

これを実装するには……？（おい3点リーダー下についてるぞ）CSSハックだと面倒そうなので、CSSでは指定なしとしてJavascriptでなるべく短く書いてみました。

(function(){var n=navigator,f=function(p,u,s){if(n.platform.indexOf(p)!=-1&&n.userAgent.indexOf(u)!=-1){document.write('<style type="text/css">body{font-family:'+s+';}</style>');}};f("Win","MSIE",'"ＭＳ Ｐゴシック"');f("Mac","Safari",'"Hiragino Kaku Gothic Pro"');})();

伝統的なfont-familyの指定は

font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

こんなでしたが、必要な部分のみ指定する方がスマートですよね。

当然ながら全部bodyへの指定です。bodyに指定してるのにいくつかの要素で継承しないアレなブラウザがあったような気もしますが、今後の案件で実際に使えるか試してみたいと思います。

http://110chang.com/rinban/

と思ったらYahoo!の停電情報がちょっと見やすくなってる…

追記

今日はエヴァのおかげで想定外のたくさんの反応を頂きました。僕が作ったものはエヴァのデザインテイストを勝手ながら拝借して、そこにわずかのアイデアを加えただけですが、この危機に少しでも前向きに過ごしてもらえるのなら作ってよかったと思います。

わかりやすい、見やすいという感想をちらほら頂いており、これこそは今の仕事をしていてよかったなーと思いますし、今後の糧にしたいと思います。あとは、、がんばって更新しますw

]]> http://110chang.com/2011/03/18/365/feed/ 2 http://110chang.com/2010/10/18/api-canvas/ http://110chang.com/2010/10/18/api-canvas/#comments Mon, 18 Oct 2010 13:37:30 +0000 110chang http://110chang.com/?p=355 CANVASタグにAPIで取ってきたデータを描画してみた。感覚としてはFlashのGraphicsクラスをいじるのに近いです。

APIまとめサイトみたいのを見ててちょっと遊んでみようかと思い立ち。路線データAPIと標高APIで東急東横線の高低差を表現してみました。

標高APIにリクエスト投げる時、１カ所ずつ投げないといけないので所得完了までがちょっと長い。

路線／駅名／最寄駅データサービス×標高算出API×canvasタグ

MAMPでローカル開発できるだけでもすばらしいのですが、Windowsから見れたら便利だなーと思ってつぶやいたら方法教えてもらえた！

MAMPとVMWare FusionとMacを使ってより効率的にWordpressサイトを制作しよう！

実現したいこと：

1. 管理するサイト毎に異なるURLで確認
2. Windows（バーチャルマシン）でもMacでも確認（これは同じネットワーク内にあるWindowsマシンでも可能な気がする）

/private/etc/hostsの設定

不可視ディレクトリです。僕はxFoldersで探しました。ルート権限でないと書き込みできないのでターミナルで

cd /private/etc/
sudo chmod 666 hosts

として書き込みできるようにします。中を見ると

127.0.0.1    localhost

とあるので、これに倣って

127.0.0.1    hogehoge.localhost

などを追加します。編集し終わったら権限を戻します。

/Application/MAMP/conf/apache/httpd.confの設定

MAMPディレクトリの中です。まずポートの設定。Windowsからも複数サイトを別々に確認したいので必要なサイトの分だけポート番号を設定します。

Listen 8888

という所があるので

Listen 8001

などと追加します。8889はMySQLなので使えません。8000番あたりは空いているようです。ここら辺はあまり詳しくないです。そしてホスト名です。一番最後に

<VirtualHost *:8001>
DocumentRoot "/Applications/MAMP/htdocs/hogehoge"
ServerName hogehoge.localhost
</VirtualHost>

と追加します。

WordPressの設定

ルートは/Applications/MAMP/htdocs/hogehogeになりますのでここにWordpressなど必要なファイルを置きます。

設定＞一般設定のWordpressのURLとサイトのURLを設定します。当初Windowsで確認しないで進めるなら

http://hogehoge.localhost:8001/wp/
http://hogehoge.localhost:8001/

などと設定します。Firefoxなどで確認してあらかた出来上がったら、Windowsでも確認できるように変更します。

http://***.***.***.***:####/wp/
http://***.***.***.***:####/

***はMacのローカルIPです。####は上で設定したポート番号です。Windowsから見る場合はlocalhostでは見えないのでポート番号がたよりです。最初からローカルIP＋ポート番号で設定しといてもいいと思います。IEでこのURLを叩けばバーチャルマシン側から表示確認もWordpressの管理もできます。

サーバーに移動

ローカルでの制作が終わったら、本番に移行しましょう。データベースをエクスポートして、wp-optionsテーブルにある“siteurl”と“home”を本番サーバーのものに変更、本番のデータベースでインポート。wp-config.phpのデータベース接続情報を変更してWordpressディレクトリをアップ。管理画面にアクセスできたら成功！だったかな。本番への移行はちょっとうろ覚えです。

参考

• MAMPを使って複数サイトを管理する方法
• Macでローカル開発サーバ ( MAMP ＋バーチャルホスト)

これまではMovabletypeを使っていたのですが、僕らのような小規模制作者にとってどんどん使いにくくなっていく気がするので、思い切ってWordpressに乗り換えました。

まだ使い始めて間もないですが感想としては

• 修正→再構築→確認する時間が省ける
• ループとか条件分岐を書くのが格段に早い
• PHPの勉強になる
• お客さんに余計なコストの話をしなくて済む

という感じです。ちょっとプログラム齧ってないとカスタマイズは難しいだろうなあ、そういう意味ではMovabletypeから入ったのは間違いではなかったけども。

追記：

110chang.comをさくらのサーバーに移動したときMTのsendmail直し忘れたようで、その間のコメントはガン無視してしまう結果となりました。すいませんすいませんすいません

ヘテムルにアカウント作ろうとしたら「110chang」が使えなかった。お試しで使ったアカウントが残っているのか、誰かが取ったのか・・と思って「110chang」で検索してたらたまたまこんなサイト見つけた。

[TopHatenar] www.110chang.com さんの順位

ふーん、悪くない位置にいるなあ。あと、こんなのも。

ビジュアルブログ検索エンジン [Blogopolis]

CSS町のはじっこにいるみたいです。５丁目ぐらいかな。てか、このビジュアライズすごいな。
ブログ２個とも放置してるけど、そろそろテコ入れしようかな。

書いてませんが最近は

• 自作していたJavascriptユーティリティ（スルスルスクロールとかロールオーバーとか）をjQueryに置き換え。jQueryのおかげでサクサクスクリプト書ける。
• CS5にしたのでFlashで3Dやってみたり（Player10だとPapervisionとかなしでできるのね！）
• OS10.6になったのでiPhoneアプリに手を出してみたけどObjective-Cはちょっと敷居高い。
• CakePHPを使ってみた。ニュース更新するぐらいならできそう

な感じです。仕事ではいままでMT使っていたCMSをWordpressに切り替えて、いくつか事例できそう。Cake使えればCMSも自由に作れるんだけど、まだ仕事で使えるレベルじゃないよなあ。WordpressでもっとPHPに慣れてかないとな。

ちなみに、僕ははてなーではありません。

HIMCOという大阪のスチール脚専門店(?)で購入しました。ここを見つけなかったら今回は作らなかったでしょう。見た目もシンプルで、構造もシンプルで分解できるという願ったり適ったりの商品です。

鉄の生地を+￥1,000で白に塗装してもらいました。金属の塗装はめんどくさそうなので・・・

これは天板側のプレートです。

これをビス止めして、脚側をボルトナットで締めるだけで完成！

できた！

早速、以前のワンルーム仕様のものと入れ替えます。ウェブの仕事をする前から使っているおつとめ品です。彼には天板を短くして洗濯機置き場で復活してもらいましょう。

セットアップしてみましたが、予想以上に仕事モードになってしまっています。大きさ的には４人掛けはいけるはずなんですが・・・あと、揺れますね結構。もう少し強い脚に換えたい。口型なんか丈夫そう。

それにしてもmacと木質系材料って合い過ぎです。

照明のことを考えていなかった。無印のクリップライトがシネマディスプレイにぴったりw

あとは、フタを作って、イスを変えて、ちょっとずつやって行こうと思います。

クリアの水性ウレタンで塗装しました。１回目の下塗りなので、ぱっと見、何も変わってないですね。

２回目の上塗り。つやが出てきました。写真ではわかりませんが白っぽかったのが若干黄みがかり、いい感じになりました。

同じアングルで撮ればよかった。

ハンズでフタを作ろうとしたら、3mmのシナベニヤがなかった。アルミ板で作ると全部で￥3,000ぐらい。どうするか検討中。

そろそろ梅雨入りだそうで、ギリギリ塗装間に合った・・・

いわゆるDIYというやつですが、工作する場所も工具もないのでインスタントDIYです。DHY（Do Half Yourself）と言った方が適切かもしれません（どっかで見たことのある３文字だ）。ネットで探し当てた地方の業者さんに図面を送ってカットも加工も全てお願いしました。

今日届いたのは天板の部分です。ヨーロッパパイン集成材です。シナベニヤにしようかとも思いましたが、やっぱり節とかのテクスチャがあったほうがいいのでこっちにしました。来週ぐらいに足が届くのでそれまでに塗装しておきたい所です。

穴があいているのは、このでかい板を運ぶときに取っ手になるのと、コード類を通すためです。厚3mmのシナベニヤかアルミ板でフタを作る予定です。もちろんこれもハンズかどこかで作ってもらうつもりです。

今月中にはできるかな？

関係ないですが最近、Movabletypeよりも俄然Wordpressに傾きつつあります。

Flickrから読み込んで表示するようにしたらめちゃくちゃコード量増えてしまった。このぐらいになってくるとprototypeとかjQueryとかライブラリを使う事も考えてみようかな。

ハンドルをつかんでスクロール、ボタンでのスクロールアップ／ダウン、ハンドル以外の場所をクリックで適当な位置にジャンプ、ができます。

var assets = new ReplaceScroll.Assets();
var replaceScroll = new ReplaceScroll("外枠の要素", "スクロール対象要素");
replaceScroll.initialize(assets.get());

というのが基本

初期状態のサンプル

カスタマイズもできるようにした

var assets = new ReplaceScroll.Assets();
assets.register({
    upArrowAsset  : "...", //REQUIRE
    baseBodyAsset : "...",
    baseBodyColor : "#...", //REQUIRE
    barTopAsset   : "...", //REQUIRE
    barBodyAsset  : "...",
    barBodyColor  : "#...", //REQUIRE
    barBottomAsset: "...",　//REQUIRE
    downArrowAsset: "..."　//REQUIRE
});
var replaceScroll = new ReplaceScroll("外枠の要素", "スクロール対象要素");
replaceScroll.initialize(assets.get());

対応関係は下の図のような感じ

サンプル１

サンプル２

スクロールが極端に長くなったときのハンドル部分の対応とか、よく考えたら水平スクロールバーもあるし、まだまだ足りないなあ。

Javascriptでのクラスっぽいものの書き方

これまでは

Class = function()
{
    //...
}
Class.prototype.publicFunction = function()
{
    //...
}

という書き方で頑張っていたんですが、prototypeプロパティを使った書き方だと内部変数が関数ごとに分断されてしまうので、いちいちthisキーワードをつかないといけなかったり、コードが煩雑になりがちです。

AS3を同時に勉強していたので同じような書き方がしたかったのですが、JavascriptにはJavascriptの特長があって、それを活かす書き方のほうがいいのかな、と最近は思っています。

Class = function()
{
    var privateVar = hogehoge;
    var privateFunction = function()
    {
        //...
    }
    this.publicVar = fugafuga
    this.publicFunction = function()
    {
        //...
    }
}

こっちの方が便利だよなー