フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
みなさん、こんにちは お元気ですか？僕は元気です。 さて 最近よく、「いいね！」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。 そんな中で、今後重要になってくるんじゃないかと思われる OGP （Open Graph Protocol）と言われる仕様があります。今日はそのことについて書いてみたいと思います。 OGP? おーじーぴー？？とはなんでしょうか。 OGP とは 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。 ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別す
フェイスブックが面白い - IT戦記
フェイスブック楽しい！ はじめに みなさんこんにちは！フェイスブックしてますか？ ゆうすけべーが書いているように、最近本当にフェイスブックがおもしろいなーと感じます。 ゆーすけべー日記 というわけで、一人で使っていたときから人が増えてきたときまでの雰囲気を思い出しつつ、僕が感じているフェイスブックのおもしろさ、特徴、楽しみ方などを紹介していけたらと思います。 ちょっと長くなっちゃいますけど、よろしくお願いします！ フェイスブックの一番の面白さは「速さ」 僕が感じているフェイスブックの良さは、一言で言ってしまえば「コミュニケーションの速さ」なんだと思います。 速さと言っても、システム的な速さだけではなくって「コミュニケーション」の速さです。 フェイスブックの「コミュニケーションの速さ」は主に以下の３点にあると思っています。 「左下」の通知が素早い 書き込むより早く「いいね！」が伝わる 「一緒
Firefox 拡張を jQuery で書く！ Jetpack を使ってみた。 - IT戦記
はじめに JavaScript が書ければ、誰でも簡単に Firefox の拡張が書けてしまう。しかも、もれなく jQuery が付いて来る！ というものを Mozilla Labs がリリースしたみたいですね。 https://jetpack.mozillalabs.com/ というわけで 少し触ってみました Jetpack Feature の書き方 Jetpack で書く Firefox 拡張を「Jetpack Feature」といいます。 これは、以下の 2 つのものを用意すれば誰でも簡単に公開することが出来ます。 JavaScript ファイル 公開用 HTML ファイル JavaScript ファイル JavaScript ファイルには、 Jetpack Feature のアプリケーションコードを書きます。 (function() { Jetpack.statusBar.appe
はじめての mixi アプリ - IT戦記
IE ではたぶん動きません。 友達一覧取得 <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="simple mixi Appli"> <Require feature="opensocial-0.8"/> </ModulePrefs> <Content type="html"> <
タイトルアニメーション - IT戦記
ごめんなさいごめんなさい＞＜ location.href を document.title に変えてみただけ
はてなブックマークのコンテンツの JavaScript を高速化する - IT戦記
はじめに 「新はてなブックマーク」になったということで、とっても便利になったのですが、ブックマーク一覧ページ*1が若干 JavaScript に時間が掛かっているみたいです。 というわけで 調査してみたいと思います。調査して、改善できそうなところは後で纏めて「はてなアイデア」にでも登録しようと思います。 この日記は調査しながら、過程を書いていくつもりです。 準備 まずは、人のサイトの JavaScript を書き換えて試してみるための環境を作ります。 作業用ディレクトリを作る とりあえず、ホームに HatenaJS というディレクトリを作ります。 $ mkdir HatenaJS $ cd HatenaJS CocProxy をダウンロードしてくる 以下から CocProxy というツールをダウンロードしてきます。 http://coderepos.org/share/wiki/CocPr
JavaScript はどのように実行されるか - IT戦記
JavaScript はどのように実行されるか Safari*1 の実装を例に JavaScript はどのようにして実行されているかを書く。自分用のメモ。日本語の出来は気にしない 1. ブラウザを起動して以下のようなページを開いたとする <html> <head> <script> var a = 1; var b = 2; alert(a + b); </script> </head> <body> </body> </html> 2. インターネットからデータが到着する そうすると WebCore::FrameLoader::write という関数に生の文字列が渡される。型は char* だ。 http://trac.webkit.org/browser/trunk/WebCore/loader/FrameLoader.cpp#L990 この関数の中では、到着した文字の文字コードを解
動的ローディング雑感 - IT戦記
以下のエントリを読んで if(typeof external_script_onload=='function')external_script_onload("loaded"); こんな1行を追加します。もちろん、external_script_onloadって名前は任意です。 読み込む側はexternal_script_onloadにcallback関数を定義してあげればOKです。これで、Scriptが読み込まれて 実行された最後に、external_script_onloadが呼ばれることになります。 外部JavaScriptの動的ロード - os0x.blog これはかなりありなんじゃないかと思いました 例えば、以下のようなコードを // ... main code var ss = document.getElementsByTagName('script'); try { ss
プログラミングキャンプの講義資料を公開します - IT戦記
はじめに もうすぐ講義が開始されるので、同じタイミングでここで講義資料を公開したいと思います。 JavaScript の難しいところとか、マニアックなことは一切使わずに「プログラミングの楽しさ」みたいなものを伝えられたら嬉しいです。 この資料のターゲットは、プログラミング初心者です。 リンク http://svn.coderepos.org/share/docs/amachang/20080813-procamp2008/index.html 注意 今日の学生の出来によって、会期中ちょこちょこ資料の内容が変わると思います。
ステップ・バイ・ステップで Pathtraq の API を使ってみよう - IT戦記
はじめに 「このサイトの人気ページを見たい！」 「このページに、皆いったいどうやって来てるんだろう？」 「このページを見たあとは、どこを見に行ってるんだろう？」 そんなこと思ったことありませんか？ Pathtraq API を使うことで、そんな情報をあなたのソフトウェア、ウェブアプリケーションに組込めるようになりました！やった！ でも、難しいんでしょ＞＜？ 違うよ。全然違うよ。超簡単だよ。 というわけで、今日は JavaScript から Pathtraq API を使ってみましょう！ Step 1 Pathtraq API を目で見てみよう！ やり方は、簡単です。 http://api.pathtraq.com/pages?url=**ここに調べたい URL** とやるだけです。 試しに、このブログを見てみましょう。 RSS が出力されました。 これは、 IT 戦記内で最近人気のページを
JavaScript OOP におけるクラス定義方法 - IT戦記
クラスを定義する方法です。考え付くだけでも、これだけたくさんの方法があります。やっぱり、 JavaScript って柔軟であり複雑な言語ですね。 ちなみに、以下のすべての例はこのクラスを定義しています。 ちなみに、僕は一番下の書き方ですね。 皆さんはどのようにプログラミングしていますか？ プロトタイプを使わない。クロージャを使う。 // プロトタイプを使わない。 // クロージャを使う。 function Item(price) { this.showPrice = function() { alert(price); }; } プロトタイプを使わない。クロージャを使わない。 // プロトタイプを使わない。 // クロージャを使わない。 function Item(price) { this.price = price; this.showPrice = function() { aler
昔のプレゼン資料の URL が変わります＞＜ - IT戦記
経緯 今まで色々なプレゼン資料を usrb.in ドメイン以下に置かせていただいていたのですが、そのマシンを別の用途に使うことになったらしいので、すべての資料を移動させることになりました。 対象の URL http://usrb.in/amachang/static 以下の URL は基本的にすべてですが、主な URL は以下のものです。 http://usrb.in/amachang/static/gaiax01/ http://usrb.in/amachang/static/cssstudy/200701/ http://usrb.in/amachang/static/cssstudy/200701/haihu.html http://usrb.in/amachang/static/shibuyaes/ http://usrb.in/amachang/static/devsum/ ht
IT戦記 - 複雑で重くなった JavaScript を超超ちょ???高速化する方法。
前回(id:amachang:20060104)の改良版です。前回のでやっていたら、queueを走査する時間がかかりすぎるようになって結局崩壊してしまったので、さらに改良しました。ただし、今回のは時間が多少ずれる場合があります。なので、ストップウォッチなどのプログラムを作る場合は使わないでください。 主な改良点としては .(ドット) 減らす。 文字列リテラルをループ中に記述しない。 ループ。ループのネストを減らす。 new を減らす。 関数コールを減らす。 より早い演算を使う。(+1 を ++ にするとか。他にもいっぱい) これで、めっちゃ早くなりました。やヴぁいです。 ミニマム版 var _SIi=10,_SIM='第一引数が不正です。',_SIl=0,_SIc=0,_SIS ='string',_SIF='function',_SIf=window.setInterval,_SIp=[
JavaScript の配列と連想配列の違い - IT戦記
id:cheesepie:20070131:1170172709 最近は、こういう風に JavaScript を勉強する人が増えていてとても嬉しいです ＾＾ id:cheesepie さん頑張ってください！ で、ちょっと配列と連想配列の使いかたが違うようなので、エントリーを書こうと思いました。おせっかいだったらすみません＞＜ ！ やっぱり、このへんが JavaScript の難しいところのひとつなのだろうか。 ということで、 JavaScript の配列と連想配列の違い いってみよおー 連想配列とは JavaScript では連想配列は一番シンプルなオブジェクトのことである。つまり、すべてのオブジェクトは連想配列である。 以下のすべての連想配列はまったく同じものである。 // 1 var obj = { hoge: 'hoge' }; // 2 var obj = { 'hoge': 'h
Prototype.js を使った JavaScript OOP 講座 #03
社内の勉強会の資料をここに公開していきます。社内の人も社外の人も読んでください。 ※ターゲットは JavaScript は書いたことない、オブジェクト指向言語プログラマ。 ※信念は「教わるのではなく、必死に着いていきませう」 前回までの内容で Prototype.js でどのようにプログラムを書いていくか理解できたと思います。 ここからは、関数やクラスを覚えた数だけ Prototype.js を使えるようになると思います。 しかし、それではいつか必ず躓きます。他人の書いた JavaScript を使うためにはそのコードを読める必要があります。 JavaScript は、言語の仕様レベルの部分までかなり書き換えることが出来ます。 そのため、もし、動作がおかしくなった場合に、どこがどう影響したか自分で調べられなければならないのです。 今回は、 Prototype.js を読むために必要な知識を
onclick 属性問題について - IT戦記
本気でやるならonclick属性は避けてライブラリを活用すべき - 帰ってきたHolyGrailとHoryGrailの区別がつかない日記 に関して この先、 HTML に onclick と書いても石を投げられないように書いておく＞＜ 僕も onclick 属性がダメだと思っていた時代もありました。でも、今は時々使うなあ。 （あ、でも、 HTML と JS で分業している場合は、使わないほうがいいよね＾＾；そこだけは言っておく。） JavaScript 入門の記事を書くときに onclick 属性がダメだとしたら、いろいろ本質的でないことを説明しなきゃいけない。 現状では onclick 属性が、もっとも簡単に HTML にイベントをマッピングできる方法だから、そんなに目くじらたてなくてもいいんじゃないかなあ？ たとえば 以下は、クリック時に href に GET を送るための oncli
Re: 一晩で覚えるjQueryの逆引き基礎サンプル7つ*ホームページを作る人のネタ帳 - IT戦記
最後の解決法を悩んでるようなので、僕の回答。 入力補助の情報は HTML より、 JavaScript で持ったほうがいいかもしれません var data = { title1: ["hoge", "fuga", "piyo"], title2: ["hoge", "fuga", "piyo"], title3: ["hoge", "fuga", "piyo"] }; $(function(){ $("div.hoge > div.menu > a").click(function () { var d = data[this.title]; $('div.hoge > input').each(function(i) { $(this).val(d[i]) }); return false; }); }); でも、↑これだと、クリック時に毎回 input を探すので、パフォーマンスを気に
IE8 で実装された Selectors API とは何か？ - IT戦記
はじめに IE8 には Selectors API という新しい仕様が実装されました。 ということで、今後 DOM 操作 API の主流になるであろう Selectors API についてまとめておきます。 Selectors API が使えるブラウザ 2008 年 3 月 6 日現在の一覧 WebKit Build Archives | WebKit (開発版の Safari) Windows | Official Site for Microsoft Windows 10 Home & Pro OS, laptops, PCs, tablets & more (IE8 の Beta 版) Selectors API とは Selectors API とは W3C で定義された仕様です。詳細に関してはこちらをどうぞ 簡単に説明すると getElementsByTagName や getE
Developers Summit 2008 の資料を公開します。 - IT戦記
話のメインは オブジェクト指向です。 というよりも、僕が JavaScript のオブジェクト指向をこう理解している。という話です。 リンク http://amachang.art-code.org/devsum2008/ 言い訳 口頭で説明した個所も多いのですが、楽しんでいただけたら嬉しいです。
(function(){})() と function(){}() - IT戦記
自分用メモ // JavaScript でクロージャを書くときこう書く事が多い (function() {})() // 何故なら // function() {}() // と書くと // function() {} が式ではなく、文として解釈されてしまうからだ。 // 文として解釈されないためには、文の途中（最初以外）に function と書いてやる必要がある // なので、まず開きカッコを書いてやる。 ( // の後に function() {} // と書いてやると function は式になる ) // 正確には、カッコの対は The Grouping Operator という演算子である。 // カッコ以外にも var a = // のように代入演算子のあとでもいい function() {} // つまり、以下のような記述も可能である。 var b = function()
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
