device302.me

CSS image replacement technique

Wed, 07 Mar 2012 01:41:11 +0900

html5-boilerplateで新しいテキスト飛ばしが載ってたのでメモ。

ソース: Update CSS image replacement technique
デモ: http://jsdo.it/device302/4RHo; TEST - CSS image replacement technique [ h5bp ] - jsdo.it - share JavaScript, HTML5 and CSS

DOM -> jQuery objcet & jQuery object -> DOM

Wed, 22 Feb 2012 19:54:00 +0900

jQuery objectを普通のDOMエレメントとして使いたい時用のメモ
主に「やっぱここはaddEventListenerを使いてーなー」って時とか用

DOM -< jQuery object

$(document.body);

jQuery object -< DOM

$(document.body)[0]

以下サンプル

html

  <span id="hoge">hoggehoge</span>

  $().ready(function(){
    var $hoge = $('#hoge');
    var _hoge = $hoge['0'];
    var hoge_fnc = function(e){ console.log(e.target); }
    
    $hoge.bind('click', hoge_fnc ); // OK
    _hoge.addEventListener('click', hoge_fnc, false); // OK
//    $hoge.addEventListener('click', hoge_fnc, false); // Error 'has no method addEventListener'
//    _hoge.bind('click', hoge_fnc ); // Error 'has no method bind'
  });

だからどうしたという話でもある。

が、実はとってもユースフル（わら

iPhone設定画面用アイコン

Fri, 11 Nov 2011 13:13:00 +0900

iPhoneのセッティング用アイコンを夜なべして作ったよ。
「公開しろ」って言われたから公開します。

設定方法などは下記のページを参考にして下さい。

なお、アイコンのデザインは下記URLのデザインをインスパイヤ()しています。（させて頂きました。
Luminescence Icon by Thomas Ricciardiello

上の画像見ながら1からシコシコ作ったので、psdファイルも公開します。
自分が必要なものだけ作ってるので、「色変えたい」とか「アレが欲しい」って人は勝手に弄って下さい。
なお、Bluetoothのshapeだけ、どっかからダウンロードしたものなので、psdには入ってません。（たしかフリーだった気がしますが、ライセンス覚えてないので。。
Download iPhone setting icon.psd:10Mbyte弱

ライセンスとかよくわかんない、、、事も無いんですけど、まぁ何でもいいです。商用でもなんでも好きに使っちゃって下さい。連絡も特に必要ありません。記事更新とかもめんどくさいので。。。
逆に「デザインインスパイヤ()してるのに公開しちゃ駄目だろ」的な事とかございましたら教えて下さい。

画像だけ欲しい人は以下の画像持って行って下さい。ノイズ多い様に感じますが、iPhoneで見ると逆に目立たないくらいです。

jqueryで任意の要素の存在チェック

Wed, 25 May 2011 17:50:00 +0900

jqueryでエラー処理用に任意の要素を存在チェックしたい！のメモ

html

<div id='hogehoge'>hogehoge</div>

if($("#hoge")){
  //$("#hoge")が存在するときの処理
}

上記だと$(‘#hoge’)が存在しないにも拘らず、tureに入っちゃって、エラー処理にならない。
どうしたもんかと思ってjQuery 日本語リファレンスをチェック。
見つけたのが以下。

if($("#hoge").size() > 0){
  //$("#hoge")が存在するときの処理
}

.size() はjQueryオブジェクトのエレメント数を返す。返される値はjQueryオブジェクトのlengthプロパティと同じである。との事なので、lengthチェックする事で、意図した通りの動きしてくれる。

if($("#hoge").size() === 0){
  //$("#hoge")が存在しないときの処理
}

上記で存在しない時の処理もOK。
最終的には以下の感じ

if($("#hoge").size() > 0){
  //$("#hoge")が存在するときの処理
}else{
  //$("#hoge")が存在しないときの処理
}

MBA（mac book air)でバーチャルホスト設定 - without XAMPP/MAMPP

Tue, 17 May 2011 18:24:00 +0900

複数サイト持ってると /Library/WebServer/Documents にデータ移し替えるのだるい
gitのフォルダとテストフォルダが違うのがだるい

をなんとか解決する

参考サイト : XAMPP for Mac OS Xでローカル環境構築〜バーチャルホスト設定〜 | nakachi.me

参考サイトで解説されてるのはXAMPPなんで、macのネイティブ環境のパス含めて僕専用リライト的なメモ。
まぁ、やってる事に変わりはないので、参考サイト見た方がいい。。。

httpd.confファイルの設定

/etc/apache2/httpd.conf を開いて下記の「#」削除

# Include /private/etc/apache2/extra/httpd-vhosts.conf

httpd-vhosts.confファイルの設定

