69log http://kazu69.net/blog 福岡でweb制作に従事するひとの極私的ブログ Sat, 24 Jul 2010 12:25:26 +0000 http://wordpress.org/?v=9613 ja hourly 1 html5での動画のフォーマット http://kazu69.net/blog/?p=746 http://kazu69.net/blog/?p=746#comments Sat, 24 Jul 2010 12:23:25 +0000 admin http://kazu69.net/blog/?p=746 html5での動画のフォーマット。足並みそろってないようですが、現状で使うとしたら、ちょっと面倒だ。

IE9やSfariは「H.264」、chromeやOperは「webM」、Firefoxは現状はまだ「Ogg」(firefox4からはwebM)。ということは最低3形式は必要か。

MACなら、H.264はQuickTimeで書き出し。webMはMiro Video Converterとか、OggはQuickTimeのプラグイン「XiphQT」を使う必要があるみたい。

規格統一してほしいですね。

]]> http://kazu69.net/blog/?feed=rss2&p=746 0 蛍をみてきた http://kazu69.net/blog/?p=741 http://kazu69.net/blog/?p=741#comments Fri, 18 Jun 2010 01:40:10 +0000 admin http://kazu69.net/blog/?p=741 ちょうど蛍の時期だったので、一時間くらいかけて蛍を見てきた。

家から近くて蛍の見れる場所ということで、幼いときに行った記憶のある、室見側上流の石釜地区に行ってきた。

まちの噂で西鉄バスの西新パレスから直行便が出てるとかあったけど、西鉄さんに聞くと
早良営業所からホタル観賞（上石釜地区）臨時バスが出ているとのこと。
ちなみに、６月の初めの週末のみの運行。今年は6月4・5・６・10・11・12日のみの運行。

当日は梅雨入り前で曇り、湿度高くて無風という蛍観賞には好条件。
ということで、早良営業所から臨時バスに乗って、行ってきました。

ちなみにバスも特別仕様。
蛍見学臨時バス車内

市内から13kmとかそこらで蛍が見れました。小さいときにも、ここで見ていたのですが、その時よりも今回は少なかったかな。それでも充分堪能できました。

蛍

]]> http://kazu69.net/blog/?feed=rss2&p=741 2 CSSのword-break で、はみ出さないように自動改行 http://kazu69.net/blog/?p=734 http://kazu69.net/blog/?p=734#comments Thu, 17 Jun 2010 10:48:50 +0000 admin http://kazu69.net/blog/?p=734 長ーいURLとかを所定のブロックとかに収めたいけど、改行されずに困るじゃないですか。
あれの対策です。

Firefox2以下を切り捨てるならば、cssで

.word-break{
word-break:break-all;
word-wrap:break-word;
display: inline-block;
}

で、大体の場合クリアできそう。
word-break:break-all で表示範囲に合わせて改行されるのですが、word-break:break-allがないとsafariがテーブルのセル内で折り返してくれないし、display: inline-block;がないとFirefox3系がテーブルのセル内で折り返してくれない。
これで大体の場合OKと思うけど、詳しく検証してないので。

あと、

overflow:hidden;
text-overflow:clip;

とかではみ出した分を「…」とかにするというてもありますね。

Firefox2以下は何やってもダメっぽいので、overflow:auto;とかjsで回避するとかしかないのかな？
そういえば昔、jQueryでの半角英数の改行に関する記事書いたみたいでした。

]]> http://kazu69.net/blog/?feed=rss2&p=734 0 Googleのウェブフォント：Google Font API http://kazu69.net/blog/?p=715 http://kazu69.net/blog/?p=715#comments Thu, 20 May 2010 23:37:35 +0000 admin http://kazu69.net/blog/?p=715 Google Font API(TypeKitとの共同開発)というのがweb fontを簡単に使えそう。

Google Font APIで使えるフォントはまだ少ないみたいですが、使い方は簡単です。

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">

で使いたいフォントを指定するだけ。
あとはCSSで

