非公式ＡＰＩのようですが叩いてみました。

あるURLを含むツイート数をカウントするAPIを叩く – jsdo.it – share JavaScript, HTML5 and CSS

twitter風文字数カウント

http://d.hatena.ne.jp/ginpei/20100814 を元にプラグイン化しました

twitter風文字数カウント – jsdo.it – share JavaScript, HTML5 and CSS

.

公式ツイートボタンを試す。

簡単にツイートボタンを設置出来る公式ＡＰＩがあったので使ってみる

公式ツイートボタンを試す。 – jsdo.it – share JavaScript, HTML5 and CSS

jQuery.ReadTime

このコンテンツを読むには○分かかります。って

jQuery.ReadTime – jsdo.it – share JavaScript, HTML5 and CSS

連想式イメージギャラリー

JAM用のイメージギャラリー

連想式イメージギャラリー forked from: Simple MediaRSS Viewer – jsdo.it – share JavaScript, HTML5 and CSS

localStorage Demo

localStorageを使ってメモ帳を作ったデモ

localStorage Demo – jsdo.it – share JavaScript, HTML5 and CSS

js無しでtooltip+effect

jsを使わないでマウスを乗せたときにツールチップをエフェクトつきで。

js無しでtooltip+effect – jsdo.it – share JavaScript, HTML5 and CSS

設定画面から翻訳タイプを切り替える

 
インストールして設定->機能拡張を選択。
Honyacを有効にすることで使用可能になります。
翻訳タイプを３種類から選択出来ます。（インストール時は”使用しない”）
 

ツールバーから翻訳タイプを切り替える

ツールバーのカスタマイズで「選択して翻訳」をツールバーにドラッグすることで
設定を開くことなく翻訳タイプを切り替えることが出来ます。
1. 使用しない
2. 日本語を英語にする
3. 英語を日本語にする
の繰り返しです。
 

では翻訳してみましょう。

この日本語を英語に翻訳したくなったら。
 

テキストを選択してー（マウスアップイベントを見ています。）
 

翻訳できました！
外部のAPIを叩いているので翻訳に若干時間がかかる可能性もあります。
もしよければ使ってみてください。
後日ソース等々まとめて学んだことをポストします。
バグ、ご意見ご要望等ありましたらコメントもしくは@geckotangまでお願いします。
 

[/html]
単純にjQueryを使うと
[javascript]
$(”#input”).click(function(){
console.log($(”table”).children()); //jQuery(tbody)
});
[/javascript]
としちゃうんですが。
どうやら書いてもいないjQueryオブジェクトのtbodyを返すようだ。( firfox webkit ie6,7,8で確認した )

なのでこうする
[javascript]
$(”#input”).click(function(){
console.log($(”table”)[0].rows); //[tr, tr, tr]
});
[/javascript]
でも帰ってくるものは素のDOMなのでメソッドチェーン出来ない
なのでラップする
[javascript]
$(”#input”).click(function(){
console.log($($(”table”)[0].rows)); //jQuery(tr, tr, tr)
});
[/javascript]
出来たー。tr達が帰ってきたー。お帰り！

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のソース
[css]
@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.

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

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

