ASCII.jp：古籏一浩のJavaScriptラボ

古籏一浩のJavaScriptラボ

活躍の舞台をどんどん広げているJavaScript。本連載では、JavaScript関連書の執筆でおなじみの古籏一浩氏が、最新の活用Tipsから今後注目のAjax/JavaScriptライブラリーの解説まで、“楽しくできて役立つネタ”をお届けします。

文● 古籏一浩

2012年01月30日 13時00分

第81回 iBooks AuthorでHTML5の電子書籍作ってみた

アップルが発表した電子書籍作成ツール「iBooks Author」。HTML5+JavaScriptを埋め込んでインタラクティブな電子書籍を作ってみよう。
2012年01月20日 10時00分

第80回 iOS 5の新機能で作る「パノラマビュー」アプリ

「iOS 5」の新機能を使って、コンパスの方角に合わせた写真を表示するパノラマビューを作ろう。PhoneGapとjQuery Mobileを利用してアプリ化にも挑戦する。
2012年01月12日 11時02分

第79回 CanvasとPhoneGapで作るiPhone用落書きアプリ

HTML5 Canvasで作ったお絵かきアプリを「PhoneGap」でiPhone用アプリに移植してみよう。Camera APIを使えば、カメラやカメラロールの画像も取り込める。
2011年11月30日 14時27分

第78回 PhoneGapでiPhoneのコンパスアプリを再現

HTMLやCSS、JavaScriptでスマートフォンアプリを開発できるフレームワーク「PhoneGap」で、コンパス機能と加速度センサーを使ったiPhoneアプリを作ってみよう。
2011年11月21日 11時00分

第77回もうFlashは要らない!?スマホ用CSS3アニメを作ろう

Flashが使えないスマートフォンでも大丈夫。タイムラインでCSS3アニメが作れる「Sencha Animator」でスライドアニメーションを作ろう。
2011年11月14日 11時00分

第76回 iPhoneでも動くアニメが作れるSencha Animatorの使い方

HTML5/CSS3を使ったアニメーションを作成できるオーサリングツール「Sencha Animator」で、iPhone/Androidで再生できるテキストアニメを作ろう。
2011年11月04日 14時00分

第75回 CSS3でFlash並みアニメが作れるSencha Animator

CSS3アニメーションを手軽に作れるオーサリングツール「Sencha Animator」。Flashが使えないiPhone／iPad環境でも動くアニメーションの作り方を紹介する。
2011年10月24日 11時00分

第74回 Capture APIでiPhone用ビデオレコーダーを作ろう

Web技術でスマートフォンアプリを開発できるフレームワーク「PhoneGap」。Capture APIを使って、iPhoneでビデオを撮影・録画できるアプリを作ってみよう。
2011年10月12日 11時00分

第73回 JavaScriptで作れるiPhone用ボイスレコーダー

Webの技術でスマートフォンアプリを開発できるフレームワーク「PhoneGap」なら、スマホならではの機能を使ったアプリも作れる。ボイスレコーダーを作ってみよう。
2011年10月03日 11時00分

第72回 PhoneGapのMedia APIでバイブ付き音楽プレーヤー

HTMLやCSS、JavaScriptでスマートフォンアプリを開発できるフレームワーク「PhoneGap」。HTML5 AudioとMedia APIを使って音楽再生アプリを作ってみよう。
2011年09月21日 11時00分

第71回 iPhoneがPhoneGapで簡易電子書籍リーダーに

HTMLやCSS、JavaScriptでスマートフォンアプリを開発できるフレームワーク「PhoneGap」で、PDFを使った簡易電子書籍ビューアーアプリを作成する。
2011年09月09日 11時00分

第70回 PhoneGapでMapKitを使って地図アプリを開発

HTMLやCSS、JavaScriptでスマートフォンアプリを開発できるフレームワーク「PhoneGap」。今回はPhoneGapのMapKitプラグインとGoogleマップを使って地図アプリを作成する。
2011年09月01日 13時00分

第69回 HTML5+CSS3でiPhone用動画アプリを作ろう

「PhoneGap」を使ってiPhone用の動画アルバムアプリを作ってみよう。HTML5 VideoとCSS3アニメーションでちょっとした動きも演出する。
2011年08月23日 10時01分

第68回 iPhone/iPad両対応！PhoneGapで作るアルバムアプリ

HTML/CSS+JavaScriptでスマートフォンアプリを開発できるフレームワーク「PhoneGap」を使って、iPadにも対応したフォトアルバムアプリを開発する。
2011年08月11日 12時00分

第67回フォトアルバムアプリで学ぶPhoneGapの使い方