/etc/apache2/extra/httpd-vhosts.conf を開いて下記追加。元からある例文はコメントアウト。

# localhost
<VirtualHost *:80>
     DocumentRoot "/Library/WebServer/Documents"
     ServerName localhost
</VirtualHost>
# hoge
<VirtualHost *:80>
     DocumentRoot "/Library/WebServer/Documents/hoge"
     ServerName hoge
</VirtualHost>

上記で元の localhost も動く。
localhost/~Username どうすりゃいいんすかね。使わないんでどうでもいいんですけど。。。
どうもログとか取れるみたいなんで、一応下記の様に設定した。

# localhost
<VirtualHost *:80>
     DocumentRoot "/Library/WebServer/Documents"
     ServerName localhost
     ErrorLog "/private/var/log/apache2/localhost_log"
     CustomLog "/private/var/log/apache2/localhost_log" common
     <Directory "/Library/WebServer/Documents">
     order deny,allow
     allow from All
     </Directory>
</VirtualHost>
# hoge
<VirtualHost *:80>
     DocumentRoot "/Library/WebServer/Documents/hoge"
     ServerName hoge
     ErrorLog "/private/var/log/apache2/localhost_hoge_log"
     CustomLog "/private/var/log/apache2/localhost_hoge_log" common
</VirtualHost>

hostsファイルの設定

/etc/hosts を開いて下記追加。

127.0.0.1       hoge

apache再起動

最後にapache再起動。コマンドでもシステム環境設定>共有>Web 共有からでもお好きな方で。で、http://hoge/ でアクセスしてみてなんか出たら完了。

gitで管理するときも Library/WebServer/Documents/~ に落としてくると便利。
というか、それをやりたかった。。コレで複数サービスの管理も楽々。

jsの速度チェックmemo

Mon, 16 May 2011 18:07:00 +0900

jsで速度チェックしたかったので下記参考サイトのスクリプトでチェックしたよ。というメモ。

参考サイト : JavaScript：スクリプトの実行速度を計測する - KK企画研究所 - Yahoo!ブログ

チェック用コード

/***
* JavaScript：スクリプトの実行速度を計測する - KK企画研究所
* http：//blogs.yahoo.co.jp/k3_labs/3471296.html
*/
//スクリプトの実行速度を計測する
function getTimeMeasurementJavaScript($_script){
  $timeStart=new Date();  //処理開始時間を取得する
  var $timeStart;  //計測開始時間のセット
  var $timeStop;   //計測終了時間のセット
  var $totalTime;  //実測時間
  /*===ここで計測したい処理が展開される===*/
  eval($_script);
  $timeStop=new Date();  //処理完了時間を取得する
  //スタート時間から終了時間を引く
  $totalTime = (parseFloat($timeStop.getMinutes())*60000
   + parseFloat($timeStop.getSeconds()*1000)
   + parseFloat($timeStop.getMilliseconds()) )
   -( parseFloat($timeStart.getMinutes())*60000
   + parseFloat($timeStart.getSeconds()*1000)
   + parseFloat($timeStart.getMilliseconds()) );
  $resultTime = Math.round($totalTime);
  window.alert($resultTime + " ミリ秒");
}
//------- チェックするコード -------
function speedCheck(){
  //ここに処理
}
//------- 実行部分 ---------------
window.onload=function(){
  getTimeMeasurementJavaScript("speedCheck()");
}

.htmlファイルでphp走らせる設定

Mon, 16 May 2011 00:10:00 +0900

.htmlファイルでphp走らせる必要が有ったので、その設定。
ついでに、phpの文字コードとかUTF-8にする。

参考サイト

.htmlファイルでphp走らせる（etc/apache2/httpd.confの）設定

上のリンクの1番の設定を etc/apache2/httpd.conf に設定する。
Library/WebServer/Documents/ の中は結構ガチャガチャ弄るので、.htaccess 置くんじゃなくてこっち。的な。

$ sudo vi httpd.conf

#コメント外した - yyyymmdd
LoadModule php5_module        libexec/apache2/libphp5.so

# .htmlでphp走らせるため追加 - yyyymmdd 
AddType application/x-httpd-php .php .html$

上のリンク1に書いてあるのを<IfModule mine_module>の中に追加。
※なんかこの辺にAddType系の設定が有ったから一応ここに書いた。。たしか。

phpの文字コードをUTF-8にする（etc/php.iniの）設定

MBAには初っ端だと php.ini.default があるからそれコピペで php.ini 作る

$ sudo cp php.ini.default php.ini
sudo vi php.ini

あとはリンク2番のサイトの設定を全部適用すれば (ﾟДﾟ)ｳﾏｰ

あ、最後に全部終わったらapacheの再起動忘れずに。。コマンドでもシステム環境設定>共有>Web 共有からでも

viいつも忘れるやつ

