アドビ、日本語対応フォントをGitHubで無料配布
日本語を含む3カ国語に対応したオープンソースフォント「Source Han Sans」をアドビがリリースした。Apache 2.0ライセンスで公開されており、Adobe Typekitのほか、GitHub、SourceForgeから無償でダウンロードできる。 Source Han Sansは、日本語／中国語（簡体字、繁体字）／韓国語の3カ国語（CJK）、台湾および香港の文字セットに対応したOpenTypeフォント。6万5535文字を収録し、Adobe-Japan1-6に含まれる異体字もカバーする。ウェイトはそれぞれExtraLightからHeavyまでの7種類。なお、日本語のフォント名では「Source」の日本語をイメージした「源ノゴシック」と表示される。 開発にあたっては、グーグルが資金提供とテスト、アドビが字形デザインとプロジェクト管理を担当。「6万5000以上の文字を1社で作るのは難
マイクロソフトのJavaScriptライブラリー「WinJS」について知っておくべき５つのこと
これまでマイクロソフトの Build カンファレンスは、開発者の中でも特にマイクロソフトのプラットフォーム用に製品を開発する保守的な開発者を対象としていた。先日同社が既存の JavaScript フレームワーク「WinJS」のオープンソース化を発表したことで、このカンファレンスはウェブやモバイルの開発者も対象としていくことになるだろう。 WinJS は、HTML/CSS/JS アプリケーションの開発を支援する JavaScriptツールキットだ。これによって開発者は、ウェブやAndroid、iOS といった Windows 以外のプラットフォーム向けにも Windows アプリを開発することができる。今回 WinJS がオープンソース・プロジェクト化されたため、開発者は WinJS を利用したコードを GitHub 上に提供することも可能になった。 Angular、Backbone、Emb
Googleフォームで自動返信システムをサクッとつくる (1/4)
Google Apps Script（以下、GAS）を使えば、Googleのアプリケーションにちょっとした機能を加えて実用的なサービスに仕立てられます。今回は、問い合わせフォームを簡単に作成できる「Googleフォーム」を使って、問い合わせメールへ自動で返信するシステムを作ります。 【フォーム作成】問い合わせフォームを作る Googleフォームは、問い合わせやアンケートなどのフォームを簡単な操作で作成できるWebアプリケーションです。まずは企業サイトを想定した、シンプルな問い合わせフォームを作成してみましょう。 1. https://drive.google.comにアクセスしてGoogleドライブを開きます。「作成」ボタンをクリックし、「フォーム」を選んでください。
日本と世界の「レスポンシブWebデザイン」
マルチデバイス対応のWeb制作手法として注目を集める「レスポンシブWebデザイン」。ところが日本では「メディアクエリーを使ってスクリーンサイズごとにレイアウトを切り替えること」との誤解が広がっているようです。 レスポンシブWebデザインとよく似た手法である「アダプティブデザイン」との違いをみながら、レスポンシブWebデザインの本当の意味を考えてみましょう。 「デバイスに依存しない」レスポンシブWebデザイン レスポンシブWebデザインは、イーサン・マルコッテ（Ethan Marcotte）氏が2010年5月にテックブログ「A List Apart」の記事で発表したマルチデバイスへの対応方法です（日本語訳記事）。発表から3年が経ち、日本でもよく知られる手法となりました。 マルコッテ氏が唱えるレスポンシブWebデザインは、「メディアクエリー」「フルードイメージ」「フルードグリッド」という3つの
サンプルで学ぶTwitter Bootstrapの使い方：前編 (1/3)
Webデザインができないエンジニアでも、見た目をすばやく整えられるフロントエンドツール「Twitter Bootstrap」。前回は、Twitter Bootstrapの概要と特徴、利用事例を紹介し、実際の設置方法までを説明しました。今回は、簡単なサンプルサイトを作りながら、Twitter Bootstrapの基本的なルールと使い方を説明します。 簡単なサンプルサイトで使い方を学ぼう サンプルとして、以下のようなブックカタログのサイトを作ります。書籍の一覧とお問い合せフォームで構成されるシンプルなサイトです。 HTMLの準備 TwitterBootstrapを利用したサイト制作では、いちからからすべてを記述するのではなく、TwitterBootstrapのサイトにあるサンプルをベースに書き換えていくのが簡単です。 index.htmlの作成 まず、テキストエディターなどで空の「index.
最新NASは「買う」と「作る」のどっちが高機能でお得？ (1/4)
Gigabit Ethernetからスマートフォンまで 接続相手の広がる今時のNAS事情 自宅にあるさまざまな機器から、ファイルを共有するために便利なのが「NAS」(Network Attached Storage)。ネットワークの先にある記憶デバイスという意味で、ASCII.jp読者ならすでに利用している人も少なくないだろう。 NASは汎用性が高い一方で、「価格が高くてやや転送速度が遅い」というイメージもある。しかし、今や家庭LANも有線ならばGigabit Ethernetが当たり前。無線LANもIEEE 802.11nや、今後普及するであろうIEEE 802.11acによって高速化されている。NAS内部で使用されるプロセッサーも、高速なものを搭載する製品が増えてきた。それらもあって、「USB2.0接続のHDDよりも高速」というキャッチフレーズの製品が増えている。USB接続のHDDは、
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との違いを解説します。ソースコードだけをリニューアルすることは実務ではあまりないと思い
ここが変わった！HTML5マークアップ入門 (1/6)
ローソン、無印良品、テレビ朝日など、国内でもHTML5で企業サイトを制作する事例が増えてきました。今すぐではないにせよ、「次のリニューアルはHTML5で制作したい」と考えるWeb制作者も少なくないでしょう。本連載では、「XHTML 1.0/HTML 4.01からの移行」をテーマに、HTML5マークアップの基本から実務で使用するポイントまで、ライブドアのマークアップエンジニア 浜 俊太朗さんが解説します。（編集部） 「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価：2,808円 （
HTML5でiPhoneアプリ開発！PhoneGap入門 (1/5)
HTMLやCSS、JavaScriptといったWebの技術でスマートフォン用のアプリを開発できるモバイルフレームワークが注目されています。本連載でもこれまで、Web技術を使ってiOS向けのアプリを開発できる「NimbleKit」を紹介してきましたが、他にも以下のような同様のモバイルフレームワークがあります。 スマートフォン向けのアプリケーション開発フレームワーク Titanium http://www.appcelerator.com/ PhoneGap http://www.phonegap.com/ NimbleKit (iPhone専用) http://www.nimblekit.com/ JSWaffle (Android専用) http://d.aoikujira.com/jsWaffle/wiki/ 今回から数回にわたって、「PhoneGap」を使ったiPhone/iPad向け
もう画像は要らない！CSS3で作る申し込みボタン (1/4)
CSS3（Cascading Style Sheets,level 3）がいよいよ実用段階に入ってきた。大半のモダンブラウザーで実装が進み、アップルやグーグルなどの先進企業がCSS3を本格的に活用し始めている。CSS3を使うと従来は画像やスクリプトを使わないとできなかった表現が、スタイルシートだけでできるようになる。デザイン表現の自由度を広げ、マークアップの効率を上げるのがCSS3だ。本連載ではCSS3を使ったデザインTipsをサンプルとともに紹介する。 「申し込みボタン」や「キャンセルボタン」などのボタンは、Webのユーザーインターフェイスの中でも重要な要素の1つだ。テキストや他の要素に埋もれてユーザーが操作に迷わないように、画像を使って凝ったデザインにすることが多い。 CSS3を使えばテキストだけでも画像に引けを取らないボタンを手軽に作成できる。画像を用意する手間が減るうえに、CSSプ
iOS 4.2の新機能で作るHTML5+JSアプリ (1/4)
iPhone/iPad用OSの新バージョン「iOS 4.2.1」が11月22日にリリースされました。すでにインストールした方も多いでしょう。目玉はiPadのマルチタスク対応などの新機能ですが、今回のバージョンアップはiPhone/iPad向けのWebアプリケーション開発者にもうれしい新機能が追加されています。ブラウザー周りで追加または強化された機能を以下にリストアップします。 加速度センサー／傾きセンサーのサポート Web Sockets (ソケット通信)のサポート HTML5 Formsのサポート XMLHttp Request Levle 2 (一部) のサポート 印刷のサポート Int32やFloat32Arrayなどの配列のサポート イベントの追加 Canvas/SVGの機能追加 その他 新機能に関するリファレンスは米アップルのサイトに用意されています（11/15日付の情報）。 今
電子書籍でも失敗を繰り返すメディア業界の「ガラパゴス病」 (1/2)
独自フォーマットで鎖国する電子書籍 7月27日、凸版印刷と大日本印刷（DNP）は「電子出版制作・流通協議会」を設立し、東芝、パナソニック、朝日新聞、毎日新聞、NTTドコモなどが参加を表明した。これは総務省・文部科学省・経済産業省の「デジタル・ネットワーク社会における出版物の利活用の推進に関する懇談会」で決まる予定の標準フォーマットを採用して、日本の電子書籍を標準化しようというものだ。 その標準は、XMDFを「中間フォーマット」として使う方向だ。シャープは、次世代XMDFで電子書籍に参入し、これに対応するタブレット端末も年内に発表すると発表した。XMDFというのは一般にはあまり知られていないが、シャープの「ザウルス」用に作られた文書フォーマットで、ガラパゴス携帯での標準規格だ。日本語独特の縦書きやルビなどにきめ細かく対応し、これまで日本で発行された約1万点の電子書籍のほとんどはXMDFで書か
スマートフォン対応サイトの作り方、教えます (1/3)
「WebサイトをiPhoneやAndroidで見やすく表示したい」「スマートフォンをターゲットにしたWebサイトをデザインしたい」――そんなWeb制作者のための新連載がスタートします。PCサイト制作のノウハウさえあれば、「モバイルサイトは未経験」でも大丈夫。スマートフォン（iPhone/Android）向けサイト制作の基礎知識から実践的なテクニックまで、H2O Space.のたにぐちまことさんが解説します。（編集部） iPhoneの快進撃とiPhone 4の登場、Android端末のXperiaとDesireのヒット、au初の国産Android端末「IS01」の発売――と、スマートフォンの勢いが止まりません。いまや一部マニアやビジネスマンにとどまらず、女性やお年寄りなどの幅広い層にまでスマートフォンの利用は広がり、「1台目の携帯電話」として購入する人も珍しくなくなりました。 PCとの連携、
一挙50連発！ 最初に試したいiPadアプリカタログ（後編） (1/5)
前編に引き続き、残りのiPadアプリ25本をご紹介しよう！（アイコンによる目次は前編の1ページ目を参照） ユーティリティ Air Video 2.2.4 作者：InMethod 価格：350円 対応機種：iPad、iPhone サーバー接続型のビデオプレイヤー。動画データは「Air Video Server」をインストールしたパソコン側でiPad用に変換される。それをストリーミング受信しながらiPadで楽しむというアプリだ。動画フォーマットはほとんどの形式に対応しており、再生開始時に20〜30秒ほど待つ必要はあるが、Wi-Fi環境下ならキレイな動画を楽しめる。iPad用に動画を変換するのが面倒という人にオススメだ。 外部からのアクセスも可能となっており（Beta機能なので上手く動作しないこともあるが）、出先で動画を楽しむこともできてしまう。なおiPadに対応した動画の場合は、再エンコード
一挙50連発！ 最初に試したいiPadアプリカタログ（前編） (3/6)
Twittraffic for iPad 1.1 作者：The Iconfactory 価格：無料 対応機種：iPad 無料のTwitterクライアント。1ペイン表示に加えて、英語版しかないが、Twitterを触ったことがあればすぐにわかるレベルとなっている。設定はほとんどなく、実質ログインしてしまえばすぐに使えるお手軽さも魅力だ。機能としては、リスト、トレンドがあるため、自分のタイムラインを眺めてちょっとつぶやくといった用途にはこれで足りてしまう。 Twitepad 1.02 作者：Thomas Baltruschat 価格：230円 対応機種：iPad Twitterクライアントとしては、リストやトレンドの機能がある程度でシンプルな作りだが、ウェブブラウザーと一体型となっているところが便利。マルチタスク感覚でダラダラとTLを眺めながら、ウェブブラウズも楽しめる。 タイムラインは基本
iPhoneとカレンダーを同期 Google Syncを試す (1/3)
iPhoneでGoogleカレンダーを使いたい人に朗報！ 9日、グーグル自身が「Google Sync」のiPhone対応を発表したのだ（関連リンク）。 これでGoogleカレンダーのスケジュールを、iPhoneの「カレンダー」アプリと同期できるようになった。しかも同期はケーブルを使わず、無線でOK！ 例えば、自宅にあるMacでGoogleカレンダーに予定を追加し、出先でiPhoneを取り出して予定をチェック──といったことが実現できるのだ（もちろんその逆も可能）。 今まで、Macのカレンダーソフト「iCal」のスケジュールは、アップルの「MobileMe」を利用することでiPhoneの「カレンダー」と同期できていた。しかし、MobileMeを使うには年間9800円かかる。その「有料の壁」をなかなか超えられないという人もいるだろう。 一方で、Google カレンダーは何といってもタダなので
これで完璧！ Chromeエクステンション決定版 (1/5)
特集第1回では、人気ブラウザー「Firefox」ユーザー向けの拡張機能「アドオン」の中から上級者向けのアドオンを紹介した。第2回として紹介するのは、まさにその対抗勢力となる「Google Chrome」の拡張機能「エクステンション」だ。 こちらも以前、エクステンション機能のベータ版が登場して間もないころ、初めに入れておくべき入門的なエクステンションを紹介している。紹介した当時はエクステンションもまだ500本ほどだったが、正式版として提供を開始した現在、アドオンの種類は2000本を超えている。 そこで今回は前回紹介したものに加える形で新たに入れておきたい「上級エクステンション」を取り上げる。自社開発ならではの強み「Google活用」をはじめ、サイト閲覧に便利なもの、ネットサービスの使いこなしに使えるものなどを決定版として集めてみた。 もっとChromeを便利にしたい はじめに紹介するのは、ブ
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が隠れている。
ASCII.jp：JSで超ド派手なアニメが作れる「UIZE Framework」入門｜古籏一浩のJavaScriptラボ
特殊効果機能が満載の「UIZE JavaScript Framework」 「UIZE JavaScript Framework」（以下、UIZE Framework）が今回のJavaScriptラボのテーマです。UIZE Frameworkは、エフェクト／アニメーション表現に特徴を持つJavaScript/Ajaxフレームワークで、公式サイトには見慣れない特殊効果を使った派手なスライドショーや、写真を組みあわせたアニメーション付きのグラフなど、目を引くサンプルが多数紹介されています。その表現力の高さはJavaScriptとは思えないほどで、従来のJavaScriptライブラリーやフレームワークとは一線を画しています。 この連載では過去にJavaScript/Ajaxフレームワーク「Ext JS」と「YUI（Yahoo! UI Library）」を取り上げました（関連記事）。UIZE Fr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Googleマップ有料化でYahoo! APIを使ってみた (1/5)
