James Koster Designer / Developer at Automattic. I (occasionally) blog about work stuff here. Father to one rambunctious Hungarian Vizsla

Twitter is a great service, but it would be nothing without the other sites, tools, and apps that help you get the most out of it. Here we highlight more than 60 of our favorite Twitter add-ons. See also: 8 Awesome Firefox Plugins for Twitter Apps, Widgets and Plugins - Windows Triqqr - Submit tweets directly to Twitter and view user profiles. Pwytter - Cross platform Python Twitter client with As

サーバを新しく移転させたまではよかったのですが、ふと気づくとMuninで描画させているグラフのうち、MySQL関連だけがすべてまったく表示されていないことが判明。よく見ると値自体が取得できておらず、グラフの右下に見える日時も更新されていない……。 以前に書いた記事中での対策を講じるもまったく表示されず、ほとほと困り果てたのですが、悪戦苦闘の末にようやくMySQLのグラフを表示させることに成功しました。 というわけで、どうやってMySQLのグラフを表示させたのかを以下、解説。 各プラグインの中身は単なるスクリプトファイルで、「/usr/share/munin/plugins/」にあります。このディレクトリにあるMySQL関連のプラグインファイルを開いてMySQLの値を取得する処理を追っかけた結果、基本的に以下のコマンドを投げてその値を取得していることが判明しました。 mysqladmin e

2022/1/13をもって お客様がご利用中のブラウザ (Internet Explorer) のサポートを終了いたしました。 （詳細はこちら） クックパッドが推奨する環境ではないため、正しく表示されないことがあります。 Microsoft Edge や Google Chrome をご利用ください。 （Microsoft Edgeでクックパッドにログインできない場合はこちら）

SBMのrel="nofollow"について考えてみる Buzzurlとlivedoor クリップが外部リンクにrel="nofollow"をつけたとの事で、各SBMサービス(+はてなブックマーク)のSEOについて調べてみました。 title要素 Buzzurl 「オリジナルのタイトル」- Buzzurl [バザール] / ソーシャルブックマーク livedoor クリップ livedoor クリップ - オリジナルのタイトル はてなブックマーク はてなブックマーク - オリジナルのタイトル Buzzurlの場合、オリジナルのタイトルが先に表示されているので、検索エンジンにオリジナルとBuzzurl内に複製されたコンテンツがともに表示されたら、どっちがオリジナルか分かりにくいですね。 h○要素 はてなブックマークはh1要素に、Buzzurlはh2要素に、livedoor クリップはh3要素

MovableType3.34から4.01へのアップデート MovableTypeも4.01と若干安定したと思いますのでアップデートを行いました。 当初、別のディレクトリで新規にMovableTypeを構築して既存のMovableTypeよりデータを移行、その後ドメインを新規のディレクトリに向けるという作業を行おうと思ったのですが(この方法が一番安全にサイトを停止せずにアップデートできる為)、MobaleTypeの3.3はurlとtagのエクスポートができないようです。 urlはタイムスタンプより生成しているので問題ないのですが、tagを手動で再設定は非常にめんどくさいので、既存のMovableTypeを直接アップデートしました。 ディレクトリのバックアップ FTPでMovableTypeをインストールしているディレクトリにアクセスして、すべてをダウンロードします。 DBのバックアップ M

ウェブ標準・コーディング・コンテスト Choose Opera 日本支部さんが「ウェブ標準の日々」を記念して、第１回「ウェブ標準・コーディング・コンテスト」を開催されます。 応募するサイトが指定されていませんので、これを機会にご自身のサイトをウェブ標準に準拠させてみるのも良いかもしれませんね。 商品も用意されています。 厳正なる審査の結果、優秀なウェブサイトを投稿してくれた４名の方に「ウェブ標準の日々」 入場チケット （16,000円相当）＋ １６日（月） イベント終了後に Opera CSO やスタッフを交えてのディナーパーティにご招待します。 お金がなくて、ウェブ標準の日々に参加できない方はこのコーディングコンテストでがんばってチケットを獲得してください。 そういえば かたくなまでに『Web』を『ウェブ』とカタカナ表記されているんですが、なにか理由があるんでしょうか？ 関連エントリー