HTML/CSS+JavaScriptでスマートフォンアプリを開発できるフレームワーク「PhoneGap」を使って、iPhone/iPad用のフォトアルバムアプリを作ってみよう。
2011年08月03日 11時00分

第66回 PhoneGapでiPhoneのカメラアプリを作ろう

HTML/CSS+JavaScriptでスマートフォンアプリを開発できるフレームワーク「PhoneGap」を使って、iPhone用のカメラアプリを作ってみよう。
2011年07月25日 14時20分

第65回 HTML5でiPhoneアプリ開発！PhoneGap入門

Web技術でスマートフォンアプリを開発できるモバイルフレームワークが注目されている。今回から「PhoneGap」を使ったiPhone/iPad向けアプリの開発方法を解説する。
2011年07月11日 13時00分

第64回 Canvasで作ったWebアプリをiPhoneアプリに変換

HTML/CSS+JavaScriptでiPhone/iPadアプリを開発できるNimbleKit。HTML5 Canvasを使ったWebアプリケーションをNimbleKitでiPhoneアプリに変換してみよう。
2011年06月30日 11時00分

第63回 NimbleKitでiPhone用動画アプリを自作しよう

HTML/CSS+JavaScriptでiPhone/iPadアプリを開発できるNimbleKit。今回はNimbleKitの「NKVideoPlayer」クラスと「jQTouch」を組み合わせて動画再生アプリを作ってみよう。
2011年06月23日 11時00分

第62回 NimbleKitで自分だけのiPodアプリを作ろう

HTML/CSS+JavaScriptでiPhone/iPadアプリを開発できるNimbleKit。NimbleKitの「NKAudioPlayer」クラスを使って、iPodのようなオーディオ再生アプリを作ってみよう。
2011年06月16日 11時00分

第61回 JavaScriptでiPhone/iPad用フォトアルバムを作ろう

HTML/CSS+JavaScriptでiPhone/iPadアプリを開発できるNimbleKit。今回は、NimbleKitの「NKImageView」を使って簡単なフォトアルバムを作成しよう。
2011年06月09日 16時59分

第60回 MapKit×JavaScriptでiPhone用GPSアプリ

HTML/CSS+JavaScriptでiPhone/iPadアプリを開発できるNimbleKit。GPSから位置情報を取得し、現在地を表示する地図アプリを作ってみよう。
2011年06月03日 11時16分

第59回 MapKitなら4行で作れるiPhone用地図アプリ

HTML/CSS+JavaScriptでiPhone/iPadアプリを開発できるNimbleKitで地図アプリを作ってみよう。iOSの「MapKit」を使えばわずか数行で作れる。
2011年05月26日 13時25分

第58回 NimbleKitをインストールしてJSでiPhoneアプリ開発

NimbleKitを使えば、HTML/CSS+JavaScriptでiPhone/iPadアプリを開発できる。NimbleKitのインストールと簡単なサンプルの動作方法を解説する。
2011年05月19日 11時00分

第57回 JavaScriptでiPhoneアプリ開発！NimbleKit入門

スマートフォンアプリをWebの技術で作りたい――。そんな願いをかなえるフレームワーク「NimbleKit」の使い方を解説。初回は開発環境の構築方法を詳しく説明する。
2011年04月13日 11時00分

第56回 HTML5版Dashboardウィジェットを作ってみた

Mac OS XのDashboardは、レンダリングエンジンにWebKitを利用しているので、HTML5の新機能が利用できる。HTML5 VideoでDashboardウィジェットを作ろう。
2011年04月04日 13時00分

第55回 jQueryでDashboardウィジェットを作ろう

jQueryを使って、Mac OS XのDashboardウィジェットを作ろう。写真のスライドショーを表示するウィジェットと簡易的なRSSリーダーの作り方を解説する。
2011年03月29日 11時00分

第54回 HTMLとJavaScriptで作れた！Mac用ミニアプリ

HTML/CSS/JavaScriptで作れるMac OS Xのデスクトップウィジェット（Dashboardウィジェット）。今回はオリジナルの「メモウィジェット」を作ってみよう。
2011年03月22日 10時00分

第53回 Mac用ウィジェットをHTML/CSSで自作

HTML/CSS/JavaScriptでMac OS X用のデスクトップウィジェット（Dashboardウィジェット）を作ろう。簡単な文字表示ウィジェットを作成する。
2011年03月08日 13時00分

第52回 Web技術で作るDashboardウィジェット開発入門