CSS selector {
font-family: 'Font Name', serif;
}

とかインラインで

<div style="font-family: 'Font Name', serif;">Your text</div>

という感じで指定すればいい。
Italicやboldなんかも

bold
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name:bold">

italic
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name:italic">

みたいにするだけ。
ちなみにFont+Nameの「＋」はフォントの名称にスペースのある場合(Font Nameのように)、「＋」で置き換えたもの。

複数指定する場合は「｜」で区切る感じ。

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name:italic|Font+Name2">

さらに、WebFont LoaderというJavaScript libraryを使えば、フォントの読み込みも制御できるのでイベント発生時に書体の切り替えや、読み込みまでは代替フォントで表示させる等の対応もできそうです。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
<script type="text/javascript">
WebFont.load({
google: {
families: [ 'Tangerine', 'Cantarell' ]
}
});
</script>

CSS3でweb fontを採用ということもあり、FontspringやFonts.comのようにウェブフォントを提供するサービスは海外でいくつかあるみたいですが、googleさんも始めちゃったんですね。

日本語フォントは「ひらがな」、「カタカナ」、「漢字」もあるので、どれくらい容量を抑えられるかだろうな。Flashの埋め込みフォントみたいな感覚ですかね。

]]> http://kazu69.net/blog/?feed=rss2&p=715 0 tr要素をdisplay=blockにするとき・・・ http://kazu69.net/blog/?p=712 http://kazu69.net/blog/?p=712#comments Thu, 20 May 2010 09:52:36 +0000 admin http://kazu69.net/blog/?p=712 たまにtr要素のdisplay要素で困るので、メモ。

javascriptでtr要素のdisplayの「block」と「none」で表示切替できるのはIEの間違った解釈で、普通(firefoxやsafari)は「block」と「table-row」。

でも、ブラウザで条件分岐するのは面倒なので、まとめて


(dom.style.display == 'none') ? '' : 'none';

でいいじゃないか。
つまり、空(値なし)と「none」で切り替えれば条件分岐いらない。

]]> http://kazu69.net/blog/?feed=rss2&p=712 0 1PasswordがWindowsに対応 http://kazu69.net/blog/?p=705 http://kazu69.net/blog/?p=705#comments Sun, 09 May 2010 12:35:02 +0000 admin http://kazu69.net/blog/?p=705 1password

macとiphoneのパスワード管理でいい感じ、というか最強と思っている1PasswordがWindowsに対応してくれました。

ちなみに、1Passwordというのは、パスワードを一元で管理できるツール。一度入力したパスワードを管理し、次回からのパスワード入力を自動化してくれます。現在はMac、iphone対応のアプリケーション提供しています。

今回リリースされた1Password for Windowはまだbeta版(公式リリースまでは無料)ですが、今のところ充分利用はできる感じです。
ブラウザとしてはIE7、Firefox3に対応という事で今後はChromeにも対応予定とか。これは嬉しいです。

Windowsで利用する前に、パスワードのデータをDropboxなどで同期しておくこともお忘れなく。

]]> http://kazu69.net/blog/?feed=rss2&p=705 0 BAKERY KITCHEN RAGGRUPPIに行ってきた http://kazu69.net/blog/?p=647 http://kazu69.net/blog/?p=647#comments Thu, 29 Apr 2010 14:42:29 +0000 admin http://kazu69.net/blog/?p=647 前々から気になっていたBAKERY KITCHEN RAGGRUPPIのランチに行ってきた。

大濠公園と赤坂の間。大手門から一歩入ったあたり。大手門の家庭裁判所の隣になったと思います。
通りに面していないので、ちょっとわかりにくいのですが、店内はお昼時ということもあり多くの人でにぎわっていました。

1階はパン屋さん。二階がベーカリービュッフェとなってます。
店内は大きな窓があり、白を基調とした明るく天気のいい日は心地よいです。
BAKERY KITCHEN RAGGRUPPI

