便利なGruntの弱点を補うgulp.jsのインストールと使い方
詳しくは上記連載を見てもらえば分かりますが、GruntとはJavaScriptを使用してWeb開発に伴うさまざまな作業を自動化して効率良く行うためのビルドツールです。 このツールでは「タスク」と呼ばれる一連の処理を設定ファイルに記述していきます。Gruntの設定ファイル（Gruntfile.js）は、タスクに対してJSON形式でパラメーターを指定していくのですが、ここで少々問題があります。 シンプルなタスクであれば分かりやすいのですが、多くの拡張機能（プラグイン）を使用したり、タスクの制御を細かく行う必要が生じたたりした場合、Gruntfileの記述量が増えて冗長になり、タスク同士の関連やタスク実行結果も分かりにくくなってしまいます。 そんなGruntの問題点を解消することを目的として開発されたのが、今回紹介する「gulp.js」（以下、gulp）です。 gulpはGruntを継承しつつ、
多彩な表現力のWebGLを扱いやすくする「Three.js」
多彩な表現力のWebGLを扱いやすくする「Three.js」：Webグラフィックをハックする（5）（5/5 ページ） インタラクティブ性を取り入れる ここまで、Three.jsのさまざまな機能の使用方法を解説してきました。読者の皆さんが「これは面白い、自分でも何か作ってみよう！」と感じられていたら幸いです。 しかし、記事中で取り上げてきたサンプルコードは、いずれも一方的に映像を流し続けるだけのものでした。3次元映像を自分で操作できるのがリアルタイム3Dグラフィックの醍醐味ですから、このままでは物足りないですね。そこで、マウスによるカメラ操作などの基本的なインタラクティビティの実現方法を解説して、この記事の締めくくりとします。 リサイズへの対応など これまでのサンプルコードには、インタラクティブ性の欠如の他にも以下の欠点がありました。 WebGLをサポートしないブラウザへの対応がない 画面サ
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック：ズルいデザイン（1）（1/2 ページ） デザインが自分でイイ感じに作れたらいいなあというプログラマのみなさん。少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します Webプログラマ、Webエンジニアの皆さんが、個人で作るWebサービスやハッカソンなどで、短期間に集中してサービス開発してローンチしたいときに、もうちょっと自分でイイ感じにデザインできるといいなあという声をよく聞きます。 この企画は、そんなプログラマが、少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します。 （注）このページでは、個々のデザイン要素を分かりやすく説明するために、実寸サイズより画像を拡大して使用しています。 ズルいデザインはSassとCompassを利用し
表示が速過ぎても、誰も文句は言いません～CSS Nite「表示速度最適化」レポート
CSS Nite LP, Disk 23「表示速度最適化」 2012年6月30日、ベルサール九段下で「CSS Nite LP, Disk 23」が開催されました。CSS NiteはWeb制作に関わる方のためのセミナーイベントで、マークアップエンジニアやデザイナーの方が多く参加しています。今回のテーマは「表示速度最適化」でした。 パフォーマンス計測の方法、画像の最適化、モバイル向け最適化、そしてフロントエンドからバックエンドまでを考慮した設計段階からの最適化と、幅広いながらとても密度の濃い内容でした。 自己満足で終わらないためのパフォーマンス計測 サイバーエージェントの石本 光司（@t32k）さんから「Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 - 」というタイトルで、サイトの最適化を行う上で重要なパフォーマンスの計測手段や分析方法に
おばかの“合コン”「ばかコン」、Ruby使いの女子大生モデル・池澤あやかさんも参加
おばかの“合コン”「ばかコン」、Ruby使いの女子大生モデル・池澤あやかさんも参加：D89クリップ（44）（1/2 ページ） エンジニアや学生のグループに加え、Ruby使いの女子大生モデルとして話題の池澤あやかさんがプレゼン。その後の懇親会“合コン”で参加者同士が交流し、新たな“おばかコラボ”が生まれた おばかを形にしたい人が集まった！ おばかを形にしたい人、集まれ！――おばかアプリ作りのコラボ相手を見つけるイベント「おばかアプリ選手権 de コラボろう（通称「ばかコン」）が5月29日、リクルート メディアテクノロジーラボ イベント会場（東京・銀座）で行われた。 「おばかアプリ選手権2012 夏」（8月4日開催）に先立ち、アプリのアイデアのあるデザイナーや技術を持つエンジニアがそれぞれプレゼンし、おばかアプリ作りのコラボ相手を探すイベント。ばかコンの“コン”は、コンテスト……ではなく合コン
知らないと損するFacebookファンページの作り方（3/3）- ＠IT
ファンページはタブで構成されています。「ウォール」「基本データ」「写真」などのタブがデフォルトで用意されています。まずは、このタブのコンテンツを充実させていきましょう。 「タブ」は、それぞれがアプリとして独立しています。 もしあなたが独自のタブを追加したくなったら「static FBML」というアプリを利用します。 「static FBML」はHTMLとFBML（Facebook Markup Language）をタブとして表示できるアプリです。 ■ 「static FBML」の導入 「ファンページを編集」から「アプリ」を選択します。ページの下部の「スタティックFBML」の項目から「アプリを追加する」をクリックします。 ファンページに新しいタブが追加されましたか？ そのままではコンテンツが何もない状態ですが、アプリの編集ページからこのタブの中に記述するHTMLを入力できます。試しに何か入力
いまさら聞けないiPhone/iPadアプリの作り方の基礎
いまさら聞けないiPhone/iPadアプリの作り方の基礎：SDKで始めるiPad/iPhoneアプリ開発の勘所（1）（1/4 ページ） 初めてiPhone/iPadアプリ開発に挑戦する人が、迷わず短時間でアプリを作れるように、数多くの情報の中から要点をグっと絞った開発の勘所を紹介する入門連載です 迷わず短時間でiPhone/iPadアプリを作れるように 皆さんのお気に入りのiPhone/iPadアプリは何でしょうか。筆者は、Googleカレンダーと同期してくれるスケジュール管理アプリがお気に入りです。いまでは目的のアプリを探すのも大変なほど、日々多くのiPhone/iPadアプリが登場しています。 6月8日にはiPhone 4の発表があり、マルチタスクやモバイル広告ネットワーク、ゲーム開発など、iPhone OS改め、iOS 4で実現できる機能がたくさん追加され、さらに魅力的になりました
HTML＋JavaScriptでiPhone/Androidアプリを作れるTitanium Mobileとは
HTML＋JavaScriptでiPhone/Androidアプリを作れるTitanium Mobileとは：Web技術でネイティブアプリを作れるTitanium（1）（1/3 ページ） iPad/iPhone VS Androidに戸惑っているWebデザイナ／開発者のために、Web技術でネイティブアプリを作れるオープンソースの開発ツールを紹介し、その利点や使い方を連載で解説します iPad/iPhone VS Androidに戸惑っていませんか？ 2010年1月5日、グーグルがAndroid 2.1を搭載した「Nexus One」を発表しました（参考：Google、Android 2.1搭載の“スーパーフォン”「Nexus One」を発表）。高精細なディスプレイや高速なプロセッサによる快適な動作など、iPhoneのライバルとしての存在感が話題になりました。また1月21日には、NTTドコモ
IE 6で泣かないための、9つのCSSハック (1/3) - ＠IT
有限会社タグパンダ 喜安 亮介 2009/10/8 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック＆フィルタTipsをお届けします（編集部） 最も多く使われているのに……、いや、だからこそ 多くのWebデザイナの悩みの1つは、レイアウトの表示ずれ問題だと思います。これは、各Webブラウザが採用しているレンダリングエンジンの違いから起因している場合が多いです。その中でも、最もWebデザイナ泣かせのWebブラウザなのは、マイクロソフトが開発しているIE（Internet Explore）のバージョン6です。 IE 6は、発売開始当初のWindows XPにデフォルトでインストールされていたWebブラウザということもあり、世の中の多くのユーザー
まずは、mixiアプリを使ってみよう、作ってみよう
まずは、mixiアプリを使ってみよう、作ってみよう：基礎から分かる、mixiアプリ作成入門（1）（1/3 ページ） mixiのアプリ？それって何？ 「mixiアプリ」は、iGoogleのガジェットのように、SNS「mixi（ミクシィ）」上に組み込まれて実行される、Webアプリケーションです。主に、JavaScript＋XML＋HTML＋CSSで作ります（やり方によっては、Flashなども使える）。 誰でも開発でき、人が開発したmixiアプリを自分のマイページなどに自由に組み込むことができます。また、Webアプリケーションのため課金方式は異なりますが、iPhoneアプリのようにmixiアプリを作って公開することで報酬を得ることもできます。 mixiアプリは、2009年6月現在、オープンβ環境のみで利用可能となっています。正式版は、8月公開予定です（参考：「mixiアプリ」8月に正式公開 販売
日本人がつまずかないためのiPhone開発のポイント − ＠IT
よくつまずくポイントはこれだ！ iPhoneアプリは大きく分けて下記のような流れでAppStoreに公開されます。 ここではコニットが実際につまずいた点や、ネットでよく見るつまずきポイントなどをご紹介します。これらの点に気を付け、スムーズにiPhone開発ができるといいですね。（コニットの紹介記事はこちら→ニッポンのiPhoneアプリヒットメーカーたちに続け！） 1. Developer登録 ＜登録＞ 登録情報は日本語で書いてはいけない アプリ制作を始めるためには、まずAppleIDを取得し、Apple Developer Connection（ADC)登録後、iPhone Developer Programを購入しなければなりません。 この際に氏名を日本語で書いてしまうと、iPhone Developer Programが購入できず、前に進めなくなってしまうので要注意です。 氏名に限らず
iPhoneアプリケーションをApp Storeに登録してみた
iPhoneアプリケーションをApp Storeに登録してみた：これ、俺ならこう使う（6）（1/3 ページ） 日々生み出されるネットサービスやテクノロジーに詳しい著者による、こんなふうにサービスに取り込んだら面白いのではないか、という提案。技術的な応用面にフォーカスしていく（編集部） 前回の記事「App Store登録もOK！ JavaScriptで作るiPhoneアプリ」からずいぶん時間がたってしまいました。実は年末に筆者のかかわる音楽ニュースサイト「ナタリー」の大規模なリニューアルがあり、そのほかの仕事も含めていままでにない忙しさだったのですが、それにしても2カ月はひどい。今年はちゃんと月1で記事を書けるようにしたいところです。2月にもなって今年の目標を書くのもどうかと思いますが。 さて、今回は前回に引き続きiPhoneでのアプリ開発について書きます。実際にiPhone上で動くバイナリ
App Store登録もOK！JavaScriptで作るiPhoneアプリ
Webアプリケーションは、傾きセンサやGPSからの情報取得やバイブレータ動作などのOSの機能の利用に制限があります。また、オフラインでの動作ができません。 開発の容易さは、若干主観めいてしまいますが、コンパイルが必要でメモリ管理も必要なネイティブアプリに比べて、Webブラウザでリロードするだけで最新のコードをテストできて、基本的にメモリ管理も不要なWebアプリケーションに軍配が上がります。 ネイティブアプリケーションの最大のメリットは、「App Storeでの配布ができる」ことで、多くのユーザーが集まるApp Storeでアプリケーションを配布でき、さらには課金もできてしまう点です。 ローカルWebアプリという第3の選択肢 前段の機能比較表に「ローカルWebアプリケーション」という項目があります。これは、Safariでオンライン中に所得したHTML、CSS、画像データなどを保存して、オフラ
芸術の秋にProcessingでスケッチプログラミングを始めてみよう（1/3） - ＠IT
芸術の秋にProcessingでスケッチプログラミングを始めてみよう：絵心がなくても簡単に絵が描けるProcessing（1）（1/3 ページ） アートやデザインのための“プログラミング” 読者の皆さんは「プログラミング」という用語や、それをすることに、どんなイメージを持っているでしょうか。仕事に使われるアプリケーションやWebサービスの開発の世界の「プログラミング」を考えてみると、多くの場合「実用性や効率が重んじられ、専門的な知識を持ったエンジニア／プログラマーが慎重に正確に行うもの」といったイメージではないかと思います。 しかし一方で、実用性ではなくスクリーンに表されるイメージや動きの美しさ、見るものを引き込むインタラクションのアイデアをプレゼンテーションする「プログラミング」の世界も存在します。エンジニアではなくアーティストやデザイナーが、驚きやインスピレーションを求めて大胆に「プロ
サイバーエージェント、技術者のリゾート研修施設を宮崎に開設
サイバーエージェント、技術者のリゾート研修施設を宮崎に開設：「宮崎はシリコンバレーに気候が似ている」 サイバーエージェントは5月2日、アメーバブログの技術者を対象としたリゾート研修施設を、6月1日に宮崎県のフェニックス・シーガイア・リゾート内に開設すると発表した。 同社は、宮崎県知事 東国原英夫氏が提唱する「宮崎ヒルズ」構想のコンセプトに沿った取り組みであるとしている。東国原氏はIT関連企業の宮崎県への誘致を公言しており、同社取締役社長 藤田晋氏は東国原氏との対談を通じて、今回の研修施設の着想を得たという。 同施設は、アメーバブログ内の新サービス・新機能の集中開発や、新しい技術の開発に活用する予定。日常を離れ、技術開発に専念する環境にしたいという。アメーバブログの技術者104人（2008年5月現在）の全員を対象として、1カ月間を目安に、1人につき1年～2年に1度の頻度で研修を行う。 「宮崎
Flex／AIRウィジェットのデザインをCSSでカッコよく（1/4）- ＠IT
注意！ 前回の「いまさら聞けないAdobe AIR「超」入門」では、ベータ3版を扱っていましたが、記事に沿ってアプリケーションをコーディングしていくうえでは問題ありません。しかし、AIRの設定ファイル「SimpleTimer-app.xml」のバージョンが古いので、実行時にエラーが出ます。 すでに作成しているAIRウィジェットをFlex Builder 3上で動かす場合は、SimpleTimer.mxmlの内容を別のファイルなどにコピーしておいて、いったんSimpleTimer.mxmlを削除します。そして、再度Flex Builder 3上でSimpleTimer.mxmlを作成して退避しておいた内容を作成した新しいSimpleTimer.mxmlにペーストします。AIRの設定ファイルは再度自動作成されて最新のものとなります。
Flickrの新画像編集機能「Picnik」を使ってみた － ＠IT
2007/12/05 いよいよローカルPCにアプリケーションをインストールする時代は終わった、これからは「マイページにインストールする」時代だ――。米Yahoo!傘下の画像共有サイト、米Flickr（フリッカー）が12月5日に新たに追加した画像編集機能を使ってみて、そう唸らずにいられなかった。それは、単に画像編集アプリケーションとしての使い勝手や機能がWebブラウザ上でも十分なレベルに達したと感じたからというだけではない。従来とはまったく異なるアプリケーションの配布・利用形態が現実のものとなったことを改めて認識させられたからだ。 機能自体は一般向けのレタッチ機能のみ 新たに加わった画像編集機能は、プリセットされた各種エフェクトをかけたり、赤目を修正したり、写真に額縁を付けるといった一般ユーザー向けのものが多く、Photoshopなどの画像編集ソフトを使っているユーザーには物足りないだろう。
いまさら聞けない“Web標準”、そしてXHTML＋CSS
いまさら聞けない“Web標準”、そしてXHTML＋CSS：いまさら聞けないリッチクライアント技術（4）（1/3 ページ） 前回の「いまさら聞けない、“Ajax”とは何なのか？」の説明の中で、Ajaxの定義の1つとして「XHTMLとCSSを使った標準規格のプレゼンテーション」というのがありました。前回の記事では、この部分をしっかり解説できなかったので、今回はこれについて解説をしましょう。 といっても、Ajaxの補足説明が今回の目的ではありません。HTML／XHTMLとCSSを使った「Web標準」について紹介します。 「Web標準」という単語はよく耳にしますが、具体的にどんなものか？ HTML／XHTMLとCSSとどのような関係があるのか？ さらに、HTML／XHTMLやCSSって何？ といった点について見てみましょう。 「Web標準？ Webを標準化することかな？」 AjaxやXML、Jav
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PerfumeのモーションデータをiPhoneアプリにして動かしてみた
いまさら聞けないAdobe AIR「超」入門（1/4）- ＠IT
