2012年注目のモバイル向けJavaScriptフレームワーク・ライブラリあれこれ | gihyo.jp
昨年は、スマートフォンが急速に普及した年でした。それに伴って、モバイルサイトの重要性が増し、多くのモバイル向けJavaScriptフレームワークやライブラリが産まれました。本稿では、それらのモバイル向けのJavaScriptフレームやライブラリの中から、ピックアップして紹介していきたいと思います。 豊富な機能やリッチなインターフェースが多く用意されているフレームワーク まずは、モバイルサイトの構築を一から行えるフレームワークを紹介します。jQuery MobileやSencha Touchといった著名なフレームワークを始めとして、jQTouchやiUIなど比較的軽量なフレームワークまで簡単に解説します。 jQuery Mobile jQuery Mobileは、有名なJavaScriptライブラリであるjQueryをベースとしたモバイル向けのフレームワークです。ネイティブアプリのようなUI
第11回 JSONP入門 | gihyo.jp
こんにちは、太田です。今回から、Ajaxと呼ばれるような非同期な通信処理を行うJavaScriptについて解説していきます。今回は特にJSONPについて基礎的な部分を解説します。 JSONとは JSONについては第9回でも少し触れていますが、改めて解説します。 JSON（JavaScript Object Notation）はJavaScriptから生まれたデータ記述フォーマットで、真偽値、数値、文字列、null値の組み合わせを持ったハッシュか配列かその両方で構成されます。 JSONはそのシンプルさから多くの言語でネイティブにサポートされており、特にウェブ関連ではポピュラーなデータフォーマットです。 JSONのサンプル（配列） ["aaa", "bbb", "ccc"] JSONのサンプル（ハッシュ） {"aaa":1, "bbb": 2, "ccc": 3} JSONのサンプル（ハッシュ
第5回 タブ切り替えで快適に読めるインターフェースを作るには | gihyo.jp
見せたいもののメリハリをつけるのがコツ 「限られたスペースに複数の情報を入れたい。でも別ページにするほどでもない……」 そんなとき、タブでコンテンツを切り替えられると便利です。タブ切り替えは、Yahooのトップページで使われているように、かなり浸透してきています。 このUIを使うポイントは、以下のように重点的に見せたいコンテンツとそうでないもののメリハリをつけて使うことです。 特集などの一部のコンテンツに使う ニュースであれば一番見せたいカテゴリーのものをはじめに見せておいて、重要度の低いものは別のタブコンテンツとする サイドバーに置いたトピックスを、アーカイブと最新のもので分ける また、以下のようなデメリットがあるので、UIの見栄えとのバランスを念頭に置いて使う必要があります。 ソースが1ページに書かれるため、ページを分ける場合と違ってSEO効果が薄れる場合がある タブを移動してもページ
第5回 Evernote情報整理システムを構築しよう！ | gihyo.jp
前回はノートブックとタグの基本的な使い方と、様々な検索を用いて情報を引き出す方法について紹介しました。今回はこれらの方法を組み合わせて、情報を整理するための仕組みを構築してみましょう。 情報の流れと整理のタイミングを定める 情報整理の仕組みを構築するにあたって、どのような情報の流れを作り、どのタイミングで整理を行うかについて考えてみましょう。 情報の流れを作る まずはサンプルとして、筆者の考える情報の流れを書き出してみました（図1）。 図1 情報の流れを書き出してみる この図から、情報の流れにおける大きな方針は以下の2点であることがつかめます。 取り込むべき情報をInboxに集める 情報を段階に分けて管理する また、Evernote内における段階分けは以下の4つとなります。 Inbox（インプット情報はすべてInboxに集めてから整理） Active（編集中、考え中のメモ） Archi
第9回 実践DOMスクリプティング#2：DOMとHTML | gihyo.jp
こんにちは、太田です。前回はHTMLとテキスト操作を解説しました。今回は、さらにHTMLの操作の実例を中心に解説していきます。 JavaScriptとエスケープ まず、エスケープについて確認しておきましょう。外部から入力されたデータを画面上に表示する際はクロスサイトスクリプティングに注意する必要があることはもはや常識と言ってよいと思います。サーバーサイドのウェブ開発用フレームワークでは、ほとんどの場合HTMLのエスケープ用のメソッドが用意されていて、HTMLのエスケープは適切に行えるはずです。しかし、注意しなければいけないのは、HTMLのエスケープはJavaScriptにそのまま当てはめることはできないという点です。当たり前の話ですが、HTMLとJavaScriptではエスケープすべき文字が異なります。また、IEの6、7ではCSSにJavaScriptを埋めこむことができるのでCSSにも注
第3回 トップページを彩るスライドショーのポイント | gihyo.jp
その他、speedやtimeout、pause（0：マウスオーバ時にスライドをストップしない、1：マウスオーバ時にスライドをストップする）などで細かく動きを指定することもできます。 そのほかにも指定可能なオプションはたくさんあり、「jQuery Cycle Plugin - Option Reference」で確認することができます。 スライドのコンテンツとナビゲーションを指定する 次に、bodyタグ内のXHTMLソースを見ていきます。 XHTMLソース（bodyタグ内） <div id="slider"> <div id="slideshow"> <div class="slider-item"> <div class="text_item"> <h2>Wonderful elephants<br /> living abroad.</h2> <p>フェードイン&アウトするシン
第8回 実践DOMスクリプティング#1：HTMLとテキストの操作 | gihyo.jp
こんにちは、太田です。前々回、前回でDOMの基礎を簡単に解説しました。今回からは、DOMを使った実用的なスクリプトを解説していきます。特に今回はHTMLの操作、テキストの操作にフォーカスを当てていくつかのサンプルコードを解説していきます。 HTML操作の基本 JavaScriptによってHTMLを書き出したり、一部を書き換えたり、削除したりといった方法は実は様々な方法が用意されています。目的に合わせて適切な方法を選ばないと非効率だったり、最悪クロスサイトスクリプティングなどの問題を抱えてしまう危険もあります。 document.writeと同期読み込み JavaScriptでHTMLを書き出すというと、最初に学ぶのはこのdocument.writeかもしれません。いわゆるprint文のようにシンプルなAPIなので、入門書の最初のサンプルなどで扱われることも多いようです。しかし、docume
面白法人カヤック、JavaScript、HTML5、 CSSの投稿共有コミュニティサイト「jsdo.it」を開設 | gihyo.jp
面白法人カヤック、JavaScript、HTML5、 CSSの投稿共有コミュニティサイト「jsdo.it」を開設 （株）カヤックは6月18日、JavaScript、HTML5、CSSを投稿して共有するコミュニティサイト「jsdo.it」を開設した。 「jsdo.it」はWeb制作における次世代のマークアップ言語として注目を集める「HTML5」そのHTML5と連携する「JavaScript」「CSS」を投稿し、ユーザ間でソースコードを共有できるWebサービス。同社は2008年12月よりFlashを投稿して共有できるWeb サービス「wonderfl build Flash online」を運営しており、国内外合わせて2万3,000人のユーザを擁している。こうしたユーザから、話題のHTML5やJavaScript、CSSでも簡単に投稿できノウハウが共有できる場を求める声があがり、新サービ
第1回 NoSQL、そしてCassandraとは | gihyo.jp
NoSQLミドルウェアの特徴をもう少し細かく挙げてみます。分量の都合もあり個別には触れませんが、それぞれのNoSQLミドルウェアで差別化部分に関してはかなり詳細に説明がされていますので、ぜひそちらを参照してみてください。 高速に動作する リレーションモデルではないデータモデル スケールアウト型アーキテクチャ コモディティサーバによって構築される スキーマフリー SPOF（単一故障点）を持たない 自動的に複数台へレプリケーションする イベンチュアルコンシステンシまたは一貫性の選択が可能 SQLのような強力なクエリ言語を持たず、シンプルな問い合わせしかできない Cassandraとは何か NoSQLミドルウェアの筆頭といえばGoogle BigTableやAmazon Dynamoですが、オープンソースの世界でもいろいろなものが出てきています。その中でも最近特に注目を集めているのが、Apach
第46回 8ページメモで、紙のメモにはまる | gihyo.jp
手軽な手書きメモ 手帖やノートやメモをとる道具には、強い関心があります。まずはこれをご覧ください。 図1 ドキュメントスキャナでスキャンした状態の8ページメモ。 300dpiでスキャンしています。 かつて未踏ソフトウェアで手書きメモの機能をもつソフトウェアを開発して、現在もフリーで配布しています。 自分自身ではこのソフトと、その後継の『NetSticky』という、メモを書いて自分宛にメールしてくれるソフトを使っているので、もうほとんど紙のメモはとっていません（メモをとっているものもありますが、その理由は別の機会にご紹介しようと思います）。 今回は、それでも最近はやっている紙のメモ方式にちょっと参加してみようと考えたのです。 『たつをのChangeLog』を拝見していたら、A4用紙を1/8に折り畳んで使うSUPERCLASSICの『保存するメモ帳abrAsus(アブラサス)』というメモ帳
第3回 クロスブラウザの傾向と対策 | gihyo.jp
こんにちは、太田です。第1回は各ブラウザの特徴をまとめ、第2回は環境作りについて解説したので、ようやく今回からクロスブラウザの本題に入っていきます。まずはクロスブラウザ対応のパターンを整理し、そのパターンごとの対策をまとめます。 クロスブラウザとはなにか そもそも、クロスブラウザ対応とはどういうことでしょうか？ここで、この連載におけるクロスブラウザの定義を決めておきます。 サポート対象のブラウザで設計通りの表示・動作をして、たとえ未知のブラウザであっても、そのブラウザがWeb標準に沿っているなら最低限の表示・動作をすること サポート対象のブラウザについては第1回で解説した通りですが、メインターゲットはIE（6/7/8）、Firefox（3.6）、Chrome（4.1）、Safari（4.0.5）、Opera（10.51）とします。カッコ内はフルサポートするバージョンで、それ
第1回 Evernoteとは？ －情報収集/整理/活用のススメ－ | gihyo.jp
皆さん、こんにちは！ 「Hacks for Creative Life!」というBlogを運営している北と申します。本連載では、Evernoteの基本から具体的な運用方法まで幅広く解説していきます。どうぞよろしくお願いいたします。 Evernoteは、2010年3月3日に「Evernote日本語版リリース」のニュースが発表され、時を同じくしてEvernote本が同時に2冊発売、Google Trendsでもニョキニョキその存在感を強めているクラウドサービス界期待の新星です。きっと興味を持たれている方も多いのではと思います。 図1 2010年3月3日の日本語版リリースに先駆け、2010年1月21日Evernote日本語版プレビューが開設された 図2 2008年頃から少しずつ認知度を高め、2010年に検索トラヒックが急上昇! 本連載ではEvernoteに興味を持たれた皆さんをディープなEve
第20回 jQueryでAJAX入門：正規表現でサイトに表示したTwitterにリンクをつける | gihyo.jp
Twitterにリンクをつける 前回は.getJSON()メソッドを使い、Twitter上での発言をサイトに表示できるようにしてみました。しかし、時にはTwitterの発言文中にはURLやhashタグや@ユーザー名などが含まれていることがありますが、前回のままではそのままテキストとして表示されるだけになってしまいます。 以前、フォームの内容を紹介した時に正規表現の紹介をしましたが、今回はその正規表現を利用して、Twitterの発言文中に含まれるURL・hashタグ・@ユーザー名をリンクをつけるサンプルをご紹介します。 URLにリンクをつける まずは文中に含まれるURLにリンクをつけてみましょう。文中からURL部分だけを見つけるために、正規表現を利用します。 URL用の正規表現 /(http:\/\/[\x21-\x7e]+)/gi 「[\x21-\x7e]」の部分は16進数で表現したASC
第19回 jQueryでAJAX入門：JSONを使いサイトにTwitterを表示 | gihyo.jp
jQueryでAJAX入門2回目：JSON形式を扱う 前回はXML形式のRSSをAJAXで取得してリストで表示させました。今回はXMLではなく、JSON（ジェイソン）と呼ばれる形式を扱い、同じようにリストを表示させてみることにします。今回ご紹介するJSON形式も、前回紹介のXML形式同様jQueryで取得・表示をさせることができます JSON？ JSONはJavaScript Object Notationの略で、JavaScriptで簡単に扱えるテキストベースのデータフォーマットです。たとえば下記のような構造になっています。 JSONサンプル [ { "name": "技評太郎", "age" : 26, "skills":["PHP" , "JavaScript"] }, { "name": "長谷川広武", "age":25, "skills":["HTML" , "CSS"] },
第18回 jQueryでAJAX入門：RSSをAJAXで取得してリストに表示する | gihyo.jp
他ページなどのコンテンツを動的に表示するAJAXもjQueryを使えば驚くほど簡単に利用することができます。今回はAJAXを利用して、RSSフィードを取得、表示してみましょう。 RSS 普段の情報収集でRSSリーダーを使っている方は多いと思いますが、RSSフィードと言っても、現在使われているものは、主なものでRSS1.0、RSS2.0というようにバージョンが2つあり、これらはXMLの形式が多少違いますので、分かりやすいように今回はRSS2.0に対象を絞ります。他にもAtomという規格自体が違うフィードもあります。 XML？ RSSはXML（Extensible Markup Language）という言語で書かれています。以下はgihyo.jpのRSS2.0のフィードです。リンク先を開いてブラウザの「ページのソース」などで、ソースを確認してみてください。 http://rss.rssad.j
第17回 「その場編集」を実装する | gihyo.jp
「その場編集」を実装 前回はツールチップの実装方法をご紹介しました。 今回「Edit In Place」や「その場編集」と呼ばれる、テキストをクリックすると、その場で編集できるようにする仕組みを実装してみます。 今回の仕組みを考える この「その場編集」の仕組みを考えてみましょう。今回の要件は以下の通りにします。 最初はただのテキスト クリックをすると、テキストがinput要素に置き換わり編集可能に。 input要素からフォーカスが外れたら、input要素が編集後の文字に置き換わる。 フォーカス外れた時、valueの値が空なら最初の値に戻す。 本来であれば、上記の仕組みの４の後に、PHPなどでデータベースに編集後の情報を送信し、保存するという仕組みになるのですが、今回はその前のところまでの実装方法のご紹介とします。 まずは完成サンプルとソースコードを見てみましょう。 完成ソースコード jQu
第18回 Jordan : History of Flight、UNIQLO SHOES、JINSMAN - ここはJINSの宣伝担当、JINSMANの部屋。 | gihyo.jp
いま、見ておきたいウェブサイト 第18回Jordan : History of Flight、UNIQLO SHOES、JINSMAN - ここはJINSの宣伝担当、JINSMANの部屋。 「外出後は、うがいと手洗いを徹底しなければ」と新型インフルエンザへの対策を練りつつ、朝晩の冷え込みからいよいよ秋本番だなとしみじみしている今日このごろ、いかがお過ごしでしょうか。今回も個人的に感じた素晴らしいサイトの特徴を、いくつかお話したいと思います。 "餅は餅屋"という考え方 『Jordan : History of Flight』 "バスケットボールの神様"Michael Jordan（マイケル・ジョーダン）とのコラボレーションによるNikeのバスケットシューズ、Air Jordan Seriesの25年の歴史をまとめたウェブサイト『Jordan : History of Flight』です。 図
第1回 memcached 1.4、基本の基本 | gihyo.jp
今回は、1.4になってアップデートされた新機能を中心に紹介します。 memcachedとは？ memcachedとは、主にデータベースへの負荷を下げ、かつWebアプリケーションのスケーラビリティをコストパフォーマンス良く向上させる高性能な分散キャッシュサーバです。memcachedの基本や概要に関しては、以前ミクシィ運用グループの長野と執筆した「memcachedを知り尽くす」をご覧ください。 memcached 1.4の特徴 1.4、5つの特徴 memcached 1.4の大きなニュースの1つはバイナリプロトコルの正式導入です。また、他にも色々と嬉しい機能や改修が施されています。詳しくは1.4のリリースノートに記述されていますが、要約すると以下の5点が上げられます。 バイナリプロトコルの正式導入 パフォーマンス向上 統計システムの強化 報告されたバグの修正 テストの強化 入手先 memc
理系なおねえさんはアリですか？―内田麻理香が聞いた理系な女性の理系な人生―：第1回 はじめまして，理系なおねえさんです。｜gihyo.jp … 技術評論社
はじめまして、理系なおねえさんです。 はじめまして。内田麻理香と申します。東京大学の工学部の広報担当の研究員であり、サイエンスコミュニケーターなる仕事をし、そして東京大学大学院の博士課程の学生です。……なーんて、これを読んで「こいつはいったい何をしているのだ？」意味不明になっている方もいるかもしれません。実際、私も混乱した慌ただしい毎日を送っています。 この節操のない活動ですが、自分の中では一応筋が通っているつもり、です。 まず、大学工学部の広報担当としては「世の中の人には見えにくい」工学部の研究内容を、なるべくわかりやすい形で伝えることを目標にしています。そして、聞き慣れない「サイエンスコミュニケーター」という役割では「科学や技術」と「社会」の架け橋になりたいと思い、活動しています。活字での仕事を中心とし、他には講演やTVを通して科学技術のことをお伝えしています。 私の人生を狂わせたガン
第1回 メモを取るにも練習は必要です | gihyo.jp
なぜか続かない？ メモや手帳 今、世の中には、数多くのメモ術・手帳術の情報があふれています。書店に行けば専用のコーナーがあり、毎月のように新しい本が出ています。 ネット上でも、各種ブログやサイトで、自分のメモの取り方や手帳の使い方を公開している人、有名なメモ術・手帳術を実践した結果を公開している人などが大勢います。また、GTDやライフハック、夢実現や成功術、ユビキタス・キャプチャーといったくくりの中で、メモや手帳を使うことの大事さや、そのちょっと便利な使い方などを紹介している場合もあります。 わたしはメモを取るのが苦手でした 実はわたしは、昔からメモを取るのが苦手で、なんとかしようとかなり多くのメモ術、ノート術、手帳術などの本を読み漁りました。一冊読んで「これならできそうだ」と思えばそれをやってみました。ところが、なぜか続きません。そこで、また別の本を読んでみるわけです。前の本よりも少し簡
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