限定メニューのカルボナーラとサラダセットをいただきました。
サラダのボリュームもあり、パンは食べ放題。今回頼んだパスタは手打ちということで、満足なランチとなりました。
BAKERY KITCHEN RAGGRUPPI

BAKERY KITCHEN RAGGRUPPI

Take Outもやってるみたいで、おいしそうでボリューム満点の総菜 or パスタとパンが3個もつくみたいで、これはかなりいいかも。
暖かく天気のいい日はTake Outにして舞鶴公園でランチってのもいいかもですね。

また行きたくなるお店です。

BAKERY KITCHEN RAGGRUPPI
TEL:092-739-2246

大きな地図で見る

]]> http://kazu69.net/blog/?feed=rss2&p=647 0 SVGとやらを触ってみた http://kazu69.net/blog/?p=637 http://kazu69.net/blog/?p=637#comments Thu, 29 Apr 2010 02:04:34 +0000 admin http://kazu69.net/blog/?p=637 SVG(Scalable Vector Graphics)のサポートをするらしいIE9。ということでブラウザ上でのベクター画像の表示はSVGが本命になるとかならないとか。

SVGはグラフィックだけでなく、アニメーションもできるらしいので少し触ってみた。
ただ、SVGの仕様(日本語訳)を見てもよくわからなかったので、今回はライブラリとして有名なRaphaëlを使いました。
RaphaëlはFirefox 3.0+、Safari 3.0+、Opera 9.5+、Internet Explorer 6.0+ と各ブラウザでの動作環境。
簡単なベクターデータを作成して、アニメーションさせてみる。

var canvas = Raphael(document.getElementById("canvas"), 500, 500);
var p = canvas.path("M200,200a100,100,0,1,0,0,0.01").attr({stroke:"#FFFFFF"});
var c = canvas.circle(200, 200, 30).attr({fill:"#333",stroke:"#FFFFFF"});
var ccfill = c.attrs.fill;

c.animateAlong(p,2000,false,callback);

function callback(){
ccfill = c.attrs.fill;

if("#ff3399" != ccfill){
ccfill = "#ff3399";
}else{
ccfill = "#333";
}
c.animate({fill:ccfill},1000,"backOut",func);
}

function func(){
c.animateAlong(p,2000,false,callback);
}

としてみると



こんな感じ。
確かにいろいろできそうだ。動的なグラフの描画とか、Flashの代替手段に使用したりできそうですね。
HTML5、CSS3にくわえてSVGあたりがきそうな感じがします。

]]> http://kazu69.net/blog/?feed=rss2&p=637 2 Twitter @Anywhere http://kazu69.net/blog/?p=603 http://kazu69.net/blog/?p=603#comments Mon, 26 Apr 2010 11:02:38 +0000 admin http://kazu69.net/blog/?p=603 @anywhere

簡単設置できて、その場でつぶやけるらしい@Anywhereを埋め込んでみた。

設置方法には、アプリケーションの登録が必要です。

  1. @Anywhereのサイトのページ下部にある「Start it using now」をクリック。
  2. 必須項目の「Application Name」(Tweetした時に表示されるアプリケーション名)
    「Application Website」(設置するサイトの名前)
    「Callback URL」を入力(OAuthを使う時に利用するみたいですが、設置するサイトのURLで)
    「Default Access type」(followやretweetを使うならRead & Writeを選択)
  3. スクリプトが提示されるので、それをコピー。

実際にWordPressに設置してみる。まず、
<head>に<script src="http://platform.twitter.com/anywhere.js?id=*************&v=1">
を追加します。

マウスオーバーでtwitter idのツールチップが表示される「Hovercards」はjavascript

twttr.anywhere(function (twitter) {
twitter("#hovercards").hovercards();
});


を追加するとid=”hovercards”を付与した場所でツールチップが表示されます。
こんなかんじ @kazu69。

Follow me ボタンも簡単につけることができます。

twttr.anywhere(function(twitter) {
twitter("#followButton").followButton("kazu69");
});


でid=”followButton”を付与した場所にボタンが表示されます。
こんな感じ