これらを用意してHatena::Letで以下のソースを書いた。
[javascript]
/*
* @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”
});
}
});
}
[/javascript]

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

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

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

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

目次

• 最初に調べたエントリー
• linkタグのmedia属性で判別する方法
• landscapeモードやportraitモードで判別する方法
• 結局javascriptで振り分ける
• オマケ：ズーム倍率を固定する。←iPhoneでズームが効かないのを修正
• 結局iPad専用ページに書いておくべき事は

最初に調べたときに参考にしたエントリー

iPad発売前に！iPad向けWebサイト制作についてのおさらい
iPadのSafari用HTMLで次のように書いておくと縦と横でCSSを切り替えられる
iPadだけにCSSを適用する方法

 
どの記事にもlinkのmediaで切り替える方法が書いてあります。

linkタグのmedia属性で判別する方法

[html]

なぜこれだけではダメか

この記述だと1024pxのモニタで表示すると適用される。
セカンダリのモニタが1024px(90度回転して使ってますが。)なので
サンプル１をchromeやfirefoxで開くとiPad.cssが適用されてしまっている。

 

 

landscapeモードやportraitモードで判別する方法

[html]

縦と横ってiPad,iPhoneだけのものじゃない。

サンプル１のSampleの部分にlandscape.cssとportrait.cssを使っていますが
chromeやfirefoxで開き、ウィンドウサイズを変えている適用される。

 

結局javascriptで振り分ける

冒頭で書いたとおり、UserAgentを判別してjsで後からcssを適用するしかないのでjsを書いた。サンプル

通常の関数版

htmlの記述
第1引数：iPadのみ共通で読ませるCSS
第2引数：横にしたときに適用したいCSS
第3引数：縦にしたときに適用したいCSS
[html]




[/html]
ipad.jsの記述
[javascript]
function iPadLoadStyle(){
window.iPad = /iPad/.test(navigator.userAgent);
if(iPad){
var args = arguments,
d = document,
head = d.getElementsByTagName(’head’),
linktag = function(h,m){
var tag = d.createElement(”link”);
tag.href = h;
tag.media = m;
tag.type = “text/css”;
tag.rel = “stylesheet”;
return tag;
};
//common
if(args[0]) head.item(0).appendChild(linktag(args[0],”only screen and (max-device-width: 1024px)”));
//landscape
if(args[1]) head.item(0).appendChild(linktag(args[1],”all and (orientation:landscape)”));
//portrait
if(args[2]) head.item(0).appendChild(linktag(args[2],”all and (orientation:portrait)”));
}
};
[/javascript]

jQueryプラグイン版

htmlの記述
common：iPadのみ共通で読ませるCSS(デフォルトはfalse)
landscape：横にしたときに適用したいCSS(デフォルトはfalse)
portrait：縦にしたときに適用したいCSS(デフォルトはfalse)
[html]





[/html]
jquery.ipadloadstyle.jsの記述
[javascript]
$.extend({
iPadLoadStyle: function(opt) {
var opt = jQuery.extend( {
common: false,
landscape: false,
portrait: false
}, opt),
iPad = /iPad/.test(navigator.userAgent),
d = document,
$head = $(”head”),
linktag = function(h,m){
var tag = d.createElement(”link”);
tag.href = h;
tag.media = m;
tag.type = “text/css”;
tag.rel = “stylesheet”;
return tag;
};
if(iPad){
//common
if(opt.common) $head.append(linktag(opt.common,”only screen and (max-device-width: 1024px)”));
//landscape
if(opt.landscape) $head.append(linktag(opt.landscape,”all and (orientation:landscape)”));
//portrait
if(opt.portrait) $head.append(linktag(opt.portrait,”all and (orientation:portrait)”));
}
return this;
}
});
[/javascript]

 

オマケ：ズーム倍率を固定する。

iPad用にページを作ったのにタップしたらズームしちゃった・・・
なんてことにならないように以下の記述を書いておく。
[html]


[/html]
これでズームされないね！

なんで2つも書かないといけないのか？

iPadをお持ちであれば
metaが2つ書いてあるサンプルを見て、iPadを回転してみてください。
そのあとに
metaを1つにしたサンプルを見て回転させてください。
縦にした時に768ではなく1024が適用されて横にスクロールできると思います。
なので2つ書いておく。

結局iPad専用ページに書いておくべき事は

以下のようになります。ズーム固定がいらなければmeta消せば良いだけですが。
(iPhone用に320も書く)
[html]







[/html]

 
どれだけiPadに対応したウェブコンテンツは現れるのか…

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行目付近を初期値からランダムな文字列に変更すると解決
[php]
Configure::write(’Security.salt’, ‘ここをランダムな半角英数文字列に変更する’);
[/php]

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行目付近を初期値からランダムな文字列に変更すると解決
[php]
Configure::write(’Security.cipherSeed’, ‘ランダムな半角英数文字列に変更する’);
[/php]