Canvasで作ったWebアプリをiPhoneアプリに変換 (1/4)
HTML/CSS+JavaScriptでiPhone/iPadアプリを開発できるNimbleKit。前回まではNimbleKit独自のAPIを使ってアプリを開発する方法を紹介してきましたが、NimbleKitを使うとHTML/CSS+JavaScriptで作ったWebアプリケーションもiOSアプリとしてパッケージ化できます。NimbleKit編の最終回は、HTML5 Canvasを使ったお絵かきツール「シンプルペイント」をiPhoneアプリに変換する方法を紹介します。 シンプルペイントはPCのブラウザー向けに作ったWebアプリですので、iPhone/NimbleKitでは実装が難しい機能もあります。そこでiPhoneアプリにするにあたって、以下の点を変更します。 iPhoneの画面サイズに合わせてCanvasの描画領域を調整 ブラシサイズは固定 ブラシのカラーはNimbleKitのスライダ
ここが変わった！HTML5マークアップ入門 (1/6)
ローソン、無印良品、テレビ朝日など、国内でもHTML5で企業サイトを制作する事例が増えてきました。今すぐではないにせよ、「次のリニューアルはHTML5で制作したい」と考えるWeb制作者も少なくないでしょう。本連載では、「XHTML 1.0/HTML 4.01からの移行」をテーマに、HTML5マークアップの基本から実務で使用するポイントまで、ライブドアのマークアップエンジニア 浜 俊太朗さんが解説します。（編集部） 「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価：2,808円 （
スマホ対応の新潮流「レスポンシブWebデザイン」とは？ (1/3)
スマートフォンの普及を背景に、「レスポンシブWebデザイン」（Responsive Web Design）という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか？ 実例で解説する。 ウィンドウサイズを基準にデザインを調整 レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。 レスポンシブWebデザインは、2010年5月、米国のイーサン・マルコッテ氏によって提唱され、海外では企業サイトを含む多くのWebサイトで採用されてい
諸君！革命的美人ブロガー安全ちゃんに刮目せよ！ (1/5)
安全ちゃんは、「革命的オリーブ少女主義者同盟演説」や「共産主義的煮込みをつくろう！！」など、ファッションや料理に政治思想を融合した奇抜すぎるタイトルのコンテンツで注目を集めているブロガー（自称「貧困ガール」）だ。 単にネーミングセンスがユニークなだけでなく、豊富な知識と考察に裏打ちされた硬派なテキストを散りばめながらキャッチーな素材をテンポよく紹介するという、難易度の高い仕事をハイレベルに仕上げる腕が彼女の神髄といえる。 徹底的に練り込んだ個性的な文章から、ブログ「安全ちゃんオルグ日記」は、年間10本に満たない年もあるほど更新頻度が低いが、記事がアップされるたびに話題を呼ぶようになった。更新頻度の高さが重要なカギとなるブログメディアとしては、人気の保ち方が異例といえる。 顔の見えるインターネット 第94回は、そんな安全ちゃんの思考回路とその奥にある狙いを探ってみたい。 安全ちゃんオルグ日記
絶対見ておきたい有名企業のスマホサイトまとめ (1/5)
この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日本のスマホサイトは2年間でこんなに変わった iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」（スマホサイト）を開設する企業が増えている。当初はiPhone（iOS）の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実務で参考にできるように、対象を日本語の企業サイトに絞り、業種別に分類してまとめた。スマートフォンサイトの制作に入る前にチェックしておこう。
HTMLをブラウザだけでさくっと更新！アドビの新サービス
「公開済みのWebページのテキストをちょこっと直したいけど、HTMLを再編集してアップするのは面倒だ」。そんなときに便利に使えそうな新サービスが、10月15日、米アドビ システムズから発表された。Adobe Labsにてプレビュー版が無償公開中の「Adobe InContext Editing」だ。 ブラウザー上でHTMLの直接編集を可能にする「Adobe InContext Editing」。あらかじめ設定しておいた編集可能領域をクリックすると、ヘッダー部分にツールボックスが表示され、テキストの編集や見た目が変更できる（画面はアドビのWebサイトより） InContext Editingは、「Dreamweaver CS4」（米国で発売中のオーサリングツールの最新版）と連携して、Dreamweaverで作成した（X）HTMLページの一部分をWeb上で編集可能にするオンラインサービス。ブラ
サーバー不要！Yahoo! PipesでXML→JSONPに変換 (1/3)
XMLやJSON(P)形式でデータを得られるWebサービス（API）がここ数年で充実し、外部のサイトのさまざまなデータを簡単に利用できるようになりました。特にJSONP（JavaScript Object Notation with Padding）形式でデータを取得できれば、サーバー側に通信プログラムを置く必要がなくなり、ユーザー（Webブラウザー）側のJavaScriptだけで通信処理をこなせるので便利です。 ただ、Webサービスによっては、XML形式でしかデータを提供していない場合もあります。そんなときには、米ヤフーが提供する「Yahoo! Pipes」の出番です。Yahoo! Pipesは複数のフィードを束ねる“フィードアグリゲーター”として知られていますが、XMLをJSONPに変換する機能もあるのです。Yahoo! Pipesを使えば、XMLしか提供していないWebサービスも、J
平沢進が語る、音楽の新しいスタンダード (1/5)
平沢さんがプロミュージシャンとして最初にインターネットへ軸足を移して10年。無料配信やインタラクティブライブ、今回の「還弦主義」など、続々とネットを通じたパフォーマンスを展開してきた。その結果、この音楽不況下にあって売上を伸ばし続けているというから驚きだ。その秘密は何か？ というのが今回のテーマ。 「新しいスタンダードを作った方が早い」 という前回の平沢さんの発言は、明快かつ示唆に富んでいる。いま「旧（ふる）いスタンダード」のシステムが壊れつつあり、それらを延命させるために様々な規制が講じられつつある。 だが、本来音楽は、そうしたものとは無関係にあって、そうしたものと戦う必要もない。10年前にそこから抜け出す最初の一歩を踏み出した人は、それを「体感」として語ってくれた。むしろシステムに乗った途端に失われるものについても。 では、インタビューの続きをお楽しみください。 ビジネスモデルと呼べる
30分でできる！Webサイトを高速化する6大原則 (1/4)
Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか？ もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション（10段階）、横軸が表示までの時間を表している。1～5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう
「5枚プレゼン」のレイアウトを理解する
本連載では、「1枚企画書」に続いて竹島愼一郎氏が提唱する「5枚プレゼン」をPowerPointで実践する手順を全5回で紹介します。即断即決を可能にするのが以前に紹介した「1枚企画書」ですが、プランニングの王道はやはり複数枚の企画書です。ただし枚数は5枚に限定するというのが秘中の秘策です。 第2回では、5枚プレゼンのトップとボトム、導線の作り方、流れのデザインなどについてレクチャーします。 ※本記事は「ビジネス極意シリーズ パワポで極める5枚プレゼン」から一部抜粋し、編集・再構成したものです。 レイアウト――「5枚プレゼン」のトップとボトム 「5枚プレゼン」のそれぞれのページが、どういった内容でどう見てほしいのかを瞬時に理解してもらえるよう、見出しのフレーズを書き入れておくといい。タイプとしては、ページの一番上を利用した「トップ型」、一番下の「ボトム型」、トップとボトムが呼応した「問答形式型
ASCII.jp：もう配色には困らない！「Adobe Kuler」
「オリジナルのWebデザインをしたいけど、いまいち配色センスがなくて困る」「いつも好きな（得意な）色の組み合わせばかりでデザインしてしまう」「でも色彩理論を勉強するのは面倒だ」。 そんな人にぜひおすすめしたいのが、アドビ システムズが提供しているオンラインサービス「Adobe Kuler」（クーラー）だ。Kulerは、さまざまな色の組み合わせ（配色パターン、Kulerでは「テーマ」と呼ぶ）をWebブラウザー上で作成し、保存・公開もできる、ちょっと変わったサービス。いわば“みんなの力”で作られたカラーチャート集ともいえるもので、すでに7000種類以上（2009年1月現在）ものテーマが公開されている。利用料は無料だが、保存などの機能を使うにはAdobe IDが必要だ（以降の説明はログインしているものとして進める）。
ASCII.jp：これぞ完璧企画書――「1枚企画書」パターン実例3題 ｜パワポで極める「ビジネス極意」
本連載では、竹島愼一郎氏が提唱するインパクト抜群の「1枚企画書」をPowerPointで作る手順を全5回で紹介します。社会人になったらWordやExcelだけでなくPowerPointも使いこなせなくては、社内や取引先でのプレゼンに勝ち抜けません。しかし、ただ単に企画書をPowerPointで再現しただけでは、印象に残るプレゼンにはほど遠く、居眠りを誘う会議になってしまうことでしょう。 「1枚企画書」の最終回として、本書が出版に至った企画書の実例を含む、「プレゼン力の高い企画書」を3種類ご紹介します。実際の成功事例を踏まえてPowerPointをフル活用すれば、皆さんの仕事もきっと成功に近づくはずです。 ※本記事は「ビジネス極意シリーズ パワポで極める1枚企画書」から一部抜粋し、編集・再構成したものです。 Table of Contents プレ企画書1――飽和市場の「新商品企画書」 ■
ミスチルを目指して終わるな──坂本龍一かく語りき (1/4)
8日、アップル直営店の「Apple Store Ginza」にて、著名人を講師に招く学生向けのトークイベント「Dream Classroom」がスタートした（関連記事）。第1回のゲストとして招かれたのは、日本を代表するアーティスト坂本龍一氏だ。 無料ということもあってか、会場となった3階のシアターには、設置された84席というイスの数を大きく上回る150人以上の観客が押し寄せた。入場は学生優先で、残念ながら会場に入れなかった人も出たほど人気だった。Apple Storeによれば、開店以前の9時からすでに店舗前に人が並んでいたという。 1時間を超えるトークにおいて、坂本氏は「アジ演説」をしていた学生時代のこと、モーリス・ラベルやアンドレ・ブルトン、マルセル・デュシャン、ジャン＝リュック・ゴダール、ナムジュン・パイクといった影響を受けた人物、特に取り組んでいる環境問題への活動、学生へのメッセージ
エラーでブルブル!! JavaScriptでおもしろフォーム (1/5)
どんなWebサイトにでもあるごく普通のページにこそ、工夫を凝らす。思いがけない演出でサイト訪問者を楽しませる。それも、決して大げさなものではなく、ごく簡単な、ほんのちょっとした仕掛けで――。そんな粋なWebサイトの1つに、英国の引越支援サイト「Move Me」があります。 引越業者やライフラインの手配など、引越しのときに必要になる手続きをまとめてネット上でできるようにしたMove MeのWebサイトは、オンラインサービス業者のサイトらしく、使い勝手よくデザインされています。JavaScript／Ajaxを使った細かな技も光るサイトです。そんなMove Meのページの中から、今回は「申し込みフォーム」の演出をお手本とさせてもらいましょう。 今回のお手本サイト：『Move Me』 英国で展開中の総合引越支援サイト。複数の引越業者の見積もり比較・手配から、水道・電気・ガスといったライフラインの手
HTMLもCSSも書換不要！気持ちいいスクロール (1/5)
Webサイトを作るにあたって、ネット上でデザインの参考になるサイトを探していると、プロのWebデザイナーのポートフォリオサイトに行き当たることがあります。ポートフォリオサイトはデザイナーにとってのショーケース。気合の入った作りや実験的な要素を盛り込んでいるサイトもあり、単純に眺めても楽しいものです。 今回取り上げるサイト「Cosmive」は、Webデザイナー・Muhammad Uzairさんのポートフォリオサイト。色鮮やかで美しいグラフィックに、JavaScriptによるダイナミックなユーザーインターフェイスを合わせています。今回はこのサイトから参考にさせてもらいましょう。 今回のお手本サイト：『Cosmive』 パキスタン在住のWebデザイナー、Muhammad Uzairさんのポートフォリオサイト。自身のプロフィール、手がけた作品の紹介、問い合わせフォームまで、1ページにコンパクトにま
デザイナーにオススメ！JavaScript滑らかメニュー
サイトの構造を分かりやすく整理したグローバルナビゲーションを設置したい。カテゴリが細分化されているWebサイトで、遠回りせずに直接、目的のページに移動できるようにしたい――。そんなときに使えるJavaScriptライブラリが、Dynamic Driveで公開中の「Smooth Navigation Menu」だ。 Smooth Navigation Menuは、多階層のドロップダウンメニューを簡単に設置できるライブラリ。（X）HTML中のリストタグを読み込み、下の画面のようにドロップダウンメニューとして表示してくれる。しかも、メニューの展開時にはちょっとしたアニメーション付き。ライブラリ名にもなっているとおり、スムーズな動きがなかなか気持ちいい。 このSmooth Navigation Menuは、JavaScriptに詳しくないWebデザイナーでも扱いやすいように、スクリプト部分を一切い
ASCII.jp：Web制作会社が作った！超使えるJavaScriptライブラリ
「Webサイトを作るときに本当によく使う機能を、自分で作らずにさくっと実装したい」――。そんなワガママな願望をかなえてくれる JavaScriptライブラリが登場した。ミツエーリンクスが今月オープンソースとして公開した「MJL（MITSUE-LINKS JavaScript Library）」は、Webサイト制作に必須の“最小限の機能”に絞ったJavaScriptライブラリだ。 昨今相次いで公開されている、リッチなUIを実現するJavaScript/Ajaxライブラリとは異なり、MJLの機能はとてもシンプルだ。もともとWeb制作会社であるミツエーリンクスが「自社標準ライブラリ」として作成したものだけあって、汎用性・実用性を重視したライブラリになっている。 具体的な機能は以下の6つ。確かにどれもよく使いそうなものばかりだ。 画像のロールオーバー Flashオブジェクト埋め込みの機能拡張 新規
コレは便利！ブログに「目次」が付けられる
sponsored 横浜でパン好きが集う「パンのフェス」開催！ 参加者をうならせたのは……えっ、ファミリーマート？ sponsored 「ASCII BESTBUY AWARD 2023」特別賞受賞の注目スマホが買いの理由を探る！ スマホ専門家が3ヵ月使って悟った。スマホは「AQUOS sense8」で大満足な12の理由 sponsored タイプが異なるラインアップ充実で、さまざまな場面に適したタイプの製品が存在する！ 音楽を楽しむのみにあらず！ ファーウェイのイヤホン5製品はテレワークやジョギング中の利用にも優れた選択肢だ！ sponsored 専売デバイスにMSIの新ケース採用PC、2024年のSTORMは新製品が続々登場！ sponsored グローバルでも注目を集める日本発の取り組み、このタイミングで協業を深化させた理由 SB C&SとDropboxが立ち上げた「Dropbox
「アホなだけでは誰も見てくれない」──ココロ社の中の感性と理性 (1/4)
「はてなダイアリー」「はてなブックマーク」など、ネットの一部に独特なコミュニティーを作り上げているはてな。広大なネットの中では「ネット国日本県はてな村」という規模だが、その村で人気を集めてブレイクして、日本県に名を轟かすようになるブロガーも少なくない。 今回話をうかがったココロ社氏もはてな村育ちの有名人だ。中でもよく知られているのが2006年末にYouTubeにアップした「Wiiが欲しくて気が狂ってしまった男の映像」。Wiiに見立てた豆腐で遊ぼうとする哀愁漂う姿が、海外のユーザーに大受けし、日本県を飛ばしてネット国全体で脚光を浴びた。 しかし、その本分は荒唐無稽なテキストにあり、ブログとして異例なほど長文のエントリーを今も週1、2ペースで発信し続けている。今回はそんなココロ社氏の心の奥を覗いてみた。 ココロ社氏が運営するブログ。「東京から45分で行ける日本屈指の清流地帯」や「実録・ネットで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ASCII.jp － Web Professional（ウェブ・プロフェッショナル）｜デザインからマーケティングまで、Webを仕事にする人の情報サイト