Tweet Boxも簡単に設置できます。

twttr.anywhere(function (T) {
T("#tbox").tweetBox();
});

こんな感じで、同じくd=”tbox”を付与した場所にTweet Boxが設置できます。

すごく簡単だわ。一般企業のサイトなどにも設置したりする必要が出てくるんじゃないのかな？

]]> http://kazu69.net/blog/?feed=rss2&p=603 0 google analyticsが非同期対応 http://kazu69.net/blog/?p=585 http://kazu69.net/blog/?p=585#comments Sun, 25 Apr 2010 02:38:05 +0000 admin http://kazu69.net/blog/?p=585 async ga.js

昨年末くらいだったと思うけど、Google Analyticsの非同期版のコードが出ていたのですが
まだベータテストでした。
4月9日に正式に推奨されました。(Google Analytics Blog)

違いは、ページの読み込み時に同時に並行で解析用のjavascriptを読み込み、処理するという感じです。
(正式にはjsの読み込み時にほかの要素の読み込みをブロックしない)

で、何が変わるか。

  • ページ読み込み速度の向上
  • 滞在時間が短いユーザーも正確に解析
  • クリックのトラッキングの際に影響の会った関数読み込み関する要素の排除

とのこと。(Google Analytics 非同期トラッキング コードとは)

たぶん、検索結果にページの表示速度も加味するということで解析タグのアップデートも行ったと思います。

使い方は変わりませんが、設置箇所が今までは</body>の直前に設置してましたが、新しいトラッキングコードは<head>内に設置します。簡単なので、対応した方がいいすね。

ちなみに新しいトラッキングコードはhtml5から追加になった、「async」属性を使ってますね。
async属性をscriptタグに設定すると、非同期で読み込み読み込み後に実行します。

]]> http://kazu69.net/blog/?feed=rss2&p=585 0 サイトのスピードと検索結果 http://kazu69.net/blog/?p=571 http://kazu69.net/blog/?p=571#comments Mon, 12 Apr 2010 14:23:26 +0000 admin http://kazu69.net/blog/?p=571 googleさんがサイトのスピードが検索結果に影響すると言及しました。
Google Webmaster Central Blog

以前からまことしやかに噂されていたのですが、導入されましたね。

まだ、google.comにのみ導入されているので、日本ではいつ開始されるかわかりませんが、いずれはサイトのレスポンスも意識した開発・運営など必要になりそ。

「サイトのレスポンスがいい = 上位になる」　のというわけではないのでレスポンスの悪いサイトにならないように
心がけよということなんだろけど。

ちなみに、サイトレスポンスってのはビジネスと深く関わっていてFirefoxのサイトはチューニングでダウンロード数が増えたり、レスポンスがいいとトラフィックが増えたりと、yahooやgoogleをはじめ多くのwebサービス企業がwebサイト改善に投資するのは最もだ。

ということで、自分に投資というわけで続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティスなんてのを購入してみた。とりあえず、読んでみるのだ。

]]> http://kazu69.net/blog/?feed=rss2&p=571 0 WordCamp Fukuoka 2010 http://kazu69.net/blog/?p=567 http://kazu69.net/blog/?p=567#comments Thu, 11 Feb 2010 07:29:08 +0000 admin http://kazu69.net/blog/?p=567 ボクも使ってるWordPressのイベント、WordCamp Fukuoka 2010が開催されるみたいです。

WordCamp Fukuoka 2010


ちなみに、2月13日にアップルストア天神でプレイベントもあるみたい。
久々に福岡で大きなイベントかも。
WordPressとか興味のある人は2月27日 西南学院コミュニティーセンター へ。

]]> http://kazu69.net/blog/?feed=rss2&p=567 0 Twitterに送る Javascript その2 http://kazu69.net/blog/?p=561 http://kazu69.net/blog/?p=561#comments Thu, 11 Feb 2010 07:28:13 +0000 admin http://kazu69.net/blog/?p=561 忘れないために。
何かで作ったんだけど、ソースがなくなった気がしたのでここに書いておく。

