タグ

ブックマーク / ascii.jp (11)

  • iBooks AuthorでHTML5の電子書籍作ってみた (1/4)

    アップルが1月20日に発表した電子書籍作成ツール「iBooks Author」。さっそくダウンロードして使ってみた方も多いのではないでしょうか? アップルは、学生が使用する電子教科書の作成を目的としたツールとしていますが、iBooks Authorを使えば、画像や動画などのリッチコンテンツを埋め込んだインタラクティブな電子書籍を手軽に作成できます。 注目は、電子書籍の中にHTMLも埋め込めることです。つまり、自分で作成したHTML5+JavaScriptのプログラムを組み合わせて、よりインタラクティブな電子書籍を作成できるのです。 実際に試してみると、MP3形式などのサウンドは埋め込めないなど、若干の制限はありますが、ちょっとしたゲームや観光案内コンテンツなどを1つのパッケージとして配布できるのはメリットです(ただし、有料で販売する場合はiBooks Storeを介する必要があります)。

    iBooks AuthorでHTML5の電子書籍作ってみた (1/4)
  • 「サードパーティクッキー」が危険な理由を正しく知りましょう

    ユーザー認証を行なっているWebサイトでは、しばしば「クッキー(Cookie)を有効にする」ように注意を見かけます。他方で、アンチウイルスソフトではクッキーをスパイウェアとしてブロック/検出することがあります。クッキーはどのように使われているのか、どうした問題があるのかについてお話したいと思います。 自分自身で使うクッキー ~ ファーストパーティクッキーの問題点 クッキーは、ユーザーのPC内にWebブラウザが保存する情報です。その中身を簡単に説明すると「Webサイトの閲覧記録」で、「どのPCIPアドレスから、どのURLにアクセスしたのか」などの情報が含まれています。含まれる情報には大きな差はありませんが、どこが発行したかにより、クッキーは2種類に分けられます。 1つ目は、閲覧しているURLのWebサーバーから発行されるもので、「ファーストパーティクッキー」と呼ばれます。ショッピングサイト

    「サードパーティクッキー」が危険な理由を正しく知りましょう
  • 3分でわかるHTML5のコンテンツモデルとカテゴリー (1/3)

    HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー&デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価:2,808円 (体2,600円)/形態:B5変 (240ページ) ISBN:978-4-04-866070-9 前回のセクションに関する要素の解説では、「カテゴリー」や「コンテンツモデル」という単語が登場しました。カテゴリーとコンテンツモデルを理解すると、「要素の中にどの要素を入れられるのか」を、容易に判断できます。 「コンテンツモデル」は入れられるコンテンツのルール、 「カテゴリー」は詳細な分類 第1回の記事で、「a要素がブロ

    3分でわかるHTML5のコンテンツモデルとカテゴリー (1/3)
  • JavaScriptでEPUBビューアーを自作してみた (1/7)

    iPadのiBooksやSONY Reader、Nookなど、多くの電子書籍リーダーがサポートしているEPUB形式はXHTML+CSSがベースになっているので、誰でも自由にビューアーを作成できます。今回のJavaScriptラボは、Webブラウザー上でEPUBデータを表示するオリジナルのビューアーアプリを作ってみましょう。 ビューアーといっても、EPUB形式をきちんと解析して処理するには手間がかかりますので、今回はEPUBに含まれるXHTMLを表示するだけのシンプルなアプリです。それでも、著作権保護機能がかかっている場合を除けばほとんどのEPUBデータを表示できます。 今回のサンプルはHTML5 File APIを使っているので、Firefox 3.6以降でのみ動作します(一部をのぞく)。また、FirefoxのデバッガーであるFirebugを利用しますので、事前にインストールしておいてくだ

    JavaScriptでEPUBビューアーを自作してみた (1/7)
  • HTML5セクション要素のまとめ (1/5)

    HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー&デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価:2,808円 (体2,600円)/形態:B5変 (240ページ) ISBN:978-4-04-866070-9 前回はHTML5のセクションとアウトラインについて詳しく解説しました。今回はセクション関連の新しい要素を解説します。 セクションを明示するための要素 HTML5では、セクションを明示する要素として、section要素/article要素/aside要素/nav要素/body要素が定義されています。 section要素

    HTML5セクション要素のまとめ (1/5)
  • 「Google Developer Day 2011」基調講演 開発者の奮起を促す (1/2)

    グーグルは、開発者向けイベント「Google Developer Day 2011」を開催した。 Google Developer DayはAndroidChromeなど、グーグルが提供するプロダクト上でプログラムやサービスを開発している人向けに講演や各種セッションが用意されているイベントだ。 一般の開発者は、検索すれば簡単にわかる三択問題から、純粋に開発者向けのアルゴリズムを問うものまで含まれる、「DevQuiz」と呼ばれる質問に答えることで参加権が得られるという、グーグルらしい仕組みも用意されている。 今年は世界8ヵ国で実施。実施国は毎年入れ替わるというが、日は5年連続の開催となった。これも日の開発者の高い開発力や盛り上がりを反映してのことだという。 急激に増え続けるAndroid端末 しかしアプリ開発者にとっては厳しい時代でもある さて、今回はそのGoogle Develope

    「Google Developer Day 2011」基調講演 開発者の奮起を促す (1/2)
  • XHTML1.0とHTML5の違いをスタバのページで紹介 (1/6)

    HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー&デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価:2,808円 (体2,600円)/形態:B5変 (240ページ) ISBN:978-4-04-866070-9 HTML5と従来のHTML4.01やXHTML1.0との違いは、既存のサイトをHTML5化してみると理解しやすいでしょう。今回は、実在するWebサイトをHTML5に(勝手に)リニューアルしながら、HTML 4.01やXHTML 1.0との違いを解説します。ソースコードだけをリニューアルすることは実務ではあまりないと思い

    XHTML1.0とHTML5の違いをスタバのページで紹介 (1/6)
    j7400157
    j7400157 2011/08/24
    チュートリアル的でわかりやすい
  • jQuery UIでiGoogleふうメニューを作ろう! (1/3)

    Ajaxを使った今どきのWebアプリケーションでは、グーグルの「iGoogle」のように、ドラッグ&ドロップによる直観的な操作でページ内の要素を自由に並べ替えられるユーザーインターフェースをよく見かけます。最近ではWebアプリケーションだけでなく、ポータルサイトやメディアサイトのナビゲーションメニューにも採用されるケースが目立ってきました。 今回は、jQueryの「Sortable」を使って、ドラッグ&ドロップで要素を並べ替えられるようにする方法を紹介しましょう。Sortableを使えば、ごく簡単な方法で既存のWebページにドラッグ&ドロップUIを実装できます。 Sortableをダウンロードしよう 「Sortable」は、リスト(ul/li)などの個々の要素をドラッグ&ドロップ操作でユーザーが並べ替えられるようにするライブラリです。以前紹介した(関連記事)jQueryのUIライブラリ集「

    jQuery UIでiGoogleふうメニューを作ろう! (1/3)
    j7400157
    j7400157 2011/07/27
    listのソート
  • スマホ対応の新潮流「レスポンシブWebデザイン」とは? (1/3)

    スマートフォンの普及を背景に、「レスポンシブWebデザイン」(Responsive Web Design)という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか? 実例で解説する。 ウィンドウサイズを基準にデザインを調整 レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。 レスポンシブWebデザインは、2010年5月、米国のイーサン・マルコッテ氏によって提唱され、海外では企業サイトを含む多くのWebサイトで採用されてい

    スマホ対応の新潮流「レスポンシブWebデザイン」とは? (1/3)
  • Firefoxでソフトシンセも作れるAudio Data APIの使い方 (1/5)

    HTML5ではメディア要素としてAudioが定義され、プラグインを使わずに音声を扱えます。HTML5 Audioについては連載でも何度か取り上げてきました。 ・第35回「HTML5 Audioで作るiTunes風音楽プレイヤー」 http://ascii.jp/elem/000/000/525/525808/ ・第36回「JSONで管理するHTML5音楽プレイヤーを作ってみた」 http://ascii.jp/elem/000/000/531/531370/ ・第37回「iPad対応!HTML5 Audioで作るブラウザーピアノ」 http://ascii.jp/elem/000/000/533/533100/ これまでに作成したHTML5 Audioのサンプルは、事前に用意したオーディオファイルを再生しており、プログラムで音を生成しているわけではありませんでした。一方、Firefox

    Firefoxでソフトシンセも作れるAudio Data APIの使い方 (1/5)
  • 基調講演 : Googleがチャレンジする3C+C (1/3)

    2008年6月10日、パシフィコ横浜において、Googleが主催する技術開発者向けイベント「Google Developer Day 2008 Japan」が開催された。会場には多数の技術者が集まり、Googleの最新テクノロジーへの関心の高さを伺わせる。ASCII.jpでは今回、Debian公式デベロッパーとして著名な武藤健志氏に特別レポートを寄稿していただいた。まずは、基調講演の模様をお伝えする。(編集部) パシフィコ横浜のエントランスホールから受け付けを抜けると、そこはGoogleのミニオフィスだった。あちこちに露出するGoogleロゴ、先月米国で開催されたGoogle I/Oの模様を伝える大画面テレビ、行き交う多数の欧米人、無造作に並べられたキューブの椅子、各種のGoogleグッズを飾った棚、そしてフリードリンク。ロビーでは無線LANも利用できる。レストランやプールバーがないことを

    基調講演 : Googleがチャレンジする3C+C (1/3)
  • 1