Dreamweaver CS5.5でスマホアプリ作ってみた (1/3)
たった1年で新バージョンの登場となったDreamweaver（関連記事）。5月下旬発売の「Dreamweaver CS5.5」はCS5からのアップグレードでも1万5750円という価格設定に驚かされる。だが、ベータ版を触って価格以上に驚いたのがスマートフォン対応機能の“本気度”だ。 Dreamweaver CS5.5では、オープンソースのJavaScriptフレームワーク「jQuery Mobile」をテンプレート的に利用することで、iPhoneやAndroidに最適化されたスマートフォンサイトをわずか数ステップで作れてしまう。jQuery Mobileは、iPhone/Android/Windows Phone/BlackBerryなどで利用できるクロスプラットフォーム設計のフレームワーク。以下のようなシンプルなスマートフォンサイトなら、PhotoshopもFireworksも使わず、Dr
NASをこえたQNAPのサーバー機能！ブログやECサイトも (1/3)
前回はWebサーバーを構築してインターネット環境からサイトを閲覧するまで紹介した。こういう風に書くと、システム管理者向けのサーバー構築方法を解説しているようだが、簡単便利な高性能NAS「QNAP TS-412 Turbo NAS」（以下、TS-412）の話である。 中規模レンタルサーバーに匹敵!? MySQLとPHPも稼動するウェブサーバー 筆者はいままで、業務として何台ものウェブサーバーを構築してきた。 その時その時代の最新モジュールを組み合わせ、サーバーに合わせてウェブサーバーやモジュール類を選択し、エラーが出ないように設定し、コンパイルし、テストし……と、地味でかつ面倒な作業を行なってきた。 しかし、このTS-412は、チェックボックスを選択して「適用」ボタンを押すだけで、ウェブサーバーが構築できてしまった。正直、商売あがったりな気もするが、とてもありがたい。 そして、「これは本当に
40分で覚える！jQuery速習講座 (1/6)
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
ASCII.jp：Googleも採用！CSS3実践テクニック
「CSS3をWebページに実装する」というと意見は真っ二つに分かれる。「完全肯定派」と「完全否定派」だ。しかし、Internet Explorer（IE）を除く主要なWebブラウザー（Safari/Firefox/ Opera/Google Chrome）は現実にCSS3への対応を進めており、少しずつだが、CSS3を利用するWebサイトも現れ始めた。代表例が、おなじみの「Google」だ。 Googleの検索ボタンに注目する 「Google？」と意外に思った方も少なくないかもしれない。次の画面は、Google検索のトップページをSafari 4で開いたところだ。実はこの検索ボタンにCSS3が隠れている。
30分でできる！Webサイトを高速化する6大原則 (1/4)
Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか？ もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション（10段階）、横軸が表示までの時間を表している。1～5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう
jQueryのイベントをチュートリアルで学ぶ（前編） (1/6)
jQueryを使ったプログラムの基本的な要素として、セレクターと(X)HTML/CSSを操作する命令について解説してきました。今回はもう1つの重要な要素である「イベント」を紹介します。 命令が実行されるタイミングを決める「イベント」 これまで見てきたように、jQueryを使ったプログラムは、セレクターで特定の(X)HTML要素を指定し、(X)HTMLやCSSを追加・変更します。サンプルプログラムは理解しやすいように、Webブラウザーで開くといきなりプログラムが実行されるものでしたが、本来必要なのはサイト制作者が意図したタイミングで実行されるプログラムですよね。では、タイミングはどのようにして指定するのでしょうか？ たとえば、第1回で紹介したアコーディオンパネルは「ユーザーが特定の要素をマウスでクリックしたときに、要素の高さを変更する」プログラムでした。ほかにも、マウスオーバーで画像が切り替
僧職系男子・仁鐵／蝉丸Pが奏でる「仏教の新しい魅せ方」 (1/5)
実際にお寺で住職を務める「蝉丸P」こと仁鐵さんがニコニコ動画にアップロードした動画の数々。アニメやゲームの知識を交え、仏教の常識をあまりにも分かりやすく解説する動画は話題を呼んだ 2008年11月、ニコニコ動画に木魚などの仏具を使ってアイドルマスターの音楽を演奏した動画がアップされ、2009年7月時点で20万再生を超える大ヒットを飛ばした。 コンテンツ作者に「P=プロデューサー」の称号を付けるアイドルマスター／ボーカロイド界隈の慣例にならい、周囲から蝉丸Pと呼ばれるその人物は、続いて2009年3月に「ニコニコ仏教講座」というシリーズ動画をアップ。仏教の各宗派の関係を「原作派と二次創作派」などといった同人界隈のファン派閥に喩えたり、仏壇の機能について「本尊はケータイにおけるアンテナとSIMカード」と説明するなど、フランクすぎるともいえる親しみやすい解説でこちらも立て続けにヒットを残している。
朝日がCNET買収 Webメディアは存亡かけた競争へ
朝日新聞社によるCNET Japanの事業買収がまとまったとき、交渉の席で笑みを浮かべたのは朝日新聞社なのか、CNET Japanの運営元である米CBS Interactiveなのか、あるいは話を持ち込んだ投資銀行なのか。 朝日新聞社はもともとデジタルに強い会社だ。かつては「アサヒパソコン」や「ぱそ」などのパソコン誌を発行していたし、新聞社としては比較的早い1996年8月にニュースサイト「asahi.com」を開設した。一時期はシリコンバレー（サンノゼ支局）にWeb担当者を送り込み、時差を利用し、24時間体制でサイトを更新するほど力が入っていた。 しかし、asahi.comには日経BP社やITmediaほど深いIT記事がない。毎日.jpのように巨大ポータルの集客力を味方に付けているわけでもない。「ITに強い」CNET Japanの買収がうまくいけば、ニューヨーク・タイムズがabout.co
ASCII.jp：TCP/IPの基礎の基礎を理解していますか？｜TCP/IPまるわかり
インターネットは、TCP/IPというプロトコルを基盤とするコンピュータネットワークである。これからTCP/IPについて復習していくわけだが、まずは基礎的な用語とその概念を復習しよう。 インターネットを支えるTCP/IP いまやインターネットは、テレビや電話、新聞などと並ぶメジャーな媒体に数えられるようになった。この巨大なインターネットを下から支えているのが「TCP/IP」と呼ばれるプロトコル群である。 そもそも「プロトコル（protocol）」とは、ものごとの作法や手続きを明示的に取り決めて文書化したものだ。特にコンピュータネットワークの世界では、コンピュータ同士のデータのやり取りの方法を厳格に定めた規格（規約）のことを指す。コンピュータはプログラムに従って動作する機械であるため、厳密な取り決めがなければ複数のコンピュータを協調して動かすというのは難しい。 TCP/IPも、そのようなプロト
ASCII.jp：黒船Google汐留沖に出現でWeb広告業界に激震！ PVもUVもユーザー属性も比較できる「Ad Planner」
Web業界に衝撃を与え続けてきたグーグルが、Web広告業界のビジネスの根幹を揺らがしかねないとんでもないツールを公開している。大手サイトのユニークビジター（UV）/ページビュー（PV）から、ユーザーの学歴や世帯収入といった属性まで丸見えにしてしまう「Google Ad Planner」だ。いったいどんなツールなのか。 「公称値」と「Google調べ」が比べられることに 「Google Ad Planner」は、Webニュースやポータルサイトなどへの広告出稿を検討している企業（広告主）の出稿計画をサポートするツールだ。昨年6月、米国でのサービス提供当初は招待制のクローズドなサービスで、日本のWebメディアは未対応だったため、国内のニュースサイトは簡単に紹介した程度だった。しかしその後、対応する国が増え、現在では日本のWebメディアにも対応、ユーザーインターフェイスは英語だが、Googleアカ
「酢鶏」作者が語る「一家に一台、人工無脳」の未来像 (1/5)
人工無脳（もしくは人工無能）とは、自動で言葉を選び、人間とのコミュニケーションをするプログラムの俗称だ。言語解析の正確さよりも場の楽しさを重視したものが多く、ブログやSNS、チャットなど、様々なサービス上で彼らが発信した情報を目にすることがある。 数回程度のやりとりでは人間と間違えるほどに高度なプログラムも多く、怒りっぽかったり、ヘンな疑問を投げかけたりと、独自の性格を持った人工無脳が人気を集めている。 その中でもトップクラスの知名度を誇る人工無脳が、shohoji氏作の「酢鶏」だ。酢鶏は2004年5月頃に誕生し、ブログやチャット、mixiやTwitterなど、いくつものコミュニティで活躍してきた。今年4月1日には「酢鶏容疑者を逮捕」というエイプリルフール記事のネタにされるなど、マスコットとしての存在感を発揮し続けている。 作者であるshohoji氏は、どんな意図で酢鶏を開発したのか。そし
これはひどい？ 「薬のネット通販禁止」騒動の顛末 (1/3)
インターネットや電話などの通販で薬が買えなくなる──。 ここ数ヵ月、インターネットを騒がせた話題に「改正薬事法」がある。簡単に説明すると、今年の6月1日より施行される改正薬事法で、医師の処方箋なしで買える「一般医薬品」の多くが通信販売できなくなるということだ（詳細はこちらの記事）。 この改正案に反発したのが、ネット企業や消費者だ。「今まで売っていたのが扱えなくなると困る！」「田舎に住んでいて薬が自由に手に入らないのに……」「忙しくてネット通販でしか買えない」といった非難の声が上がり、署名を呼びかける反対運動まで巻き起こった。 そうした状況を踏まえて、厚生労働省は2月に「医薬品新販売制度の円滑施行に関する検討会」（検討会）という話し合いの場を用意。そして6回の会議を重ねた結果、今後2年間の経過措置として、顧客が今まで使っていた薬を継続販売する場合や、離島に住んでいるときに限って通販を認める方
Webデザイン劇的ビフォーアフター09年春版 (1/4)
この4月、新しい事業年度のスタートに合わせ、各社のWebサイトが相次いでリニューアルした。ここでは、3月下旬～4月にかけて大規模なリニューアルを実施したWebサイトを編集部でピックアップし、リニューアル前後の画面写真付きで紹介する。最新の企業サイトのトレンドをつかみ、自社サイトのリニューアルの参考にしよう。 マイクロソフトが運営するポータルサイト「MSN」は、2008年4月以来ほぼ1年ぶりにトップページをリニューアル。「毎日使いたくなるMSN」（マイクロソフト）を目指し、使い勝手を高めた。 3カラムのレイアウトは従来のままだが、それぞれのカラムの役割を明確にし、各カラムに入る要素を分類、整理している。具体的には、左カラムにHotmailの受信状況や天気などを確認できる個人ツール類を、中央カラムにニュースなどの最新情報を配置。ディスプレイ広告や企画広告への誘導はすべて右カラムに集約した。 ま
「5枚プレゼン」のレイアウトを理解する
本連載では、「1枚企画書」に続いて竹島愼一郎氏が提唱する「5枚プレゼン」をPowerPointで実践する手順を全5回で紹介します。即断即決を可能にするのが以前に紹介した「1枚企画書」ですが、プランニングの王道はやはり複数枚の企画書です。ただし枚数は5枚に限定するというのが秘中の秘策です。 第2回では、5枚プレゼンのトップとボトム、導線の作り方、流れのデザインなどについてレクチャーします。 ※本記事は「ビジネス極意シリーズ パワポで極める5枚プレゼン」から一部抜粋し、編集・再構成したものです。 レイアウト――「5枚プレゼン」のトップとボトム 「5枚プレゼン」のそれぞれのページが、どういった内容でどう見てほしいのかを瞬時に理解してもらえるよう、見出しのフレーズを書き入れておくといい。タイプとしては、ページの一番上を利用した「トップ型」、一番下の「ボトム型」、トップとボトムが呼応した「問答形式型
jQueryでエクスプローラ風メニューに！ (1/2)
ネットショップや情報サイトなど、複雑な階層構造のWebサイトでは、なるべく分かりやすくて見栄えのいいナビゲーションを設置したい、というニーズがあります。今回は、jQueryプラグインのひとつ、「Treeview」を使って、リストをツリー風に格好よく表示する方法を紹介しましょう。 ui／li要素をツリー表示する「Treeview」 Treeviewプラグインは、HTMLのul／li要素でマークアップしたリストをツリー風に表示するJavaScriptです。要素をクリックで開閉したり、Windowsのエクスプローラのようなフォルダ／ファイルアイコンを表示したりと、いろいろカスタマイズできるのが特徴です。開発者はJorn Zaefferer氏（Jornの「o」の上に点が2つ付きます）で、MITライセンスで公開されています。 Treeviewプラグインは、以下のページで配布されています。ページの先頭
Yahoo！の流れるパネルをJSライブラリで再現 (1/5)
日本最大のポータルサイト「Yahoo！ JAPAN」のトップページがリニューアルしたのは、2008年1月のこと。従来の2カラムから3カラムのレイアウトに変わり、世界各国のYahoo！に合わせる形でデザインも一新されました。同時に行なわれたのが、ユーザーインターフェイス（UI）のリッチ化です。新しいYahoo！ JAPANのページには、タブ／アコーディオンパネル／フローティングウィンドウなど、ここ数年のトレンドであるAjaxを使ったUIが随所に盛り込まれています。 こうした流れは、トップページだけではありません。リニューアルと前後して、Yahoo！ JAPANではさまざまなサービスのUIの改善が実施されています。今回はその中のひとつ、「Yahoo!知恵袋」に注目してみましょう。今年2月にリニューアルされたばかりのこのQ＆Aサービスの新しいトップページが、今回のお手本です。 今回のお手本サイト
ASCII.jp：これぞ完璧企画書――「1枚企画書」パターン実例3題 ｜パワポで極める「ビジネス極意」
本連載では、竹島愼一郎氏が提唱するインパクト抜群の「1枚企画書」をPowerPointで作る手順を全5回で紹介します。社会人になったらWordやExcelだけでなくPowerPointも使いこなせなくては、社内や取引先でのプレゼンに勝ち抜けません。しかし、ただ単に企画書をPowerPointで再現しただけでは、印象に残るプレゼンにはほど遠く、居眠りを誘う会議になってしまうことでしょう。 「1枚企画書」の最終回として、本書が出版に至った企画書の実例を含む、「プレゼン力の高い企画書」を3種類ご紹介します。実際の成功事例を踏まえてPowerPointをフル活用すれば、皆さんの仕事もきっと成功に近づくはずです。 ※本記事は「ビジネス極意シリーズ パワポで極める1枚企画書」から一部抜粋し、編集・再構成したものです。 Table of Contents プレ企画書1――飽和市場の「新商品企画書」 ■
技術系サイトに必需品！ ソースコードは鮮やかに JavaScriptもPHPもHTMLもOK！「Syntax Highlighter」の使い方
Webプログラミング/Webデザインのネタを扱うブログやWebサイトを運営していると、HTMLやCSSなどのソースコードを掲載することが多くあります。そんなときにぜひ活用したいのが、ソースコードを読みやすく表示してくれるJavaScriptライブラリです。今回は、そのうちの1つ、「Syntax Highlighter」の使い方を紹介しましょう。 多くの言語の構文強調表示に対応した「Syntax Highlighter」 HTMLなど各種言語のソースコードをWebページの中で表示するのは、HTMLのpre要素を使えば簡単です。ただ、ソースコードをそのまま表示すると、見た目が分かりやすくはありません。そこで、タグなど言語の特定キーワードに色を付けて、他の部分よりも強調して表示することで見やすくしましょう。 こういった「構文強調表示」を行なうJavaScriptは、いくつか公開されていますが、そ
jQueryアニメ＆エフェクト合わせ技で画像を拡大
コンテンツの魅力を引き立て、十分に伝えるためには、時には“一歩引いた”Webデザインがいいケースもあります。たとえば、自身が手がけた仕事を紹介するデザイナーのポートフォリオサイトがそうかもしれません。ポートフォリオサイトそのものを作品と見なして、凝ったビジュアルデザインを作り込むこともできますが、過去に手かげた作品が豊富であれば、それらの個性を生かすシンプルなデザインもいいでしょう。 スイスのデザイナーユニット「Contreforme」のポートフォリオサイトは、後者のアプローチ――各々の作品を引き立たせるサイトデザイン――を採用しています。ただし、それだけではありません。このサイトが採っているもうひとつの手法が、アニメーション／エフェクトによる楽しい演出です。今回はこのサイトの技に注目してみます。 今回のお手本サイト：『Contreforme』 企業のCI策定やグラフィックデザイン、Web
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IEにも対応！10分でできるWebフォント実装法 (1/3)
