node.jsとWebSocketで作る野球盤ゲームの裏側 (1/4)
Expressは雛型として扱うテンプレートエンジンを選択できます。デフォルトのテンプレートエンジンは「jade」です。jadeは以下のようにしてインストールします。 $ npm install jade jadeはXML形式でなく、インデント形式で記述します。jade以外にも、EJSやCoffeeKup、Hamlなどのテンプレートがありますので、好みで選びましょう。HTML形式で書きたい場合はEJSを選択するとよいでしょう。 Expressとjadeをインストールしたら、実際にWebアプリの雛形を作ってみましょう。 $express sample create : sample create : sample/app.js create : sample/logs create : sample/pids create : sample/public/images create : sam
作って学ぶスマートフォン対応サイトの基本 (2/4)
基本のHTMLを作成する 最低限の制作環境が整ったところで、さっそく簡単なスマートフォン向けWebページを作成してみましょう。エディターを起動して、次のようなHTMLを用意します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>スマートフォンサイトテスト</title> </head> <body> </body> </html> 今回はHTML5で記述していますが、基本的にはHTML4やXHTMLなど、PC向けのHTML/XHTMLがほぼ利用できます（iモードなど携帯サイト用のHTMLは正しく表示できません）。続いて、基本的なマークアップを施していきます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>
JavaScriptで振り分けてスマホサイト完成！ (1/5)
スマートフォンサイトの設計・デザイン、HTML5+CSS3による基本的なマークアップについて前回までに解説してきました。今回はページ内の要素にリンクを設定してスマートフォンサイトを仕上げます。 ページ内リンクを張る 今回制作しているスマートフォンサイトは、ページ内の各コーナーに移動できるナビゲーション（ジャンプボタン）を設置しています。まずはジャンプボタンにページ内リンクを設定しましょう。ページ内リンクは、PCサイトと同様、リンク先の要素にID属性を振り、a要素を次のように記述します。 <ul class="clearfix"> <li><a href="#access">アクセス</a></li> <li><a href="#tel">電話</a></li> <li><a href="#mail">メール</a></li> </ul> ボタン全体にリンクを貼る ページ内リンクを設定したサ
スマートフォン対応サイトの作り方、教えます (1/3)
「WebサイトをiPhoneやAndroidで見やすく表示したい」「スマートフォンをターゲットにしたWebサイトをデザインしたい」――そんなWeb制作者のための新連載がスタートします。PCサイト制作のノウハウさえあれば、「モバイルサイトは未経験」でも大丈夫。スマートフォン（iPhone/Android）向けサイト制作の基礎知識から実践的なテクニックまで、H2O Space.のたにぐちまことさんが解説します。（編集部） iPhoneの快進撃とiPhone 4の登場、Android端末のXperiaとDesireのヒット、au初の国産Android端末「IS01」の発売――と、スマートフォンの勢いが止まりません。いまや一部マニアやビジネスマンにとどまらず、女性やお年寄りなどの幅広い層にまでスマートフォンの利用は広がり、「1台目の携帯電話」として購入する人も珍しくなくなりました。 PCとの連携、
ここが変わった！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向け
MacBookのバッテリーと長く付きあう3つのコツ (1/2)
13インチMacBook Proといえば、均整なアルミのボディーに、デジタルライフを楽しむための機能をギュっと詰め込んだプロダクト。国内でも人気が高くて、「初めてのMac」として選ぶ人も多いです（Apple Storeで見る）。 本連載「目指せ快適！ MacBook Pro長期レビュー」では、本体の見所や併せて使うと便利な周辺機器、覚えておくと便利なソフトの設定方法など、MacBook Proをより楽しく使うための情報を提供していきます（連載の目次）。 MacBook Proに限らず、ノート型PCになくてはならないのが「バッテリー」。バッテリーがあるからこそMacとして機能し、場所を選ばず利用できるのだ。今回は「内蔵バッテリーとうまく付き合う」をテーマに、そのメンテナンス術を解説したい。 バッテリーが尽きるとどうなるか しばらく前、バッテリーを手軽に着脱できるMacBook Pro（Lat
Air／Proが24時間駆動!? 外付けバッテリー「HyperJuice」 (1/4)
Macオーナー、とりわけモバイラーの生命線といえば、今も昔もバッテリーだ。いくら軽くて高性能なモバイル機器でも、電源が入らなければ単なるお荷物。筆者もMacBook Proを出先で使っている際、「ここでバッテリー切れかよ！」と悲鳴を上げたくなるような状況に何度も出くわしている。 一応、MacBook Proの2009年以降のモデルでは、内蔵バッテリーが交換不可能な組み込み式に変わって、駆動時間も大幅に延びている。しかし、それでも展示会の取材などで朝から晩まで外で作業する場合に、電源アダプターを持たずに出かけるのはやっぱり不安になる。 折しも福島第一原発の事故を受けて、東京電力管内では電力不足が懸念されており、ピーク時（平日13時〜16時）の電力消費量がぐんと上がる夏に改めて計画停電を実施する可能性がなくなったわけではない。計画停電が実施された場合でも、滞りなく仕事を続けるために予備のバッテ
1ヵ月使ってわかった新MacBook Airの本質 (1/3)
今回の題材は、本連載としては久々のMacだ。「MacBook Air」の新型は10月21日に発表されるや(関連記事)、途端に大きな話題となったのは皆さんもご記憶のとおりだ。 今回は、発売後まもなく購入した11インチモデルを使っての感想をお伝えしたい。Macユーザーが称賛し、Windowsユーザーも気になる「新Air」の本当のところを語ってみよう。 ULV版Core 2 Duoにモデルチェンジ スペックは低いが価格も安い まず、新Airの概要をおさらいしておこう。新Airは、2008年に登場した前モデルの「薄い」というアイデンティティーを継承しつつ、デザインと作りを変更。13.3インチと11.6インチの2モデルラインナップになった。前モデルは「白い恋人」などのラングドシャ・クッキー的な「縁だけがゆるやかに薄くなる」形状であったが、新モデルはヒンジ部が若干厚い「角丸のくさび」型だ。 今回採り上
一目で分かるWebサイト制作の流れ
一般的なWeb制作のプロジェクトについて、大まかな流れとポイントを4つのフェーズで説明します。Webディレクターは、各フェーズのポイントを把握し、的確なディレクションをしていく必要があります。 打ち合わせから提案まで Web制作は、クライアントからの問い合わせや、営業が制作案件を取ってくるところから始まります。この時点で見積りの提出が必要な場合もありますが、大抵は最初にヒアリングのために初回打ち合わせ（オリエンテーション）をセッティングします。なお、案件を受ける際には、コンペか否かも必ず確認しましょう。 初回の打ち合わせで、クライアントの要望やサイト制作の目的などを把握したら、次に企画提案書を作成します。要望や案件規模にもよりますが、初期段階の提案ではプロジェクトの全体像やコンセプトに沿った企画案を盛り込みます。クライアントから要望があれば、この段階でデザインのラフ案を制作することもありま
ATOK 2008を買ってでも使うべき“10の理由” (1/5)
“日本語入力ソフト”（日本語IME）の存在を意識してパソコンを日々使用しているユーザーは、ASCII.jp読者の中でどれほどいるだろうか。 10年以上も前のMS-DOSの真っ黒なパソコン画面に向かっていたあの頃は、自分でお気に入り日本語入力システム（FEP）を選んで購入して、環境を作り上げるのが当たり前だった。バックスの「VJEシリーズ」、管理工研の「松茸」、エー・アイ・ソフトの「WXシリーズ」……。各社から多様な日本語FEPが提供されていたものだ。さらに自分に手になじむようにキーカスタマイズもして使っている人も多かった。 しかし、Windows Vista/XP全盛の現代ではOSに日本語入力ソフトが付属していて、パソコンさえ買ってくればすぐに入力できてしまいます。特に意識せずに「MS-IME」をただただ使っている人も多いだろう。 そんな今こそ、あえてジャストシステム(株)の「ATOK 2
はてブの評判が丸分かり！ APIを使ってみよう (1/2)
Webサイトを運営していると、自分のサイトや記事の評判が気になることと思います。そんなとき、ネット上の評価を知るひとつの手段となるのが「はてなブックマーク」です。今回は、自分のWebページに、はてなブックマークのブックマーク数やコメントなどを表示する方法を紹介します。 JSONPでデータを取得できるAPI はてなブックマークは、外部からブックマークするなどの機能を実装するために、API（Application Programming Interface）を公開しています。それらAPIの1つに、「はてなブックマークエントリー情報取得API」があります。 これを使うと、個々のWebページに付けられたブックマークの情報を得られます。具体的には、以下のようなアドレスにアクセスすると、個々のWebページのブックマークの情報が、「JSON」（JavaScript Object Notation）形式の
これは使える！ワイヤーツールの大本命を試した！ (1/3)
画面遷移の設計って面倒だよね 受託サイトの制作現場にいるみなさん！ 突然ですが、画面設計の段階でこのようなやりとりをした経験はありませんか？ （もしかして、毎回だったりして？） クライアント「このカンプだけじゃよく分からない。もっとこう、動くようなサンプルないの？」 あなたの心の声 「ええ!? 私はデザイナーだし………プログラム書けないし………」 クライアント「画面遷移はまあ分かりましたけど、画面項目に前回のフィードバック入ってないですよね？」 あなたの心の声 「ああー！ 遷移の変更に気を取られて画面項目の変更をデザイナーに頼むのを忘れてた！」 クライアント「フォント、小さすぎない？ あとイメージカラーは黄色より赤なんですけどね………。」 あなたの心の声 「いや、まだそういう話をする段階じゃないですから！！」 クライアント「ここに顧客リストが表示されて………クリックしたらここに表示？ 分か
ASCII.jp：Twitter APIとGAEでおもしろWebサービスを作ろう！ ｜Twitter＆Google App Engineで始めるWebプログラミング入門
みなさんこんにちは。ふむふむソフトの飯島です。 さっそくですが、みなさんはTwitter APIを使ってプログラミングしていますか？ すでに星の数ほどTwitterアプリやWebサービスはありますし、バリバリ使っている方も多いと思いますが、「知っているけれど、なかなか触るチャンスがなくて……」という方もたくさんいるのではないでしょうか？ そこで今回から5回にわたって、Twitter APIを使ったWebサービスのプログラミングについて解説したいと思います。ただAPIの使い方を解説するだけでは面白くないですから、Webサービスを公開するサーバーとしてグーグルのクラウドサービス「Google App Engine（以下GAE）」を使い、自分でサーバーを用意することなく全部無料で遊んでみましょう。 本連載では、サンプルコードのダウンロードはもちろん、Twitter APIの準備からGAEの準備、
初めてのDjangoプロジェクト (1/3)
Pythonを使ってアプリケーションを実際に作成してみましょう。前回は「Facebookのようなものを作ってみようと思います」と書いてしまいましたが、ちょうど作りたいものがあったので「Twitterと連携するコミュニケーションツール」を「Django」で作ることにします。 DjangoはPython上で動作するWAF(Web Application Framework)のことです。Webアプリケーションフレームワークというのは、Webアプリケーションを作るとき、決まり切った機能を簡単に利用するための仕組みです。Python上で動作するWAFにはTurboGearsやweb.pyなどがありますが、現在は事実上DjangoがPythonでのWAFの標準というか最もメジャーな存在といってよいでしょう。 Djangoは有志の方が作成した日本語ドキュメントがとても充実しているというのも、みなさんにD
ぼくはまちちゃん！ こんにちはこんにちは!! (1/5)
古くからのmixiユーザーであれば、“はまちちゃん事件”を覚えている人も多いだろう。2005年4月、mixiで大勢のユーザーが“ぼくはまちちゃん！”というタイトルを付けた、謎の日記を次々に公開するという怪現象が起こった。 きっかけとなったのは、あるユーザーが投稿した日記。その日記の本文には「こんにちはこんにちは!!」という言葉とともに“あるURL”が貼り付けてあった。 このURLが罠で、不思議に思って押すと、クリックしたユーザーのページに“ぼくはまちちゃん！”というタイトルで同じ文面/URLの日記が勝手にアップされてしまうのだ。 投稿は“ねずみ算”的に増え、一時は混乱状態に…… さらに、勝手にアップロードされた日記を見て「友達が変な日記を書いている」と興味を持った友達がURLをクリック……。mixi内には“ぼくはまちちゃん！”という題名の日記が“ねずみ算式”に増えていき、一部のユーザーを混
絶対見ておきたい有名企業のスマホサイトまとめ (1/5)
この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日本のスマホサイトは2年間でこんなに変わった iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」（スマホサイト）を開設する企業が増えている。当初はiPhone（iOS）の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実務で参考にできるように、対象を日本語の企業サイトに絞り、業種別に分類してまとめた。スマートフォンサイトの制作に入る前にチェックしておこう。
ライフレシピで人生をハッピーに、ロケットスタート和田CTO (1/3)
「ネットに生きる現代の匠“CTO・エンジニア”に聞く」と題し、技術のトップとして働くCTOやエンジニアの素顔に迫る連載企画。第1回はユーザー投稿による日常生活のちょっとしたアイデアや暮らしの知恵といったライフレシピを紹介するサイト「nanapi（ナナピ）」を支える、株式会社ロケットスタートCTO和田修一氏にCTOに就任する経緯や、今後の展望、普段の生活などを伺った。 CTOが愛用する7つ道具を拝見 ── 普段使っている7つ道具を紹介してください。 （7つ道具として紹介していただいたのはキーボード、ノートPC、電卓、ノイズキャンセルイヤフォン、ホワイトボード、iPhone、コーヒーメーカーの7つ） 和田 キーボードは楽天にいたころから東プレのRealforceを愛用しています。ちなみに3つ持っています。ロケットスタートでも使っている社員が多いですよ。あとは作業に集中するためのノイズキャンセル
Office 2010は速く、使いやすくなったのか？ (1/2)
マイクロソフトのオフィススイート「Microsoft Office 2010」（以下、Office 2010）シリーズ登場に向けて、関連製品群の定例記者説明会が開催された。今後も、定期的に開催していく予定だという。 同発表会は、新情報の発表というよりも、新しい製品への理解を深めるために開催されたもの。目新しい情報は少ないものの、より細かい改善点などが提示されることになる。今回は、ほぼすべてのエディションに搭載されることになったOneNoteの説明などもあったが、主にOffice 2010のパフォーマンス改善と使い勝手の良さが目立つ発表だった。 Office 2010は速くなったか？ パフォーマンス改善については、Outlook 2010、Excel 2010、PowerPoint 2010の3つのアプリケーションが取り上げられた。 Outlook 2010は、一般的な電子メールで26.2％
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウィジェットをデスクトップに常駐させて使える?