twitterでつぶやくボタンとかに指定したURLをbit.lyで短縮してつぶやくやつ。

まじめにbit.lyに登録して、APIキーを取得。
それを使ってjsで実装。
Javascriptはhttp://kazu69.net/blog/sample/tweet/tweet.js.txt。

指定したURLを短縮するなら、

<a href="http://yahoo.co.jp" class="retweet">ヤフー<a>

のように a タグのclass属性にretweet ってのを記述。
スクリプトを読み込ませて、

/*先にスクリプトをロード*/
<script type="text/javascript" charset="utf-8" src="****"></script>
<script type="text/javascript">
window.rt.userID = "bit.lyのid"
window.rt.userKey = "bit.lyのapiキー"
window.rt.sid = "twitter"
/*
true なら a タグの href属性の値を短縮
falseなら 該当ページの URLを短縮
*/
window.rt.f = true
rt.f1();
</script>

とする。デザインとかはCSSで。
ちなみに、ログピにおくるなら

window.rt.sid = "logpi"

とするとできるけど、ログピはURL貼ると「click here」ってでてるのであまり意味ないかも・・・。
ソースがあれなのはあれなので、あしからず。

]]> http://kazu69.net/blog/?feed=rss2&p=561 0 Twitterに送る Javascript http://kazu69.net/blog/?p=549 http://kazu69.net/blog/?p=549#comments Thu, 21 Jan 2010 11:57:13 +0000 admin http://kazu69.net/blog/?p=549 たいしたことないけど、わすれないために。
Twitterに送るボタン作るときのJavaScript。

Twitterに送るなら

function sendTwitter() {
var title = "RT @yourname：" + document.title;
title = encodeURIComponent(title);
var url = location.href;
var tg_url = "http://twitter.com/home/?status=";
var twurl = tg_url + title + ' ' + url;
window.open(twurl);
}

ちなみに、Logpiに送るなら

function sendLogpi() {
var title = document.title;
title = encodeURIComponent(title);
var url = location.href;
var tg_url = "http://logpi.jp/home/?status=";
var logpiurl = tg_url + title + ' ' + url;
window.open(logpiurl);
}

でしょうか。

]]> http://kazu69.net/blog/?feed=rss2&p=549 0 JSTweener.js http://kazu69.net/blog/?p=547 http://kazu69.net/blog/?p=547#comments Sun, 17 Jan 2010 15:16:00 +0000 admin http://kazu69.net/blog/?p=547 jsでアニメーションが面倒で、Tweenerとか使えば、もっと簡単にできるよなー。と、思ったのでやってみた。

もちろん、TweenerはつかえないのでJSTweener.jsで。

こんな感じ。

やっぱり楽だね、ただそれだけ。

]]> http://kazu69.net/blog/?feed=rss2&p=547 1 2010初詣 http://kazu69.net/blog/?p=541 http://kazu69.net/blog/?p=541#comments Sun, 17 Jan 2010 03:52:13 +0000 admin http://kazu69.net/blog/?p=541 2010年、おめでとうございます。
よく食べ、よく寝たお正月でした。

今年は初詣に筥崎宮へといきました。
筥崎宮楼門
筥崎宮楼門。「敵国降伏」の文字。元寇の際に祈願されたものだとか。

筥崎宮参道
すっかり初詣をすぎたので、参道の出店も人もまばら。

帰り道だったので、十日恵比寿神社にも足を伸ばしてみました。

十日恵比寿
商売繁盛祈願の方々ですごい行列。祈願までに１時間以上かかりました。

十日恵比寿出店
出店とか、昔ながらの雰囲気がいい感じだし。

十日恵比寿出店
福にあやかるグッズとかたくさんの出店とか、十日恵比寿ならでは。

