タグ

ブックマーク / amachang.hatenablog.com (39)

  • WebKit サーバーというものを作ってみた - IT戦記

    みなさん お久しぶりですヽ(´ー`)ノ夏休みの宿題終わりました? 毎日が夏休みの最終日みたいな生活してるあまちゃんです! さてさて 今日は WebKit サーバーというものを作ってみたので、紹介してみます。 WebKit って何? WebKit っていうのは Chrome や Safari の中に入ってるブラウザのエンジンのことです! 実はブラウザっていうのは、エンジン部分と見た目の部分(タブとかボタンとかね)に別れていて、意外と違うブラウザでもエンジン部分は同じものを使ってるってことも多いんですよ(*´ー`) ブラウザのサーバーってどういうこと? 要は、サーバーサイドでブラウザを起動して JavaScript を実行したり、 JavaScript が実行されないと読めないページから値を持ってくるのに使ったりしようという魂胆です。 今まではそういうのなかったの? 実は、今までは JavaS

    WebKit サーバーというものを作ってみた - IT戦記
  • はてなダイアリーにいいねボタンを置く方法 - IT戦記

    たっち! みなさん、こんにちは お元気ですか、僕はアイスのあとラーメンべて気持ち悪い状態ですが元気です。 さてさて 最近は、フェイスブックやミクシィやツイッターなどの SNS で面白いと思ったモノを紹介し合う文化が定着してきているような気がします。 そんな中で、ウェブページを紹介するために使われるためにウェブページに置かれるものが「いいね!」ボタンだったり、「ツイート」ボタンだったりするわけですね。 というわけで、はてなダイアリーにそういったボタンを配置する方法を紹介したいと思います。 ここで紹介する方法は、ちゃんと理解して置きたい人向け、 XML や HTML を分かっている人向けとなります。 はてなダイアリーには自由な HTML を貼り付けられない まあ、普通に自由に HTML を貼り付けられる環境であれば、ただ単に提供されるボタン用の HTML を張り付けるだけなので簡単です。

    はてなダイアリーにいいねボタンを置く方法 - IT戦記
  • フェイスブックの新 API でフェイスブックアプリのテストを自動化しよう。 - IT戦記

    みなさま お久しぶりです。最近フェイスブックアプリを作ったりしてますが、やっぱりテストが大変ですよね>< と思っていたら、今日以下のような API が公開されたみたいです! Test User - グラフAPI - ドキュメンテーション - 開発者向けFacebook アプリをインストールしている、テストユーザーを API で作ってそのユーザーを使ってテストできるようになるんですね! すばらしい! と、いうわけでさっそく試してみた。 まずはアプリの access_token ゲット! まずは、アプリの access_token を取得します。 以下のように POST してください。 $ curl -F grant_type=client_credentials -F client_id=ここにアプリケーションのID -F client_secret=ここにシークレットキー https://

    フェイスブックの新 API でフェイスブックアプリのテストを自動化しよう。 - IT戦記
  • Tabnagging の自衛用 User JavaScript を書いてみた - IT戦記

    Tabnagging というフィッシング手法があるそうです。 詳しい内容は、以下の記事をごらんください。 ブラウザでたくさんのタブを開いてネットサーフィン! あなたが知らないうちに非アクティブなタブの内容が偽のGmailページに書き換えられた!(タブのアイコンも変わる!) ← 別にGmailじゃなくてもFacebookでもmixiでも。 あなたがそのタブに戻ってくるとGmail(もしくは他のサービス)のログイン画面が!(URLはおかしいけれどあなたは気づかない!) ID&PWDを入力してしまってあなた終了のお知らせ…orz ブラウザのタブを使ったフィッシングの最新手法『Tabnagging』が巧妙すぎる件… | IDEA*IDEA これは…!! というわけで、とりあえずタイトルを「ホスト名を省いたドメイン」に書き換える User JavaScript を書いてみた。 これをインストールする

    Tabnagging の自衛用 User JavaScript を書いてみた - IT戦記
  • hCalendar を使って予定を公開しよう! - IT戦記

    はじめに みなさん、こんばんわ! さてさて最近のことですが、 Google の検索結果にイベントや予定へのリンクが表示されるようになりましたね!(まだ、英語版だけですけどね^^;) ASCII.jp:Google、リッチスニペットでイベントの日時や場所表示に対応 以下のような感じで表示されるみたいです! ウェブページの中に書かれた「予定」や「イベント」などを Google 先生が理解して表示しているんですね! この予定やイベントはどうやって探してるの? Google は hCalendar という形式のデータを読んで、予定やイベントを探しているようです。 というわけで、今日はこの Google が使っている hCalendar というものが「どういうもので」「どうやって活用すればいいか」を実例を交えながら紹介したいと思います。 hCalendar って何? hCalendar とは「カレン

    hCalendar を使って予定を公開しよう! - IT戦記
  • IT アンカンファレンスをやってみたい! - IT戦記

    アンカンファレンスをやろう! みなさんは、アンカンファレンスというイベントのスタイルをご存知でしょうか。 先月、 id:AKIMOTO と「北陸で IT 系のイベントをやりたいね。」という話になり、「それなら、アンカンファレンスがいいよ」という話になりました。 アンカンファレンス?アンカンファレンスってなんでしょうか。 僕も知らなかったのですが、調べてみたところ、とっても面白そうでした。 なので、是非北陸で「IT 系でアンカンファレンス的なイベント」をやってみようということになったのです。 ↑突然、語りだす id:AKIMOTO のイメージ写真 じゃあ、アンカンファレンスって実際どんな感じのイベントになるの? では、シミュレーションもかねてイベントにいったつもりで書いてみます。 実際にイベントに行ったつもりで読んでくださいね>< レッツ、シミュレーション!! 会場に到着 まず、会場に到着す

    IT アンカンファレンスをやってみたい! - IT戦記
  • ブラウザで X86 のマシン語を動かす! Google 謹製 Native Client をさっそく試してみる - IT戦記

    はじめに Google から、非常に面白そうなソフトウェアがリリースされました! その名も Native Client なんとブラウザ上で X86 のバイナリを動かしてしまうそうです。 これはすごい! さっそく試してみたいと思います。その過程を逐次更新していきます。 自分が試したときの環境 自分が試す環境は、以下の通りです。 Mac OS X Xcode の gcc (version 4.0.1 (Apple Inc. build 5465)) python 2.5.1 準備 では、さっそく準備をしましょう。 http://nativeclient.googlecode.com/svn/trunk/nacl/googleclient/native_client/documentation/getting_started.html を参考にやってみます。 環境一式をダウンロード まずは、以下

    ブラウザで X86 のマシン語を動かす! Google 謹製 Native Client をさっそく試してみる - IT戦記
  • C++ のコードを Flash Player で動かす! Alchemy を速攻試してみる。 - IT戦記

    はじめに Adobe から C/C++ で書いたコードを Flash や AIR で動かす Alchemy というものがリリースされましたね! Alchemy - Adobe Labs これはすごい!ということで、少し試してみたいと思います。 その様子をリアルタイムに書いていきます。ちゃんと出来るかな 環境 OS は Mac OS X で gcc 、 java は入っているものとします。 ホームディレクトリ(/Users/amachang)に AlchemyTest というディレクトリを作って作業します。 インストール まずは、いろいろインストールします。 Flash Player 10 Debugger Version Adobe Flash Player - Debug Downloads ここからダウンロードしてきて、普通にインストールします。 Flex SDK 以下から Flex

    C++ のコードを Flash Player で動かす! Alchemy を速攻試してみる。 - IT戦記
  • 新はてなブックマークのエントリーをお気に入りユーザの数順に並び替える JavaScript - IT戦記

    結構便利です。 javascript:Ten.DOM.getElementsByTagAndClassName('ul','hotentry').forEach(function(e){Ten.Selector.getElementsBySelector('> li',e).sort(function(a,b){return Ten.DOM.getElementsByTagAndClassName('img','profile-image',b).length-Ten.DOM.getElementsByTagAndClassName('img','profile-image',a).length}).forEach(function(l){ e.appendChild(l);})}); お気に入り「率」ならこんな感じ javascript:Ten.DOM.getElementsByTagA

    新はてなブックマークのエントリーをお気に入りユーザの数順に並び替える JavaScript - IT戦記
  • Terminal.app を軽くする方法 - IT戦記

    プログラマの人は ずっとターミナル開きっぱなしって人多いですよね? Mac の場合 Terminal.app というターミナルがデフォルトで ついていて、それを開きっぱなしって人が多いんじゃないでしょうか。 問題点 Terminal.app をデフォルトの設定のまま使ってると問題点がある。 何か別の作業をした後に、久しぶりに Terminal.app をアクティブにすると、固まるのだ。 実はこれ、毎回相当ダメージを受ける。 で、解決策が分かった スクロールバッファを小さくすればいい。 なんとデフォルトの設定では無制限にスクロールバッファを保存する設定になっているのだ。 たまたま cat したファイルがものすごい容量だったなんてことよくあることなのに>< それが、全部スワップに入ってしまう。 スクロールバッファを小さくする方法 右上のメニューから「ターミナル」→「環境設定」→「設定」→「ウィ

    Terminal.app を軽くする方法 - IT戦記
  • サーバー起動用に JavaScript が 1 秒以上実行されなくて alert しないブラウザを作る - IT戦記

    はじめに サムネイルサーバーのようなサービスを作るときには、ウェブサーバー上にブラウザを乗せる必要があります。 問題 ただ、そういった用途でブラウザを使う場合。 JavaScript が無限ループに落ち入らないように配慮する必要があります。 ほとんどの場合は、 JavaScript 自体をオフにすることが多いのですが JavaScript を実行したいような場合もあるでしょう。 解決方法 今回は、 WebKit でその解決方法を紹介します。 1. まず WebKit のソースコードを取得する svn co http://svn.webkit.org/repository/webkit/trunk WebKit 2. 次に、タイマーの時間を短くする WebCore/bindings/js/JSDOMWindowBase.cpp を編集 JSDOMWindowBase::JSDOMWindow

    サーバー起動用に JavaScript が 1 秒以上実行されなくて alert しないブラウザを作る - IT戦記
  • Safari4 と IE8 で実装された DOM Storage とは何か - IT戦記

    はじめに 皆様 JavaScript のスピード競争が激化し、 ECMAScript 3.1 の仕様の策定が進むなど、激動の JavaScript 時代をいかがお過ごしでしょうか。 さて今日は、今、ちまたで大ブレイクの兆しを見せている DOM Storage という仕様を紹介したいと思います。 DOM Storage とは何か まず、 DOM Storage とはどんなものなのでしょうか。 とても簡単に言ってしまえば、とてもたくさんのデータが保存できてサーバーに自動で送られない Cookie みたいなものです。 さらに、 Cookie とは違って JavaScript からとても扱い易く作られています。 では、この DOMStorage の具体的なソースコードを見てみましょう。 <!DOCTYPE html> <html> <head><title>DOMStorage の使い方</tit

    Safari4 と IE8 で実装された DOM Storage とは何か - IT戦記
  • Pathtraq API を使って、はてブにアクセスチャートを出す Greasemonkey を作りました! - IT戦記

    はてブのエントリーページに 以下のようなアクセスチャートを出す Greasemonkey を作りました! このアクセスチャートは、どのくらいの人がそのページに訪れたかという情報を表しています。 「このページはいつ頃から注目を集めだしたか」などの情報が一目で分かるようになります。 期間は、「24時間」から「3ヶ月」までその場で切り替えることができます。 インストールする! http://userscripts.org/scripts/source/32521.user.js ブックマークレットを使ってみる! はてブのエントリーページで以下のブックマークレットを実行してみましょう! javascript:(function(s){s.src='http://userscripts.org/scripts/source/32521.user.js';document.body.appendChi

    Pathtraq API を使って、はてブにアクセスチャートを出す Greasemonkey を作りました! - IT戦記
  • ステップ・バイ・ステップで Pathtraq の API を使ってみよう - IT戦記

    はじめに 「このサイトの人気ページを見たい!」 「このページに、皆いったいどうやって来てるんだろう?」 「このページを見たあとは、どこを見に行ってるんだろう?」 そんなこと思ったことありませんか? Pathtraq API を使うことで、そんな情報をあなたのソフトウェア、ウェブアプリケーションに組込めるようになりました!やった! でも、難しいんでしょ><? 違うよ。全然違うよ。超簡単だよ。 というわけで、今日は JavaScript から Pathtraq API を使ってみましょう! Step 1 Pathtraq API を目で見てみよう! やり方は、簡単です。 http://api.pathtraq.com/pages?url=**ここに調べたい URL** とやるだけです。 試しに、このブログを見てみましょう。 RSS が出力されました。 これは、 IT 戦記内で最近人気のページを

    ステップ・バイ・ステップで Pathtraq の API を使ってみよう - IT戦記
  • はてなダイアリーのサイドバーに「アクセス元」「アクセス先」を追加する方法 - IT戦記

    はじめに Pathtraq API を使うと、はてなダイアリーのサイドバーに「アクセス元」と「アクセス先」を追加することが誰でも簡単にできます。 やり方 たったの 3 ステップです。簡単ですね! 1. 詳細デザイン設定画面を開く http://d.hatena.ne.jp/<はてなID>/designdetail 2. はてなモジュールを追加する 「ページのフッタ」の部分に、以下のはてなモジュールタグを追記します。 <hatena name="rss" url="http://api.pathtraq.com/pages?url=nextsite:http://d.hatena.ne.jp/<はてなID>/" moduletitle="最近のアクセス元 by Pathtraq" listlimit="5" template="hatena-module" dateformat="%m/%d

    はてなダイアリーのサイドバーに「アクセス元」「アクセス先」を追加する方法 - IT戦記
  • ブラウザでお絵描きプログラミング! Processing.js 登場! - IT戦記

    はじめに 今日、 jQuery の作者として有名な John Resig さんが Processing.js という JavaScript のライブラリを公開しました。 John Resig - Processing.js このライブラリを使うと、比較的簡単に以下のようなグラフィックスやアニメーションを書くことができるようになります。 というわけで、公開されたばかりのこのライブラリを簡単な使い方から詳しい使い方までとことん掘り下げてみたいと思います。 Processing.js 概要 まず、 Processing.js とは何かという話をします。 Processing.js とは、ブラウザで Processing というプログラミング言語を実行する JavaScript のライブラリです。 では、 Processing とはどのようなプログラミング言語なのでしょうか。 Processing

    ブラウザでお絵描きプログラミング! Processing.js 登場! - IT戦記
  • 駄文 - 株式会社 Dino の新人研修がすごい - IT戦記

    この前紹介した 駄文 - 4 月からプログラマになったあなたへ - IT戦記 スタートアップ研修記 Dino という会社の新人研修ですが、すごいです。 何がすごいか 講義を動画で公開しているのです。 zoome.jp そして、新人はプログラミング未経験者 新人の方はプログラミング経験のない方なので、当然以下のような質問が飛びます。 IP ってなんですか? インタフェースってなんですか? ディレクトリってなんですか? などです。 この質問に対して、なるべく正しく、そして、イメージが湧くような説明をするってすごく難しいと思うんです。 逆に、生半可な知識で説明すると誤解を与えてしまうことになります。 でも、この動画の講師はすごく丁寧な説明で言い切るところは言い切って的確に教えているなあと思いました。 すごいです。 講師、新人両方に良い さっきも言ったように、基的な説明ってすごく難しくて、すぐに

    駄文 - 株式会社 Dino の新人研修がすごい - IT戦記
  • MacBook 買った後にやったことまとめ - IT戦記

    ここに少しずつ追記していきます。 購入 Apple Store 渋谷店で amachang「一番安い MacBook ください」 店員「はい、こちらの 129,800 円のでございますね」 amachang「メモリ 2GB に増設してください」 店員「はい、141,000円くらいになります」 amachang「VMWare Fusion もください」 店員「はい、いま Mac を買うとキャンペーンで安くなりますので、 8,900 円になります」 amachang「わー!やった!」 amachang「ゲスト OS として Windows XP を入れたいんですけど、売ってたりします?」 店員「売ってませんねー」 amachang「わかりましたー」 店員「では、お会計しますー」 : 店員「では、メモリお取り付けしますので、 40 分ほどお待ちください」 amachang「付けてくれるんですね」

    MacBook 買った後にやったことまとめ - IT戦記
  • IE8 に実装された getCascatedCSSSelectors 関数とは何か - IT戦記

    4 月 1 日ですね! getCascadedCSSSelectors 関数とは getCascadedCSSSelectors 関数とは、 HTML5 の 4-1. the default views 定義されているインタフェースで、要素にあたっている CSS セレクタを配列で取得するための関数です。 window オブジェクト(グローバルオブジェクト)が持っている関数なので普通に、以下のように呼び出すことができます。 var element = document.getElementById('main-content'); var selectors = getCascadedCSSSelectors(element); alert(selectors[0]); // #main-content alert(selectors[1]); // div.section alert(se

    IE8 に実装された getCascatedCSSSelectors 関数とは何か - IT戦記
    naskin
    naskin 2008/04/01
    getCascatedCSSSelectors。騙された。。。
  • Apple 謹製の JavaScript デバッガ「Drosera」が便利な件 - IT戦記

    Drosera とは 1000speakers 後のハッカソンで 山岸くん が「Drosera っていうアプリがある!」って発見して、教えてもらいました。 Drosera は WebKit 用の JavaScript デバッガで、 Windows XP でも Mac でも動くみたいです。 WebKit Build Archives | WebKit からダウンロードした WebKitアーカイブの中に同封されています。 で、実際に使ってみた感じ できること ステップ実行 コールスタックを見る レキシカルな変数をウォッチする などなどです。 まとめ Web インスペクタと併用すれば効果抜群ですね!

    Apple 謹製の JavaScript デバッガ「Drosera」が便利な件 - IT戦記