普段使わないviのコマンド、一緒に書いとく。。指が覚えるほど使ってないからなーーー

移動

0	行の頭へ移動
$	行の最後へ移動
Ctrl + F	１ページ下へ
Ctrl + B	１ページ上へ

検索

/<文字列>	<文字列>を検索する
n	順方向へ検索
N	逆方向へ検索する

コピペ

yy	現在の行をバッファにコピー
yw	単語をバッファにコピー
p	バッファ内のテキストを挿入

sshの鍵ファイルを複数使い分ける

Fri, 06 May 2011 05:09:00 +0900

sshの鍵ファイルを複数使い分ける必要が出来たので、google先生へお伺い。
参考サイト: ~/.ssh/config で簡単に複数ホストへのSSH接続を管理する - すぱぶらの日記
結果的に上記のサイトの方法で問題なかったんだけど、一点だけ嵌ったのでメモ

エラー

Path Finder (Finder代替)から新規ファイルでconfigを作ったら読み込んでないっぽい。

$ ssh hoge
ssh: Could not resolve hostname hoge: nodename nor servname provided, or not known

回避方法

/etc/ssh/ に ssh_config というファイルがあるので、それを ~/.ssh/ に持ってくる。
ssh_config ＞ config にリネーム。
config を開いて上記参考サイトを元に記述する。

ファイル形式とか文字コードとかの問題なんすかねー
因に、ssh_configの中に設定項目色々書いてあって助かりました。
Portが22じゃないのがあるので。

GitのGUIアプリ選び

Fri, 29 Apr 2011 15:47:00 +0900

会社のフロント側データの共有を開発が使っているgitにレポジトリ切って貰って使う事になった。
で、色々手こずったので時系列メモ。 その3.GUIアプリ選定

1.GUIアプリのリストアップ

まぁ、僕とデザイナーの彼は脳が残念なので「GUIがいいよね」とか言う事でリストアップしたGUIクライアント。
最終候補４つ。

GitX (Free)

GitX - Home
一番有名？使ってる人が一番多いっぽい？GUIが素っ気ない。
アイコンが嫌。

Gitti (Free)

Gitti: A Git Client for Mac OS X
情報が少ないのかな？サイトにRelease noteないので、更新頻度とかちょっと気になる。
見た目はよさげ？

Tower (¥5,499)

Tower - The most powerful Git client for Mac
最近一番注目株なのかな？公式の情報充実してる。coda用のpluginがある。
アイコンいい。

Sprout ($34.99)

Sprout: The Easy Git Client for Mac - Git, Made Easy
Gitmacって名前だったのがSproutに変わったみたい。Mac App Storeで買える。
Towerに比べると新しい割には情報が少ないかな。見た目はよさげ。でもアイコンが嫌。

2.GUIアプリ選定

上記をとりあえず全部入れてちょっと試したんですが、、結論はTowerで行く事にしました。

Towerのメリット

coda用のpluginがある。
セットアップ画面等GUIが直感的&好み - Sproutも初期画面は結構好き。
公式情報が充実してる。 - Learn :: Tower - The most powerful Git client for Mac
アイコンがいい。

Towerのデメリット

高い(¥5,499)
Mac向けGUIなgitクライアント「Tower」の10%offクーポンが発行中と言う情報見つけたけど、“GITHUB10”はエラる。

デメリットの高いってのは使ってれば妥当or安いって思えそうなので、実質デメリット無し的な考えです。

CUIでgit clone

Fri, 29 Apr 2011 03:11:00 +0900

会社のフロント側データの共有を開発が使っているgitにレポジトリ切って貰って使う事になった。
で、色々手こずったので時系列メモ。 その2.CUIからgit clone

CUI(Terminal)からgit clone

前のpostでsshも無事繋がったのでgitに繋げてみる。
とりあえず、僕ら用のリポジトリへアクセスしてみる。

$ git clone ssh://[user]@[hostname]:[port]/[repositoryのpath]
Cloning into [repository name]...
remote: Counting objects: 3, done.
remote: Total 3 (delta 0), reused 0 (delta 0)
Receiving objects: 100% (3/3), done.

(ﾟДﾟ)ｳﾏｰ

実は前のpostの1.時点(winのppkファイル)でこのコマンドは打ちまくってた。
毎回 Permission deniedでしたけどね。。。なので通った時嬉しかった。。

MBAで秘密鍵SSHへアクセス

Fri, 29 Apr 2011 02:11:00 +0900

会社のフロント側データの共有を開発が使っているgitにレポジトリ切って貰って使う事になった。
で、色々手こずったので時系列メモ。 その1.SSHアクセス

秘密鍵sshへアクセス

1.とりあえず接続