十日恵比寿
お参りに１時間以上もかかったので、帰りに出店で暖まりました。

]]> http://kazu69.net/blog/?feed=rss2&p=541 0 2009 http://kazu69.net/blog/?p=540 http://kazu69.net/blog/?p=540#comments Thu, 31 Dec 2009 10:02:20 +0000 admin http://kazu69.net/blog/?p=540 2009年も終わります。
何はともあれ、終わるんだと思います。

今年は、結婚して、引越した。

年末に引越しした事もあり、段ボールに囲まれての年越しです。
いままでよりも、静かな住宅街でひっそりと新年を迎えます。

みなさん、よいお年を！

さて、ビールっ。

]]> http://kazu69.net/blog/?feed=rss2&p=540 0 THIS IS IT http://kazu69.net/blog/?p=531 http://kazu69.net/blog/?p=531#comments Sun, 29 Nov 2009 02:20:27 +0000 admin http://kazu69.net/blog/?p=531 話題の映画「THIS IS IT」をやっと見ました。最終日のレイトショーというか夜中にですね。
仕事を終えて、タクシーに飛び乗って、映画館へ。
あの時間帯なのに既に完売らしく、すごいっす。

正直、マイケルにあまり興味なかった人間でしたがこの映画見て、この人の天才ぶりに驚き、感動した。
KINGと呼ばれるだけあり音楽の知識、それを効果的に見せる演出、最新の技術などを取り入れるチャレンジ精神、そして謙虚さ。すごい、すごいよ。

すべて頭の中で出来上がっていて、その領域までスタッフのレベルを持ち上げていってんじゃないかと思う。

50歳なのにあの体のキレ。Billie Jeanのリハのダンスシーンでは会場から拍手が。
開演からずっと鳥肌な状態でした。

もう一回見たいと久々におもった。
いやー、すごい。一度、みたかったな、生で。
あれほどなら。

ありがとう、マイケル。

this is it

]]> http://kazu69.net/blog/?feed=rss2&p=531 0 magic mouseを買ってみた http://kazu69.net/blog/?p=518 http://kazu69.net/blog/?p=518#comments Sun, 01 Nov 2009 09:16:22 +0000 admin http://kazu69.net/blog/?p=518 今まで使っていたマウスの調子が悪かったので、この機会にmagic mouseを買ってみた。

apple storeで試してから検討しようと思っていたんですが、実際に触れてみて、デザイン性と使いやすさに
即買いしてしまった。

いまさら機能とか説明不要と思うので、ボクが思った点としては、

  • 電池いれるので重いかなぁとおもったけど、軽いです。
  • 縦より横スクロールとかすると心地よいです。(斜めスクロールや回転スクロールとかもできます)
  • Mighty Mouseの人は乗り換えると、心地よいはず。スクロールが。
  • 電池式でなく、USBで充電するかたににしたもっと軽かったのかも。(専用dockで充電)
  • 2本指でのスワイプはsafariだけ対応してるみたい。



]]> http://kazu69.net/blog/?feed=rss2&p=518 0 夏の終わりに http://kazu69.net/blog/?p=508 http://kazu69.net/blog/?p=508#comments Tue, 29 Sep 2009 15:14:55 +0000 admin http://kazu69.net/blog/?p=508 今年の夏の終わりに海の中道のルイガンズに行ってきました。

今回もディナーコース付きのプランで、おいしい料理とお酒をいただきました。
前日寝てなかったけど、つかれも感じさせないくらいにいいロケーション、それを見ながら
おいしい料理を味わえました。
週末という事で花火もあがり、ちょっと贅沢な時間でした。

食事後はプライベートビーチを散歩しながら、心地よい秋風と潮の音で気持ちよく眠れました。

あまりたいした事もしてないのに、贅沢したなぁ。


いつも昼下がりに絵になるbar


部屋からは市内の夜景とホテルのプール、海。


プールサイドのメインダイニングPoolPoolPool（プールプールプール）。


レストランからすぐにプールに出たり。


プールサイドで横になってくつろいだり。


夜のホテル内を観賞したり。

また、贅沢しにきたくなる。

]]> http://kazu69.net/blog/?feed=rss2&p=508 0