table sortingのバグとか直してみた 先日紹介したtable sortingについて、たつをさんよりバグの指摘を受けました。 例えば、 3,10,2 を昇順にしても 2,3,10 にならず、10,2,3 になる。 つまり、「文字列」としてしかソートできない。 中略 ts_resortTable() の中の「var i = 0;」を「var i = 1;」にすれば まともに動くようになるよ。応急処置。 テーブルをソートできるようにするjsライブラリ table sorting をまともに使えるようにする ほんとですね。動いてないです。 で、ヒントもいただいてるのでソースをながめていると if (itm.substr(0,4) == "<!--" || itm.length == 0) { あたりがまともに動かない様子。 if (t.tBodies[0].rows[i].cells[

ビジネスエクスプレスが落とされる１０の理由 YSTのSEO対策の大原則といえば、Yahoo!ビジネスエクスプレス。 有料ですが、審査に通ればYahoo!カテゴリに登録サイトとして掲載されます。 審査基準を満たしていれば登録されるのですが、チェックはかなり厳しいです。 ビジネスエクスプレスが落とされるよくある理由(10以上ありますが)を事例を含めてまとめてみました。 独自性のあるコンテンツが不十分 よくある情報の場合は落とされます。 すでにYahoo!カテゴリに登録されているサイトと重複した内容が多く見受けられる 2サイト目を登録の際にコンテンツが重複している場合などに落とされることがあります 特定商取引に関する記述がない、もしくは不十分 商品を販売する場合だけでなく、商品・情報に電話、メールで問い合わせることが可能な場合も特定商取引に関する記述が必要になります。 サイトが制作中であると判断

Yahoo!がリニューアル！どうなるビジネスエクスプレス Yahoo! JAPANがサイトデザインのリニューアルを発表しました。 2008年初頭をめどにリニューアルを行うようです。 参考：Yahoo! JAPANがトップページデザイン変更を発表、秋からβテストを開始 発表されたデザインにはYahoo!カテゴリへのリンクがありません。 今までYahoo!カテゴリ登録を行うメリットの一つとしてTOPページからリンクをたどってくるユーザーがいたのですが、そのメリットは失われるようです。 現在、Yahoo!Japanのフッターにあるビジネスエクスプレスへのリンクも、リニューアル後のデザインでは削除されています。 Yahoo!カテゴリの露出は、かなり減るようです。 検索窓に『登録サイト』の選択が残っているのが、まだ救いです。 (米Yahoo!は登録サイト[Directory]の選択もmoreの中に隠

displayプロパティを初期値に戻す為のJavaScript table要素やtr要素などはブラウザ毎にdisplayプロパティが異なる為、何かいい方法はないかといろいろ試行錯誤していたら面白い事を発見しました。 document.getElementById(element).style.display = '' このようにdisplayプロパティに空欄を代入すると、displayプロパティが初期値に戻ります。 サンプル Firefox2とIE6で確認しました。 かなり便利そうです。 関連エントリー リンク先のはてなブックマーク数を表示するブックマークレット ie以外でもクリップボードが使えるsetClipboard.js 一番簡単な画像置換の方法-imageReplace.js- アルファ画像を扱うalphafilter.jsライブラリ javascriptで文字にドロップシャドウを

ニコニコ動画は毎日1680万円もの商品を売り上げているの記事でニコニコ動画でのアマゾン売り上げが予測されていました。 この記事によれば、ニコニコ市場ではアマゾンの商品売り上げが1日5600件に達したそうで、平均単価は3000円と高額なようです。1日当たりの売り上げと月間の売り上げも計算されていました。 5600件×3000円＝1680万円！ 日販1500万円と見做しても、月30日計算で4億5千万円！！ この売り上げから、実際にニコニコ事業部が受け取る収入も計算されていました。 amazonのアフィリエイト収入は発送数が1501個〜7000個までは売上の6.5％と規定されていますので、実際には月収110万円になると思われます。 この計算が正しいのか、Googleの電卓機能で計算してみました。 1日の収入

妄想ですか？偶然ですか？顔に見えてしまうモノ大集合 子供の頃、寝るときは毎日天井を見ていたわけですが、天井の板間の模様がうねっていて、何かの顔のようでした。 ちょっといじわるなパックマンというような横顔で、ちょうど同じようにうねった模様が３箇所あったことから、その３匹の横顔を見ながら毎日寝ていました。 偶然とも、妄想とも、想像とも言います。 さらにじゅうたんのうねった模様が、怒ったおばさんの顔に見えてイヤだなぁと思っていた記憶もあります。 車も全部顔に見えます。 ちょっとマヌケな顔の車だとか、いかつい顔の車だとか、そんな風に見えています。 そんな風にモノによって、配置によって、そして視点によって顔に見えるわけですが、そんな顔特集を見つけましたのでご紹介します。 顔・かお・カオ特集です。 こういうかわいいモンスターは教育テレビに出て来そうなキュートな悪者タイプ 色は一色のほうがよかったとは思

Re:href="#" onclick の悪習 ネタ元：某日記：href="#" onclick の悪習 <a href="#" onclick="...">検索</a> なんて書き方やめようぜ！というお話 a要素のhref属性に値が入ってるとonclick属性の内容を実行後にhref属性の値を参照しようとする。 #なんかが入ってるとページの一番上部にページ内遷移をする。(※1) 某日記さんの代替案ですけどspanで代替するもの <span style="cursor: pointer" onclick="...">検索</span> 私だとこんな書き方 <a href="javascript:void(0)" onclick="...">検索</a> onclickイベントハンドラを実行しようとしてるなら、こんな書き方もある <a href="javascript:（onclickの内容

ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja

クロスフェードを実装する為のCrossfader WWW WATCHさんでクロスフェードを実装する為のCrossfaderが紹介されていたので使ってみました。 クロスフェードとは物がゆっくりと消えていきながら別の物が現れる処理のこと。 右メニューの『姉妹サイト』のバナーを見ていただいたら分かると思うのですが、webページの場合は要素をフィードアウトさせながら別の要素を表示する処理になります。 ライセンス形態はCreative Commonsの『Attribution』『Share Alike』で公開されていますので『著作権形態』と『派生後のライセンス形態』にさえ気を使えば自由に使用できます。 使い方 配布元のBrand Spanking Newよりcrossfaderをダウンロードします。(執筆時は1.3が最新バージョン) ダウンロードしたファイルを解凍すると中にbsn.Crossfade

空前絶後のJavaScriptブーム!『jsライブラリ』に焦点を絞りお話しました。 音声データ、スライドデータはCSS Nite公式ブログより公開されるので少々お待ちください。 事前にデザイナーさん数人に「JavaScriptで何を聞きたい？」と聞いたところ『DOM』と『jsライブラリ』という声が多かったです。 JavaScriptブームを語る上で欠かせない2つのキーワードのようですね。 『DOM』に関しては中村享介さんや羽田野太巳さんがお話されるだろと思い、私は『jsライブラリ』をチョイス。 あまりJavaScriptの難しい話ではなく、JavaScriptを覚えなくても、これだけWebサイトをインタラクティブにできるよ、効率的なWebサイトが作成できるよ、という感じの内容です。 最後のグループディスカッションは、『どのようなライブラリがあれば、あなたの仕事は効率的になりますか？』とのテ

CSSをデバッグするツール色々 Web標準の日々のグループディスカッションでCSSの編集を直感的(?)にできるライブラリの案が出てたのですが、世の中すばらしいツールがいっぱいあるので、今回はそんなツールを紹介します。 Firebug Firefoxのアドオン(拡張機能)のFirebugは最強です。 私がメインで使っているCSSデバッグツールはFirebugです。 もうFirebugがないとCSSなんて触れないと言っても過言ではありません。 公式サイトよりインストールしたら、右下にできる緑丸ボタン(下図a)でFirebugを起動できます。 起動したら左上の調査ボタン(下図b)をクリックして、調査したい要素を選択すればその要素に反映されいるCSSがすべて表示されます。 また、リアルタイム編集することも可能です。 Internet Explorer Developer Toolbar IEでのデ

ページ内リンクをスマートにするsmoothScroll.js ページ内リンクをスムーズに行うjsライブラリ、smoothScroll.jsを作成したので公開します。 どういったものかはサンプルで確認してください。 <a href="#header">ページの先頭に戻る</a> などのページ内リンクをスムーズな移動に変更します。 これにより、エンドユーザーがページが遷移したという錯覚におちいることはありません。 設置方法は簡単です。 smoothScroll.jsをダウンロードして、設置したいページで取りこみます。 <script type="text/javascript" src="./smoothScroll.js"></script> 特定のリンクはスムーズさせない smoothScroll.jsは#（ハッシュ）付きのリンクを全てスムーズスクリプトに変換します。他のライブラリなどで#

Hatena ID is an account used for various Hatena services.

FeedReaderをFastladderに変更 使用しているFeedReaderをLivedoorReaderからFastladderに変更しました。 FastladderはLivedoorReaderの英語版なのでLivedoorReaderより何かが優れているということはないのですが、『なんとなくデザインが洗練されている』という理由だけで変更しました。 Fastladderは海外マーケットを視野に入れているらしく『メールアドレス』だけでアカウントが簡単に作成できます。 (説明ページは当然英語ですけどね) せっかくなのでLivedoorReader→Fastladderへの移行方法を簡単に解説いたします。 feed情報の移行 まずはLivedoorReaderで購読しているfeed情報を取得します。 LivedoorReaderのトップメニューの『設定変更』を選択。 livedoor

startmac 生まれてはじめて、プログラミングなるものしてみんとて。 いやー、Webディレクターをしていると、ちょっとでいいから自分でプログラミングができるといいなと思いはじめるんですよねー。 でもあまりにも敷居が高くて、なかなか手を出せず、そしてどんどん月日は流れていくばかり。 で、このたびStart Macに当選してMacBookをもらったとき、これを機に、 「今度こそ、絶対に、何が何でもプログラミングを学ぼう」 と思ったんですよね。ほら、MacってベースがUNIXだから、なんとなくプログラミングとかもやりやすそうな気もするし。 なので、今回はちょっと気合を入れて、先生を見つけて、時間をとって、とうとうやってしまいました。 プログラミング童貞を捧げる相手は、「Ruby on Rails」。とても簡単にプログラミングができると話題のフレームワークです。 Rubyというプログラミング言

http://svn.coderepos.org/share/lang/javascript/jstweener/trunk/examples/mtypo_bezier.html http://svn.coderepos.org/share/lang/javascript/jstweener/trunk/examples/mtypo.html JSTweener の機能追加と同時に、もちょっとサンプルになんか作ってみようかな、ということでモーションタイポグラフィーで遊んでみました。思ったよりは重くなかった感じです。半透明にすると重くなるかな、と思いきやどのブラウザでも割と普通に。 でも JS だと一文字一文字の横幅を正確に求めることができず(IEでできるのかな)、破壊的な動きなら出来るんですけど、あらかじめレンダリングされるであろう場所に文字を吸着とかかなり難しそうな感。 JSTweene

タイトルママ。Firefox で firebug つかってる時に結果をクリップボードに入れたい！firebug のコンソールをコピペすると改行が無くなってレイアウトが乱れる！というか setClipboard(scg.generate()) したい！と思ったのでおもむろに setClipboard() をワンライナ実装してみました。 追記・Firebug には copy というクリップボードに入れる便利 API があることを id:nitoyon さんに教えて貰いました。なんだってー！ javascript:(function(){var B=document.createElement("object");document.body.appendChild(B);var A=document.createElement("param");A.setAttribute("name","al

地球の緑を守るために、今できる50のことがら 環境問題とかエコとか言うと、過激なテロに近いことをやる組織や、うさんくさい話、環境を盾にした業者など、悪い面がよく目立ちます。 かといって環境問題を無視していいわけではありません。 アルファルファモザイクさんのある小学生の作文「環境問題、エコについて」という記事が話題です。幼稚ではありますが、鋭く「昭和の人が環境を壊したのだ」と指摘しています。 環境を守ることは、子供たちの住む場所を守る事です。今の大人たちが死ぬまではまだだいじょうぶかもしれませんが、子供たちや、その子供たちの住む場所は、無くなってしまうかもしれません。そして、多分このままでは、子供たちの世代がどうあがこうが、どうにもならなくなるでしょう。 子供たちのために、今できることを。 ということで、ちょうど環境保護の50のTIPSという記事があったので、ご紹介しましょう。以下よりどうぞ

「御渡り/MIWATARI」が国際映画祭大賞を受賞グリーンピース製作の気候変動に関する映像作品「御渡り/MIWATARI」が、タイで開催された国際映画祭の最優秀賞となるドキュメンタリー部門審査員大賞を受賞しました。

2-Column website templates are easily the most popular, as well as the most common free templates available. Here are more than 80 of the best. You may also want to check out the following: 40+ Free One-Column Website Templates, 50 More Beautiful Blogger Templates, 20 Wordpress 4-Column Themes Blooming - Rounded corners and the flower header give this simple template a little extra class.

ああ。 javascript:(function(){var s=document.createElement('script');s.src='...';document.documentElement.appendChild(s)})() より javascript:(function(s){s.src='...';document.documentElement.appendChild(s)})(document.createElement('script')) の方が短いな。これからはこの書き方にしよう。

様々なWebアプリケーションが登場し、GUIのアプリケーションを脅かしている。メールやカレンダーは言うに及ばず、画像編集やドローイングを可能にするものも登場している。 しかし、それでもWebアプリケーションだからと言う目で見られる事がある。WebアプリケーションとGUIの見えざる壁、それを取り払うのがこれだ。 今回紹介するオープンソース・ソフトウェアはWebRunner、WebアプリケーションをGUIのように扱えるソフトウェアだ。 WebRunnerは簡単に言えばFIrefoxの機能縮小版だ。アドレスバーも、ツールバーも、現状では検索すらない。右クリックしても出てくるのはコピー＆貼付け等のテキスト操作のみ。だがこれで良いのだ。 WebRunnerを使えば、特定のサイトを便利に使う事ができる。まず第一にプロセスが通常のブラウジングと別で立ち上がるので、ブラウザが落ちたとしても影響がない。また

PC上の必要な操作は、やる気と使い方次第でオープンソースだけで殆どがこなす事ができる。もちろん、専門手的な操作やそれを手軽に行うには商用の方が良い場合もあるが、大抵そのレベルではなく終わる事が多い。 だが、オープンソースを知らなければならないし、何よりその質はピンキリだ。良いものを知りたいなら、これを使ってみよう。 今回紹介するオープンソース・ソフトウェアはOpenDisc、レベルの高いソフトウェアを収録したソフトウェア集だ。 OpenDiscはオープンソース・ソフトウェアを詰め合わせたCDだ。サイズは555MB、巨大ではあるが一度ダウンロードしてしまえば長期間利用できる事、各ソフトウェアを探す手間を考えると決して面倒ではない。配布はCDイメージで行われている。特徴としては、完成度の高いものが多い点にある。 まずデザインとして、Blender/Dia/GIMP/Inkscape/Nvu/S

留学していたときは「ドレスコード」なるものに悩まされたものだ。 今日はビジネスカジュアルで、今日はセミフォーマルで、といった具合にイベントの案内に書いてあるのだが、具体的にどこがどれだけ、というのは経験から学んでいくしかなかった。 しかしDress Code Guideがあればそうした悩みも解決だ。 このサイトでは国ごとにどのドレスコードだったらこの服装、というのを教えてくれる。ご親切にも気候に応じた服装までお勧めしてくれる。 海外でビジネスをしている人には便利なサイトではなかろうか。知っておいても損はないですな。

2007年09月29日17:55 カテゴリ翻訳/紹介 アマとプロとが選んだディストピア映画歴代トップ25 - 1 これ、よくできているので備忘録もかねて。25-1 Top 50 Dystopian Movies of All Time 50 - 26 はこちら。 元リンクは、誰でも投票できるIMDBと、プロの批評であるRotten Tomatoesを足して二で割って順位を算出しています。下位の方のリストはとにかく、上位の方はかなり納得がいく順位に思えます。日本も含め、非英語圏の健闘も目立ちます。 今回は順位だけ借りて、寸評部分はあくまでも私の備忘録となっています。内容に関してはリンク元を参照のこと。 文字数が多すぎるとlivedoor Blogに言われてしまったので、二つにわけています。 25. Gattaca (1997) [ガタカ] IMDB: 7.7 | Rotten Tomatoe

文字サイズの変更を取得するJavaScript heightLine.jsで使用しているのですが、文字サイズの変更を取得するJavaScript。 そういうイベントハンドラがあればいいものの、なさそうなので自作しました。 var e = document.createElement("div"); var s = document.createTextNode("S"); e.appendChild(s); e.style.visibility="hidden" e.style.position="absolute" e.style.top="0" document.body.appendChild(e); var defHeight = e.offsetHeight; checkBoxSize = function(){ if(defHeight != e.offsetHeight){