Spine.js て何だ? RIA界でもHTML5/CSS3/JavaScript でよりリッチなUIを比較的大きなプロジェクトでも実現しようとする動きが前にも増して強くなっているようです。またPhoneGap等のスマートフォン向けネイティブ(風)アプリにおいてもより複雑な実装が求められると思います。その結果、複雑化しがちなJavaScript界にMVCフレームワークが乱立してきています。 その中でもRails3.1でも採用されたCofeeScriptと親和性の高い(Spine.js自体もCoffeeScriptで書かれていますし、公式ドキュメントもCoffeeScript/JavaScript両方で書かれています)、今後注目されるであろうフレームワークがSpine.jsという訳です。人気のフレームワークであるBackBone.jsを尻目に作られたかは知りませんが、似ているところがあるよう
flickrブログ 2011.7.20のエントリ Code: Flickr Developer Blog » Lessons Learned from the Flickr Touch Lightbox 以下斜め読んだ内容 Flickr Lightbox for iPad, iPhone and Android レスポンスのよいインターフェース目指した リリースにこぎつけるのに時間かかった。 その分色々吸収できたノウハウもある viewportタグ ちゃんと理解されてない感じ 使い方間違うとカオスに 要は“maximum-scale=1″これがポイント デバイスの向きを変えてもいい感じになる cssをたっぷり書いてdomをスリムに モバイルのwebkitではデスクトップよりも色々cssかける css3 transitionのメリット 3Dアクセラレーションハードウェアが最近のデバイスには入
なぜか、今まで入れてなかったんで、一気にjQuery、JSON、CSS3、HTML5のsyntaxを入れてみた。 ちなみに下記が入れたsyntaxですね。 Vim syntax file for HTML 5 — Gist css3 - css3 syntax for vim : vim online jQuery - Syntax file for jQuery : vim online JSON.vim - A syntax highlighting file for JSON : vim online jQueryに関してはjsの拡張子で普通のjavascriptと共存させられないかなあと考えてるんですが、ちょっと良く分からん。今は説明にあった通りに、jqueryプラグインの中じゃないと自動で適用されないようにしてるので、普通のjsファイルだとわざわざ"setl ft=jquery"
昔、やねうらおさんのブログで16進数テトリスが話題になってて、僕はそこに落ちてたコンソールアプリで16進数を身につけました。それで久々にプレイしたかったんですが、リンク切れで遊べなかったので自分で作ってみました。アクセスはコチラから。Tetris + Hexという事でHextrisという名前にしましたが、さっき調べたら同じ名前の別のパズルゲームがありました。でも変えるの面倒なんで許してください。 最初は無理ゲーな気がするのですが、何回かプレイしたら意外と慣れてきます。そして気がついたら16進数と2進数の変換が瞬間的にできるようになっているはずです。プログラマの人はだまされたと思って、一回プレイしてみてくださいませ。 Hextrisにアクセス! さて、開発環境はJavaScript + Django on Herokuです。Google App Engineが値上げされて気軽にプロトタイプ作
池田 泰延 @clockmaker WebGLで一躍有名になったJavaScriptライブラリのThree.jsですが、大文字の名前空間に違和感が…。クラス呼び出すときに、 new THREE.Object3D() って見栄えはもちろんのこと、タイピングも面倒だし、書き忘れが多発しそうです。#javascript 2012-02-12 00:00:52 池田 泰延 @clockmaker JSで、もし jp.clockmaker.data.MojaData クラスを作った場合、いつも new jp.clockmaker.data.MojaData() って書くのでしょうか?場合によってはローカル変数に名前空間を入れればすみますが。。 #javascript 2012-02-12 00:08:13
nude.jsは画像をCanvasで読み込んでヌード画像か否かを判定するソフトウェアです。 裸が見たい!たくさんの画像の中からとにかく裸を見たい!と思う人はnude.jsを自動実行してみると幸せになれるかも知れません。 デモ画像です。もちろん裸ではありません。Scan Imageボタンを押します。 No nude判定です。当然です。 続いて二つの画像です。水着もありますが、やはりNo nude判定です。当然です。 おっ!ということでボタンを押すと見事Nude判定です(黒塗りはどうかと思う訳ですが、そこは致し方ありません)!イヤッホウ! nude.jsはHTML5を使って画像をスキャンし、それが裸であるか否かを一定のアルゴリズムで判定しています。裸であれば残し、でなければ消してしまうスクリプトを書くと幸せになれそうです。nude.jsはHTML5をサポートしたWebブラウザで飲み動作しますが
メモ状のデザインのフォームに、ユーザーが入力した箇所のフォントをブラウザのデフォルトから変更し、手書き風にしたコンタクトフォームを制作するチュートリアルを紹介します。 デモページ:日本語は設定されてないため、ブラウザのデフォルトフォント 実装 フォームの制作はHTML+CSSだけでなく、メモ状のUIを作るPhotoshopのチュートリアルも掲載されています。 ここでは、デザイン部分は省略して、以下フォームの実装を紹介します。 HTML: 基本構造 まずは、HTML5を使ってフォームを配置する前の基本構造から。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Pen & Paper Form</title> <link href="style.css" rel="stylesheet" /> </head>
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 ※1 日本のドメイン登録業者(レジストラ)(「ICANNがレジストラとして認定した企業」一覧(InterNIC提供)内に「Japan」の記載があるもの)を対象。 ※1 レジストラ「GMO Internet, Inc. d/b/a Onamae.com」のシェア値を集計。 ※1 2020年8月時点の調査。
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
昨日2月9日、Google Chrome 17の安定版がリリースされました。 このバージョンでの変更点の一つに、webRequest APIが正式に実装されたことがあります。 これまでこのAPIはexperimental(実験的機能)として実装されていましたが、今回晴れて正式なものになりました。 このAPIを使うと、Chromeが行う通信を監視して通信があるたびにイベントを実行したり、HTTPヘッダを書き換えたりすることができます。 Chrome 17では、User-Agentを他のブラウザに偽装することができる機能がDeveloper Toolsに付いたのですが、その機能もこのAPIを利用して実装されてい(ると思われ)ます。(Developer Tools自体もJavaScriptによって実装された“Webアプリ”なので、多分そのはずです) HTTPヘッダをいじれるというと不安に思われる
Backbone.js を試したから Knockout.js にも挑戦 JavaScript のクライアント MVC フレームワークは Backbone.js でいこうと思っていたんですが、Knockout.js が Ver 2.0 でかなり機能追加されて、ちょっと心変わり。もともと Knockout.js のデータバインディング機能に興味を持っていたところに、テンプレート機能が追加されて、試してみたくなりました。 念のため説明すると、Knockout.js は、.NET 開発者にはお馴染みの、データバインディングや MVVM パターンが特徴のフレームワークです。 Knockout : Home ちなみに、Backbone.js の記事はこちら。 作って覚える Backbone.js - present 作って覚える Backbone.js (2) Router 編 - present T
Tech Stack for the Backbone.js WebApp Before moving on to building the application, it’s a good idea to get to know more about the Tools and Frameworks we’ll be using. Backbone.js “Backbone.js is a Frontend framework which helps us in building web apps in a more structured way and helps us in writing cleaner and bug-free code.” Don’t worry if you do not understand the above definition, let’s first
eBay Tech Blog 2011.10.14のエントリ senthilの肩書きは「Site Speed Evangelist」 The New eBay Motors Homepage is 2X Faster ― eBay Tech Blog data uri使ったサイト高速化というアイディア実戦投下し成果出た css lintをCIに組み込んでレポート通り問題潰して200ミリ秒高速化した なエントリ 「画像表示にimgは無しにしてdivと背景画像組み合わせたら速くならないかな?」という黒魔術なテクニックも、「とりあえず試す」が信条のebayエンジニア 以下斜め読んだ内容 eBay Motors homepage ローンチしてから5年経ってる そろそろテコ入れ必要かな、してた テコ入れの目標の1つが高速化 リニューアル前より2倍は速くしたかった 結果 二倍高速達成 YSLOW、Pa
『GRAVITY DAZE』というゲームが気になっているminamiです。VITA買うか・・・! さて、日頃Fireworksをメインに使っていく上でものすごく重宝している『Guides』という拡張機能があります。 ものすごく重宝しているんですが、一点残念な所があったのでそこを補うコマンドを作ってみました。(FireworksのバージョンはCS5.1です。) Guidesは超便利 もはや度々いろいろなところで紹介されている有名な拡張なので、Fireworks使いは必須な『Guides』ですが、一応ご紹介します。 Guides 配付ページ 『Guides』はその名の通り、ガイドを使いやすくしてくれる機能です。個人的には、「selection」のタブが、選択したオブジェクトに対して上下左右どこにでもガイドを引ける!さらにオフセットまで指定できる!ということで愛用しております。 しかし、この『G
スマートフォンサイトを制作する上で重要となる「最適化」。 PCサイトとは違い、外出先や移動中などに見られる機会が多いスマートフォンサイトでは、できるだけ容量を抑えて通信速度を上げ、サクサクと閲覧できることがもとめられます。 スマートフォンサイト最適化のためには様々な方法がありますが、できるだけ使用する画像の容量を減らすこともその一つです。 今回は、スマートフォンサイト制作に便利な、CSS3のグラデーションを使った背景パターンの作り方を紹介します。 ※CSSではスマートフォンサイト向けにwebkitの記述のみを使用しておりますので、サンプルページはスマートフォンのブラウザかSafari、Chromeで閲覧ができます。 CSS3のグラデーションを使ったパターンの作り方 CSS3のグラデーション機能を使うと、様々なグラデーションを作ることができますが、 一見グラデーションには見えないような単色の
海野です。ちょっと時間があいてしまいましたが、昨年の12月に開催されたNTCIR-9という会議のRecognizing Inference in TExt (RITE)というタスクに、前職の方々と共著で出場しました。 Syntactic Difference Based Approach for NTCIR-9 RITE Task. Yuta Tsuboi, Hiroshi Kanayama, Masaki Ohno and Yuya Unno. NTCIR-9, 2011. [pdf] 含意関係認識といわれるこのタスクは、大雑把に言うと与えられた2つの文が同じ意味のことを言っているかどうか判定しなさいというタスクです(厳密には一方からもう一方が帰結できるかの判定です)。今日は、その中で使ったTree Edit Distance (TED) について解説します。 TEDは2つの順序付き木が
Amazonでレビューを見てから買うさきほど調べたサポートされているメモリをAmazonで検索し、よさそうな物を見つけたら、評価を確認しましょう。安心のため、「これiMacに使ったけど問題なかったよ」というレビューが付いているものを選びました。 僕が選んだのはTrascendの4GB×2枚がセットになったもの。これを2つ注文しました。合計で6,540円です。 メモリ交換してみようでは、実際に交換してみようと思います。これが買ったメモリです。 準備するもの交換に必要なのは下記の3つ。はさみは必須ではありませんが。 タオル:iMacをディスプレイを下にして倒すため。はさみ:メモリはデリケートなので、慎重に開封するため。プラスドライバー:メモリ交換用の口を開けるため。 メモリの取り外し※交換の前には電源を落とし、電源ケーブルを抜いておきましょう。また、メモリは静電気に弱いので、静電気対策は十分に
HTMLで複数の画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。 デモ (通常のimgタグ) デモ (LoadManager.jsを使用) デモの違いとは 前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示され読み込まれたものがフェードインして表示されます。 ▼前者のデモ ▼後者のデモ 後者のデモには、ローディングのパーセンテージ表示も付いています。読み込みが何%まで達しているかを確認できるのも、後述のJSライブラリのメリットです。 HTML5で作られたフルFlash的なサイトを見たときにimgタグでインターレース的に画像がバラバラとでてくることが多くて、いつも微妙な思いをしていました。Flas
皆さんはキーボード派ですか?マウス派ですか? 筆者のようにプログラマの方であれば、キーボード派の人が多いと思います。 マウスでグリグリ操作するよりも、ショートカットキーを使いこなす方が何倍も早く操作できることを知っているはずです。 ターミナルをよく開いている人は1日の大半はキーボードだけで生活しているでしょうw しかし、そんな人でもブラウザの前では、キーボードだけでは効率良く操作できないので、仕方なくマウスで操作するしかありません。 そこで今回ご紹介するのは、Chromeをコマンドで操作できるようにしてくれるキーボード派のためのエクステンション「gleeBox」です。 「gleeBox」は、Chrome上に入力ボックスでコマンドを打ち込むだけで様々な操作が可能になるエクステンションです。 何がそんなにスゴイかというと、ほとんどマウスを使わなくても操作ができるように様々なコマンドが用意されて
Mozillaが、さまざまなWebブラウザで利用できるオープンな「Open Web Apps」と、そうしたWebアプリを扱うアプリストアのコンセプトを発表した。Googleの「Chrome Web Store」をよりオープンにしたものになるようだ。 Mozilla Labsは10月19日(現地時間)、有料・無料のオープンなWebアプリを提供するためのいわゆるアプリストアシステムのプロトタイプを発表した。このアプリストアはデスクトップおよびモバイルのWebブラウザ(Firefox 3.6以降、モバイル版Firefox、Internet Explorer(IE) 8、Google Chrome 6、Safari 5、Opera 10、WebKitベースのモバイルWebブラウザ)で利用でき、ユーザーはこのストア内でWebアプリのインストール、管理、起動ができるという。 このコンセプトは、米Goo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く