Mac OS XのDashboardウィジェットはHTML+CSS+JavaScriptで作れる。Web開発の技術を使ってウィジェットを作ってみよう。初回はDashcodeの使い方を紹介する。
2011年03月02日 13時00分

第51回 iOS 4.2×localStorageで作るGPSレコーダー

HTML5のlocalStorage （ローカルストレージ）を使ってiOS 4.2のSafariで動くGPSレコーダーを作ろう。サーバー不要でデータを記録できる。
2011年02月21日 13時00分

第50回 HTML5 SVGで作るシューティングゲーム

HTML5で手軽に扱えるようになったSVG（Scalable Vector Graphics）とJavaScriptを使って簡単なシューティングゲームを作ってみよう。
2011年02月10日 13時00分

第49回 HTML5のInline SVGをJavaScriptで操作

HTML5で手軽に扱えるようになったSVG（Scalable Vector Graphics）データをJavaScriptで操作してみよう。変形処理や属性の変更方法を解説する。
2011年02月03日 13時00分

第48回 HTML5で注目！インラインSVGの使い方

HTML5ではInline SVG（インラインSVG）がサポートされ、HTML内にSVGを直接記述できる。インラインSVGの使い方とJavaScriptによる制御方法を解説する。
2010年12月01日 10時00分

第47回 iOS 4.2の新機能で作るHTML5+JSアプリ

iPhone/iPad用OSの新バージョン「iOS 4.2.1」ではブラウザーにも新機能が追加されている。センサー関連機能を使ったJavaScriptのプログラムを書いてみよう。
2010年11月15日 10時00分

第46回 JavaScriptでEPUBビューアーを自作してみた

EPUB形式はXHTML+CSSがベースになっているので、誰でも自由にビューアーを作成できる。Webブラウザー上でEPUBデータを表示するビューアーアプリを作ってみよう。
2010年11月02日 10時00分

第45回 Audio Data APIでブラウザーをシーケンサーに！

Firefox 4に搭載されたAudio Data APIを使うとブラウザー上で音を自在に生成できる。MML形式のデータを演奏するプログラムを作ってみよう。
2010年10月26日 10時00分

第44回 Firefoxでソフトシンセも作れるAudio Data APIの使い方

Firefox 4に搭載されたAudio Data APIを使うとオーディオファイルにアクセスしたり、JavaScriptで自在に音を生成したりできる。簡単なサンプルで使い方を学ぼう。
2010年10月19日 11時00分

第43回 Web WorkersでPhotoshop風ヒストグラムを作ろう

JavaScriptで並列処理を実現する「Web Workers」を使って画像を解析するプログラムを作ってみよう。RGBの輝度をPhotoshopふうのヒストグラムで表示する。
2010年10月13日 11時00分

第42回 JavaScriptで並列処理ができる「Web Workers」

W3Cで標準化が進められている「Web Workers」を使うと、JavaScriptで並列処理ができる。簡単なサンプルを作りながら基本的な使い方を説明する。
2010年10月05日 10時00分

第41回 File APIでブラウザーからローカルファイルを操作

W3Cが標準化を進めるFile APIを使うとローカルファイルのデータをJavaScriptで取得できる。バイナリダンプを表示するプログラムを作ろう。
2010年09月28日 10時00分

第40回サーバー不要で保存できる「Web Storage」の使い方

W3Cで標準化が進められているDOM API「Web Storage」を使うとローカルディスクにデータを保存できる。簡単なサンプルで使い方を学ぼう。
2010年09月24日 11時00分

第39回 InDesign＋JavaScriptで電子書籍制作を自動化

InDesignはJavaScriptを使ってさまざまな処理を自動化できる。話題の電子書籍をInDesign＋JavaScriptで作ってみよう。
2010年07月06日 11時00分

第38回 HTML5 VideoでiPadがデジタルサイネージに！

iPadとVGAアダプターを組み合わせてデジタルサイネージを実現。HTML5 Videoなら専用アプリがなくても手軽にサイネージを作成できる。
2010年06月28日 11時00分

第37回 iPad対応！HTML5 Audioで作るブラウザーピアノ

HTML5 AudioとJavaScriptを使ってWebブラウザー上で動くピアノアプリを作ってみよう。iPadやiPhoneのSafariからでも利用できる。
2010年06月23日 10時00分

第36回 JSONで管理するHTML5音楽プレイヤーを作ってみた

HTML5 Audioを使ってJSON形式のプレイリストを再生する音楽プレイヤーを作成する。Canvasで簡単なビジュアルエフェクトも表示してみよう。
2010年06月03日 10時00分

第35回 HTML5 Audioで作るiTunes風音楽プレイヤー