会社のリポジトリがあるサーバーは秘密鍵でssh接続。
winで使ってる鍵（id_rsa.ppk)をMBAの ~/.ssh/ に持ってきて、terminalからssh接続テスト。

$ ssh -l [user] -p [port] [hostname]
Permission denied (publickey).

えー。。。

2.mac用鍵生成

google先生に聞いてみると、どうもwinの鍵はmacじゃ使えないらしい。。
下記のサイトを参考にwin機で.keyファイル作成。ステキ。
Putty秘密鍵(ppk)をMacで使う | ijo.cc

新しい鍵（id_rsa.key)をさっきと同様MBAの ~/.ssh/ に持ってきて、terminalからssh接続テスト。
因に、id_rsa.keyのパーミッションは600にしておく。id_rsa.keyを入れてる~/.sshは700。
やっとかないと怒られる。

$ chmod 700 ~/.ssh
$ chmod 600 ~/.ssh/id_rsa.key

ここ迄ですごい時間かかってたのは内緒。
なんか正しく設置してる(と思い込んでただけ？)のにうまく行かない的な謎多かった。
検証してないけど、hoge.key の拡張子 (.key) 外した or Terminal再起動したらうまく行った？のかな？
いや、わかんないけど…　　つづく

Mac Book Air 11inch 64G/4M インスコアプリ備忘録

Sun, 17 Apr 2011 16:13:00 +0900

半年くらい経ったのかな？ということで、Mac Book Air 11inch 64G/4M に入れているアプリとかの備忘録。

使わないのも多いから、もう少し整理する必要があるなー。

1Password ($39.99): パスワード管理ソフト。
iMacとAirとiPhoneでパス同期。年に数回しかログインしないサイトのID/PWもこれで安心
iMacとAirは同じ1ライセンスで可能。
Adium: IM統合。アイコン、スキンが気に食わないのでXtrasで変更
Adobe Creative Suite 5 Web Premium ( リンク先で確認 ): 仕事用。高いよ。。。5.5とか買えない。。iMacとAirは同じ1ライセンスで可能。
AppCleaner: アプリをUninstallするとき関連ファイルも一緒に消せる
BetterTouchTool: TrackpadとMagicMouseの拡張設定
BlueHarvest ($13.95): 会社で共有サーバーにゴミファイル(.DS_storeとか)作らない為。。大人のマナーってやつですな。。
Chicken of the VNC: 会社でWin機チェックしたりする時用
問題はアイコンがださい所
ClipMenu: snipet機能が凄い便利
Coda (¥9,800): エディタ。svnだけじゃなくgit拡張欲しい。いくつか不満点もあるので、textmateに変える事も検討中。。。。
Desktop Task Timer: 仕事時間の把握の為。アイコン/UIがださいのがイヤ。そろそろ消すかな。。
Dropbox: 言わずと知れた。
Evernote: 言わずと知れた。
Firefox_3.6.X: tumblr用（tombloo+Autopagerize+LDRize+Minibuffer+Reblog Command)
Firefox_3.6.X_mac build: 実際速いかよくわかんないけど。。アイコンかわいい。
Firefox_4: firebug用
Google Chrome: メインブラウザ
Growl: 気づいたら入ってた。
ImageUp: 全角/半角入力の視認性向上アプリ。地味だけど、激烈に便利。
IPMessenger: 昔から使ってるので。
KeyRemap4MacBook: 日本語切替をトグルにしたり色々と。
Launchy: ランチャーとしての機能のみ欲しかったので、Quicksilverじゃなくてこれ
Microsoft Office for Mac ( リンク先で確認 ): 仕事用iMacとAirは同じ1ライセンスで可能。
MultiFirefox: FirefoxのVerとプロファイルを起動時に簡単選択。超便利。
OmniFocus ($79.95): task管理。iMacとAirは同じ1ライセンスで可能。
Path Finder ($39.95): ファイラー。便利すぎる。4000円弱の価値は充分。
Porticus: MacPortsのGUI。コマンド忘れちゃう僕のような人むけなんだろうな。。あんま使わないけど
PreziDesktop3: 素敵プレゼン作成アプリなんだけど、、実戦経験なしw
RockMelt: もうほぼ使ってない。。便利なんだけど。。仕事中は邪魔。。。。
Secrets: OS Xのセッティング
Simple Comic: 画像ビューワーとして利用。
Skype: 言わずと知れた
SugarSync: ファイル共有
Transmit (¥3,400): FTP。すばらしい。
Tunnelblick: 会社のVPNに接続するため用
WebKit: チェック用
WhatKey: MacのKeyアイコンがイマイチ覚えられなくて。。。たまに起動
XMind: mind mapなんだけど、木構造で考えをまとめる時に便利。開いた枝をまた1つにまとめられるのが超便利。
Yahoo!メッセンジャー: 嫌いだけど、会社で使うので。。。