</gecko>：げことじ。：日常からWEBまで：

・翻訳結果を表示するボックスのCSSが、特定のページで影響を受けていて正しく表示されなかった為。

1420×1410の大きすぎる画像をhtmlのbackgroundに指定したらiPhone/iPadで表示されなかった。
たぶんこのエントリーにある通り制限を超えてるのかなぁ。
なので画像を分割して

background-image: url(image/img1.jpg) , url(image/img2.jpg) ;
background-position: top center , center 500px ;

みたいにcss3の背景画像複数指定を使って対応した。

勉強がてらsafari5用エクステンション「Honyac」を作りました。
以下からダウンロードする事が出来ます。

Honyacはテキストを選択すると、その場でテキストを翻訳することが可能です。
日⇔英に対応しています。
インストール後、ブラウザの再起動もしくは新しいウィンドウやタブを開くことで、そのウィンドウやタブから使えるようになります。（リロードでも可）

続きを読む。

以下のようなtableを書いたときに子要素であるtrを取得したいわけで。

  <table id="table">
    <tr>
      <td>hoge1</td>
      <td>hoge2</td>
    </tr>
    <tr>
      <td>hoge3</td>
      <td>hoge4</td>
    </tr>
    <tr>
      <td>hoge5</td>
      <td>hoge6</td>
    </tr>
  </table>
  <form action="javascript:void(0);"><input id="input" type="button" name="" value="run" /></form>

単純にjQueryを使うと

$("#input").click(function(){
  console.log($("table").children());  //jQuery(tbody)
});

としちゃうんですが。
どうやら書いてもいないjQueryオブジェクトのtbodyを返すようだ。( firfox webkit ie6,7,8で確認した )

なのでこうする

$("#input").click(function(){
  console.log($("table")[0].rows);     //[tr, tr, tr]
});

でも帰ってくるものは素のDOMなのでメソッドチェーン出来ない
なのでラップする

$("#input").click(function(){
  console.log($($("table")[0].rows));  //jQuery(tr, tr, tr)
});

出来たー。tr達が帰ってきたー。お帰り！

windows safari5で拡張機能が作れるらしいのでやってみる。

1. 設定>詳細>メニューバーに“開発メニュー”を表示にチェックを入れる
2. Safari Developer Programに参加してデベロッパ証明書を取得する
3. C:\WINDOWS\system32\certreq.exeがあるか確認する
3-1. なければWindows Server 2003 Service Pack 1 Administration Tools Packをダウンロードしてインストール
 

LaunchAssistantをクリックして
 

 

fileをクリック
 

 

c:\certreq.txtに保存する
 

 

コマンドプロンプトを立ち上げる
certreq -new c:\certreq.txt c:\csr.pem
を実行
ファイルを選択>c:\csr.pem したらcontinueをクリックして
 

 

認証中…
 

 

認証できたー。
あとは証明書をダウンロードしてインストール。
 

mac版のコチラがとても参考になりました。

Twitterのテキストを美咲フォントにするHatena::Letを作ってみました。

実験には8*8ドット日本語フォント「美咲フォント」を使わせていただきました。

いろいろ試した結果必要になったファイル
a. ttfファイル
b. @font-faceが書いてあるcss(これはcを読み込む)
c. aからfontを直接読むと認識されなかったのでヘッダつけてaをreadfileするphp

bのソース

@font-face {
  font-family: 'Misaki';
  font-style: normal;
  font-weight: normal;
  src:local('Misaki'), url('フォントになりすますphp') format('truetype');
}
/*
http://www.geocities.jp/littlimi/misaki.htm
美咲フォント アウトライン試作版　ライセンス

These fonts are free softwares.
Unlimited permission is granted to use, copy, and distribute it, with or without modification, either commercially and noncommercially.
THESE FONTS ARE PROVIDED "AS IS" WITHOUT WARRANTY.

これらのフォントはフリー（自由な）ソフトウエアです。
あらゆる改変の有無に関わらず、また商業的な利用であっても、自由にご利用、複製、再配布することができますが、全て無保証とさせていただきます。
*/

cのソース

< ?
  header('Content-type: font/ttf');
  header('Content-Disposition: attachment; filename="font.ttf"');
  header('Access-Control-Allow-Origin: *');
  readfile("フォントファイル名");
?>

これらを用意してHatena::Letで以下のソースを書いた。

/*
 * @title Twitterのテキストを美咲フォントにする
 * @description TwitterのフォントをGoogle Font APIを使って変更します。
 * @include http://twitter.com/
 * @license MIT License
 * @require http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js
 * @require http://www.google.com/jsapi
 * @require http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js
 */
if(location.href.indexOf('http://twitter.com/') != -1){
WebFont.load({
  custom: {
    families: ['Misaki'],
    urls:['http://lab.slackl.info/font/MisakiGothic_Outline.css']
  },
  loading: function(){
    alert("読み込みます...");
  },
  active: function(){
    $("*").css({
      "font-family":"Misaki",
      "font-size":"12pt"
    });
  }
});
}

っていうか日本語は1メガとかあるから重いなぁ・・・
転送量やばそう。
いつか消しちゃうかも。

前回の【CSS】iPadだけにCSSを適用する方法に引き続きiPadで検証中。

iPod touch,iPhoneと同じ記述が使えた。

png24
width 129px
height 129px
で作成してlinkタグで指定すればOK

  <link rel="apple-touch-icon" href="apple-touch-icon.png"/>

結論から言うとjavascriptでUserAgentを参照して振り分けるしかない。

linkやcss内の@mediaでどうにかなるもんだと思ってましたが。

<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />

どうやら↑では”iPadオンリー”は無理です。
結局UserAgentを見るしかない。

var iPad = /iPad/.test(navigator.userAgent);
if(iPad){
//iPadだけに適用させたい記述
}

 
長くなるので無理な理由、検証、iPadだけにcssを適用させるjsは以下に。

 

続きを読む。

PHPのフレームワークを触ったことがなかったのでCakePHPをはじめてみようと思って。

CakePHP1.3.0をインストールした時のエラーで躓いたのでメモ。

Notice (1024): Please change the value of ‘Security.salt’ in app/config/core.php to a salt value specific to your application

というエラーは
/app/config/core.phpの198行目付近を初期値からランダムな文字列に変更すると解決

Configure::write('Security.salt', 'ここをランダムな半角英数文字列に変更する');

Notice (1024): Please change the value of ‘Security.cipherSeed’ in app/config/core.php to a numeric (digits only) seed value specific to your application [CORE\cake\libs\debugger.php, line 688]

というエラーも
/app/config/core.phpの203行目付近を初期値からランダムな文字列に変更すると解決

Configure::write('Security.cipherSeed', 'ランダムな半角英数文字列に変更する');

【javascript】 webkitのデスクトップ通知APIのデモで気づいたことを追記。

デスクトップ通知をするものですがスクリーンセーバー（windows）の状態でもオーバーレイして表示されるようです。
chromeすごいな・・・