HTML5 Audioならブラウザーだけで音声ファイルを再生できる。選択した音楽を再生するサウンドプレイヤーを作ってみよう。
2010年05月19日 11時00分

第34回 HTML5 videoでニコニコ動画風プレーヤーを作ろう

HTML5 VideoとJavaScriptを使って、ニコニコ動画風のテロップ付きビデオプレーヤーを作ろう。ブラウザー上で入力した文字を動画に流せる。
2010年05月12日 11時00分

第33回 HTML5＋JavaScriptでビデオエフェクターに挑戦！

HTML5 VideoとCanvasを組み合わせてビデオエフェクターを作ろう。ブラウザーだけでエフェクトを加えながら動画を再生できる。
2010年04月26日 11時00分

第32回 HTML5とjQueryでブラウザーがペイントツールに！

HTML5 CanvasとjQueryを使って、Webブラウザーだけで動くシンプルなペイントツールを作ってみよう。IE9対応のTipsも紹介する。
2010年04月15日 11時00分

第31回 HTML5のCanvasで作る、Flash不要のお絵かきツール

HTML5 Canvasはすでに多くのブラウザーで利用できる。Canvasを使ってブラウザー上で動くお絵かきツール「シンプルペイント」を作ってみよう。
2010年04月05日 13時00分

第30回 HTML5 videoとjQuery UIでパノラマ動画プレーヤー

HTML5のvideo要素とJavaScriptを使って動画を再生してみよう。動画の巻き戻し／早送り、パノラマ動画の視点をスライダー操作で切り替えるTipsも紹介。
2010年03月24日 11時00分

第29回 HTML5 videoで作る“動くストリートビュー”

HTML5で追加されるvideo要素を使うと、プラグイン不要で動画を再生できる。JavaScriptで動画をコントロールするプレイヤーを作ってみよう。
2010年03月12日 11時00分

第28回加速度センサーで操縦する地図サイトを作ろう

Firefox 3.6に搭載された「加速度センサーAPI」とGoogleマップを使って、傾きで操作できる地図を作ろう。HTML5のGeo Location APIも組み合わせてみる。
2010年03月05日 14時00分

第27回 BridgeのGUIをJavaScriptで操ろう！

Adobe BridgeのJavaScript入門も今回がラスト。JavaScriptで作った画像フィルターにオリジナルのGUIを追加してみよう。
2010年02月22日 11時00分

第26回 Photoshopを超えた!?BridgeとJSで作る画像フィルター

Adobe Bridgeのちょとマニアックな使い方講座。JavaScriptを使って、Photoshopも顔負けの画像フィルターを作ってみよう。
2010年02月12日 11時00分

第25回画像の自動アップロードもJavaScriptにお任せ！

Adobe BridgeのJavaScriptを使うと、画像ファイルをサーバーにFTPでアップロードできる。Web画像の処理を自動化できる便利なテクニックを紹介しよう。
2010年02月03日 11時00分

第24回 JavaScriptでRSSからPhotoshop画像を生成！

「Adobe Bridge」とJavaScriptを使った自動処理の入門記事。PhotoshopとBridge Talkを使って、RSSから画像を生成してみよう。
2010年01月25日 16時55分

第23回 Adobe BridgeのJavaScriptでXMLを操作しよう

「Adobe Bridge」による自動処理の入門記事。今回はJavaScriptを使ってXMLデータを操作する方法を解説する。
2009年12月07日 13時00分

第22回 JSでWeb制作を自動化するAdobe Bridge活用入門

「Adobe Bridge」の隠れた魅力は強力なJavaScript。BridgeとJavaScriptの組み合わせでWeb制作の画像処理を自動化しよう。
2009年11月25日 13時01分

第21回飛び出すカルーセルをUIZE Frameworkで作る（後編）

UIZE JavaScript Frameworkを使って、Amazonでおなじみの「カルーセルパネル」を作成。さらに画像クリックで飛び出すUIに。
2009年11月25日 13時00分

第20回飛び出すカルーセルをUIZE Frameworkで作る（前編）

UIZE JavaScript Frameworkを使って、Amazonでおなじみの「カルーセルパネル」を作成。さらに画像クリックで飛び出すUIに。
2009年11月13日 14時00分

第19回 JS超えた!? UIZE Frameworkの特殊効果を見せます！

豊富なエフェクト機能を持つUIZE JavaScript Frameworkを使って、リッチなスライドショー（イメージギャラリー）を作ってみよう。
2009年11月02日 11時00分

第18回 JSで超ド派手なアニメが作れる「UIZE Framework」入門

JavaScriptとは思えないほどの派手な動きを付けられるフレームワーク「UIZE JavaScript Framework」の使い方を紹介する。
2009年10月27日 15時52分

第17回 Yahoo! UI Library 3版スライドショーの作り方

ヤフーのAjaxライブラリー「Yahoo! UI Library version 3（YUI 3）」入門の仕上げに、スライドショー（フォトギャラリー）を作ってみよう。
2009年10月20日 11時00分

第16回 Yahoo! UI Library 3で驚きのアニメーションを作成

ヤフーのAjaxライブラリー「Yahoo! UI Library version 3（YUI 3）」の入門記事。今回は、アニメーション機能を使って動きのあるページを作ってみよう。
2009年10月15日 12時46分

第15回どこよりも早い「Yahoo! UI Library 3」(YUI 3)入門

米ヤフー製のAjaxライブラリー「Yahoo! UI Library（YUI）」の最新版「YUI 3」がリリースされた。初めてYUIを使う人のための入門チュートリアルをお届けする。
2009年10月07日 10時00分

第14回 HTML5のcanvasで作る画像フィルター

Firefox、Opera、Safari／Google Chrome－―主要ブラウザーに実装されているHTML5のcanvasで画像フィルターを作ってみよう。
2009年09月29日 15時01分

第13回 Quartz Composer×JavaScriptでRSSリーダーを作ろう

Mac OS Xの「Quartz Composer」入門記事。今回はJavaScriptを組み合わせて、時間経過で自動更新するRSSリーダーを作ってみよう。
2009年09月24日 10時00分

第12回 JavaScriptで始めるQuartz Composer入門

Mac OS Xに付属する「Quartz Composer」上でJavaScriptのプログラムを書いてみよう。チュートリアルで基本を解説する。
2009年09月14日 08時00分

第11回 Snow Leopard対応！初めてのQuartz Composer入門

Snow Leopardに付属している「Quartz Composer」はJavaScriptに対応している。Quartz ComposerとJavaScriptでRSSリーダーを作ってみよう。
2009年09月07日 23時38分

第10回 iPhoneのJavaScriptアプリをAndroidに3行で移植

グーグル携帯ことAndroid（アンドロイド）でもJavaScriptを使ってGPSとローカルストレージを扱える。iPhone向けWebアプリを移植してみよう。
2009年08月31日 15時00分

第9回 Illustrator×JavaScriptで百ます計算を自動生成

JavaScriptを使ってIllustrator（イラストレーター）を制御する方法の後編。「百ます計算」を完成させる。
2009年08月25日 12時55分

第8回 IllustratorもJavaScriptで自由自在に！

Illustrator（イラストレーター）はJavaScriptに対応している。JavaScriptを使えば面倒な表組みも自動化できる。
2009年08月20日 14時00分

第7回入門Ext JS：グリッドパネルの使い方をマスター

JavaScript/Ajaxフレームワーク「Ext JS」入門の最終回は、XMLデータの処理とグリッドパネル(Grid)の実装方法を紹介する。
2009年08月11日 15時48分

第6回入門Ext JS：デスクトップ風メニューバーを表示しよう

JavaScript/Ajaxフレームワーク「Ext JS」を使えば、デスクトップアプリのようなUIも手軽に実装できる。今回はメニューバーを表示してみよう。
2009年08月03日 10時21分

第5回 Ext JSでGoogleマップを表示するチュートリアル

「デスクトップアプリ並みの美しいUIが作れる」と評判のJavaScript/Ajaxフレームワーク「Ext JS」の使い方をチュートリアルで解説する。
2009年07月27日 08時00分

第4回 jQueryとも共存できる「Ext JS 3.0」入門

「デスクトップアプリ並みの美しいUIが作れる」と評判のJavaScript/Ajaxフレームワーク「Ext JS」の使い方をチュートリアルで解説する。
2009年07月20日 12時36分

第3回 PhotoshopのフィルターをJavaScriptで作る！

JavaScriptの活躍の舞台はデスクトップアプリケーションにも広がっている。PhotohopのフィルターをJavaScriptで自作してみよう。
2009年07月13日 16時09分

第2回 iPhoneがJavaScript＋SQLiteでGPSレコーダーに！

JavaScriptでGPSデータを取得できるようになったiPhone OS 3.0。取得した位置情報をSQLiteに記録し、Googleマップに表示してみよう。
2009年07月06日 18時24分

第1回 iPhoneのGPSをJavaScriptで操ろう

JavaScriptの最新ライブラリ＆Tipsを紹介する新連載。iPhoneのGPSデータを取得し、Googleマップに表示する方法を紹介する。