【マンガ】第10話 フリーランスのススメ（その2）～独立への第一歩 2003年 鹿児島の旅～｜『ライフハックで行こう！』ベルリン在住のイラストレーター、高田ゲンキのIT系コミックエッセイ！ Think IT連載のコミックエッセイ「ライフハックで行こう！ ―Think IT edition― フリーランスのススメ」で公開されていた第10～12話、14～22話、28～35話については、書籍『フリーランスで行こう！会社に頼らない、新しい「働き方」』でお読みいただけます。 【書籍情報】 フリーランスで行こう！ 会社に頼らない、新しい「働き方」
開発環境の構築・共有を簡単にするVagrant入門
Vagrantとは？ Vagrantは、開発環境の構築と共有を簡単に行うためのツールです。どこでも同じ環境を再現できるように仮想マシン環境を管理する機能と、Atlasを通して共有する仕組みが提供されています。 VagrantとAtlasの関係 Vagrantは、アプリケーションやシステム開発のバックエンドを簡単にパッケージ化し、共有するためのツールです。このパッケージ化された環境を、「box」と呼ばれる単位で管理します。このboxには、標準で対応しているVirtualBoxをはじめ、AWSなどの各種マシン・イメージに対応したプラグインを介してアクセスします。またboxを共有するための機能としてAtlasという名前のインターネット上のサービスが提供されています。なお、Atlasは以前VagrantCloudと呼ばれていたものですが、現在はHashiCorpの他のツール（Packer、Terr
CSS3のWebフォントを使ってみよう
CSS3のWebフォント機能は、サーバー上にあるフォントを利用するもので、ユーザーの閲覧環境に依存しません。使用したいフォントファイルをサーバーにアップロードし、CSSで読み込ませるだけで利用できるので、フォントの選択肢が広がります。 これまでテキストを画像化して表現していたWebのタイポグラフィも、Webフォントを使って自由に表現できるわけです。テキストなので、選択やコピー＆ペーストも可能、SEOにも有効です。もちろん、font-sizeやcolor、text-shadowなどのCSSプロパティも適用できます。 主要なブラウザは、既にWebフォントに対応しているので、少しの工夫ですぐに利用できます。ただし、フォント形式やライセンスなど、利用に際してはちょっとした注意が必要です。本稿では、これら注意点を踏まえてWebフォントの利用方法を紹介します。 Webフォントの利用方法 では早速Web
「Web制作者のためのCSS設計の教科書」を読んでみました
Web制作の仕事について デザイナーがデザインした画面を、マークアップエンジニアがコーディングをしてサイトを公開する。 Web制作という観点から見るとこれで完了かもしれませんが、Webサイトは「いったん完成すればそれで終わり」ではありません。サイト公開後にターゲットユーザーをそのサイトに集客し、サイトオーナーのビジネスを儲けさせるために、運用をしなくてはいけません。運用フェーズに入ると、様々な改修や、新規キャンペーンサイトなどが追加になるかと思います。もちろんサイト公開前にも、「ちょっとココの色変えて」など言われることもあるでしょう。CSSの設計が悪いと、サイト改修を重ねるうちに思わぬところで見た目が崩れて、その修正に余計に工数がかかることになります。皆さん一度はこのような経験をされているのではないでしょうか。 本書は、これらの問題を解決するための思考を学ぶための書籍と言えるでしょう。10
UIとUXとの違い、そしてビジネスUXとは何か？
突然ですが、皆さんはビジネスUXという言葉をご存じですか？ 筆者が所属するトゥービーソフト社は韓国でトップシェアを持つUXソリューションプロバイダーです。3年前に日本に上陸後、日本を代表する大手企業を中心に業務システムでUX（ユーザー・エクスペリエンス）を実現してきました。 当社では、UX開発プラットフォーム「XPLATFORM」を開発・販売していますが、既に20,000社を超える法人で稼働するまでに至りました。さらに、昨年開催したビジネスUXカンファレンス2013では、460名もの申し込みを頂き、盛会にて終了することができました。 このように市場ではUXの注目度が向上し、ビジネスも本格的に動き始めたといえます。 そこで、日本のエンジニアの皆さまに情報システム部門の方にビジネスUXの概要、プロジェクトの運営方法、国内外の事例や検討のポイントなどをお伝えしたく、本コラムを連載させて頂くことに
夢のミニ四駆を作る前に、これまでのミニ四駆について学ぼう
はじめに 皆さんはミニ四駆を知っていますか？あまり知らない人はいないと思いますが、ミニ四駆は1980年代からタミヤが発売しているモーター駆動のカーモデルです。 2012年、そのミニ四駆が30周年を迎えました。つまり、今のWeb業界を支えている76世代や86世代のエンジニアにはとても懐かしく、思い入れの深い存在です。そして、この76世代や86世代に支えられ、今再びミニ四駆が注目されつつあります。当時のミニ四駆からさらに進化し、新たに様々なパーツや種類が発売されています。 この連載では、この進化したミニ四駆を今の技術を使い、子供の頃に出来なかったミニ四駆の制御を実現していきます。 子供の頃の夢の実現 ミニ四駆で遊んでいた世代には、大きく分けて第一世代と第二世代が存在します。 第一世代 『ダッシュ!四駆郎』を見ながら遊んでいた世代。メインのマシンとして、ブーメランJrやエンペラー、スーパーエンペ
プラグインは要らない！音声／動画対応したHTML5 - ／要素
HTML5では、新たに あとから述べるように、ブラウザによって対応する音声／ビデオ形式にバラツキがあるなどの問題もありますが、メディア要素を利用することでメディアファイルの扱いがぐんとカンタンになるでしょう。 TIPS 041：音声ファイルを再生する TIPS 042：動画ファイルを再生する TIPS 043：音声／動画ファイルの再生を複数ブラウザ対応する TIPS 044：音声ファイルをスクリプトから再生する TIPS 045：動画ファイルをスクリプトから再生する TIPS 046：ボリュームや再生速度を変更する TIPS 047：動画を全画面表示する TIPS 048：音声／動画ファイルの情報／状態を取得する TIPS 049：音声／動画ファイルの取得状況に応じて処理を実行する TIPS 050：音声／動画ファイルの状態に応じて処理を実行する TIPS 051：音声／動画ファイル再生時
『江南スタイル』のヒットから、グリーやDeNAが世界展開で越えるべき「壁」を考える
UIEvolution Founder 中島 聡 Windows95／98、Internet Explorer 3.0／4.0のチーフアーキテクトを務めたエンジニア。NTTに就職した後、マイクロソフト日本法人（現・日本マイクロソフト）に移り、1989年、米マイクロソフトへ。2000年に退社後、UIEを設立。経営者兼開発者として『CloudReaders』や『neu.Notes+』、教育アプリ『neu.Tutor』といったiOSアプリを開発する。シアトル在住。個人ブログはコチラ 9月にわたしのブログエントリ「Gangnam Style と韓国のコンテンツ戦略」で取り上げたPSYの『江南（カンナム）スタイル』が、日本でもかなり話題になったようですね。 アメリカでは、もう本当にセンセーショナルな流行り方をしました。スティーブ・ジョブズの命日だった10月5日には、シアトルのAppleストアに集まっ
いったん、水を差されたHTML5の現状と、将来について
藤川真一（えふしん） FA装置メーカー、Web制作のベンチャーを経て、2006年にpaperboy&co.へ。ショッピングモールサービスにプロデューサーとして携わるかたわら、2007年からモバイル端末向けのTwitterウェブサービス型クライアント『モバツイ』の開発・運営を個人で開始。2010年、想創社（現・マインドスコープ）を設立。2012年4月30日まで代表取締役社長を務める Facebookが、HTML5をベースにしたアプリから、ネイティブアプリに舵を切った時に、「HTML5に賭けたのは失敗」という話が業界を駆け巡った。 それまでHTML5は、新しいWeb技術の希望の星のように言われており、将来を渇望されていたところに水を差された形になった。 そこで、改めて冷静に「HTMLとは何なのか？」ということを考え直してみた方が良いと思う。 HTMLとWebブラウザの技術的メリットは、 画像な
シリコンバレーの教育ベンチャー業界に、あなたが注目すべき理由
エンジニア / デザイナー 上杉周作 1988年生まれ。小学校卒業と同時に渡米し、カーネギーメロン大学でコンピューターサイエンスを学ぶ。米Apple、米Facebookにて、エンジニアとしてインターンを経験した後、実名Q&Aサイト『Quora』のプロダクトデザイナーに。2011年7月に慶應義塾大学で行われた講演が好評を博し、日本のIT・Web業界でも名を知られるように。2012年3月にQuoraを退職。現在はシリコンバレーのとある教育ベンチャーにて、パートタイムでエンジニアとデザイナーを兼任している シリコンバレーでは最近、教育ベンチャー業界が盛り上がっています。そこで、この連載の第1回～3回は、日本ではまだ耳慣れない教育ベンチャー業界について、わたしが思うことを書く予定です。 まず最初に、「そもそも向こうの教育ベンチャーって何してるの？」という疑問に答えておきます。 シリコンバレーの教育
HTML5 Conference 2012レポート―HTML5の過去・現在・未来
Web技術者の祭典「HTML5 Conference 2012」が9月8日、慶應義塾大学 日吉キャンパスで開催された。申し込み総数1,000人超、4トラック22セッションと、HTML5に関するイベントとしては国内最大級。主催はHTML5開発者コミュニティhtml5j.org。本レポートでは、基調講演を中心にいくつかのセッションをセレクトしてお伝えする。 このイベントは通過点に過ぎない メイン会場となる藤原洋記念ホールで行われた基調講演では、株式会社シーエー・モバイルのWeb先端技術フェローであり、html5j.org管理人でもある白石俊平氏と、グーグル株式会社のエンジニアリングマネージャである及川卓也氏が登壇した。 「HTML5に関する過去・現在・未来」と題して、まずは白石氏が本イベントとコミュニティのこれまでを振り返る。html5j.orgは定例の勉強会（HTML5とか勉強会）を主体とし
元・日本ユニシスの50代ベテラン技術者が「SI脳」と「Web脳」のハイブリッド開発で生み出した『Brappi!』
元・日本ユニシスの50代ベテラン技術者が「SI脳」と「Web脳」のハイブリッド開発で生み出した『Brappi!』 リリース後、1カ月間で2万ダウンロード。app storeでは無料アプリのライフスタイル・カテゴリーで堂々1位を獲得し、総合ランキングでも17位と好調のアプリがある。この『Brappi!』、機能はといえば商品に印刷されたバーコードを利用したコミュニケーションサービスだ。 今やあらゆるジャンルの商品に添えられているバーコードは、もちろん販売側が売上管理等の目的で利用するためのコードではあるが、これを『Brappi!』で撮影すると商品名や価格を自動的に読み取る仕組みとなっている。ユーザーはそうして画面に現れた投稿欄に、自分なりの情報や感想を書き込んで発信していくというわけだ。 こうして商品を軸としたコミュニティを形成していくソーシャルプラットフォームであり、TwitterやFace
今知っておきたいHTML5と周辺技術
Webページを作成するための言語、HTMLは時代とともに様々な機能を取り入れ、進化してきました。最近では、単なる「マークアップされた文書の集まり」というだけではなく、「アプリケーション」としての仕組みも持つようになってきています。 本特集では、そういった潮流の中で生まれてきたHTML5について、便利になった新機能や、従来のHTMLとの違いなどについて、詳しく解説していきます。 他にも、HTML5には含まれていないものの、HTML5と同時期に多くのWebブラウザでサポートされたCSS3やSVGなどの有用な技術の解説や、実際にHTML5やマイクロデータを使ったセマンティックなマークアップの導入例を説明する連載など、充実した内容でお届けします。
検索結果をより目立たせるマークアップとは？
セマンティック・ウェブ 「セマンティック・ウェブ」とは、ウェブ上にあるあらゆる情報を、データとして正確に認識し整理しようする考え方、技術の向上を促進する動きのことです。 筆者はこれまで、複数ある自社SEOのSEOコンサルやアクセス解析を専門としてきましたが、今では気づくとHTML5のマークアップについて調べる日々が続いています。それは、検索エンジンはじめ外部のプログラムにとって扱いやすいマークアップを行うことが、HTML5で強く打ち出された「セマンティックなマークアップ」と直接つながっているからでした。そしてその先には「セマンティック・ウェブ」があります。 このセマンティック・ウェブの実現で、ウェブ上に存在する莫大なデータは整理され、検索エンジンをはじめとする様々なプログラムは、ユーザーが欲しい情報やそれに関連した多くの情報を正確に提供できるようになります。 また、社会や産業の基盤となりう
ロボットの組み立てとプログラミングを体験しよう
組み立てもプログラミングもレゴブロックの要領で 前回の記事では、今年度から中学生の必修科目にプログラミングが加わることに触れ、小中高生が参加するロボットプログラミングコンテストであるWROを紹介した。 先日、そのWROで使う教育用レゴ マインドストームの体験会に参加してきたので、今回はどうやってロボットプログラミングをするのか、簡単に解説しようと思う。実際に触った中から、今回は「なげるロボット」を例にあげて見ていこう。 ロボット（マインドストーム）をプログラミングして動かすには、大きく分けて次の3ステップで進められる。 ロボットの組み立て 付属ソフトで動きをプログラミング 完成したプログラムをロボットに転送 出来上がったプログラムの転送が終わったら、本体のボタンを押してプログラムを実行するとロボットが動くという仕組みだ。
スマホアプリ開発にも役立つHTML5の8つの技術
前回でお伝えしたように、シリコンバレーでは特に昨年あたりから「オープンなWebの技術でスマートフォン向けアプリを開発」という動きが強くなってきています。そして、オープンなWebの技術を語るときに欠かせない存在のひとつとしてHTML5が挙げられます。 今回はスマートフォン向けアプリケーション開発の観点からHTML5をおさらいしてみましょう。 1. HTML5の8つの特徴的な技術 HTML5には「セマンティックス」「オフライン＆ストレージ」「デバイスアクセス」「コネクティビティ」「マルチメディア」「3D、グラフィックス、エフェクト」「パフォーマンス＆インテグレーション」「CSS3」という8つの特徴的な技術があり、各技術を表すロゴも決められています。 以下では特に、これら8つの技術を使うとスマートフォン向けWebブラウザで何ができるのかについて、簡単に振り返ってみたいと思います。 1）セマンティ
囲まれた庭からの脱却を目指すアプリ開発
Copyright © 2004-2024 Impress Corporation. An Impress Group Company. All rights reserved.
ネイティブアプリで作る？Webアプリで作る？
1. Walled Gardenからの脱却 筆者は2010年以降、シリコンバレーに数ヶ月単位で滞在しながらスマートフォン周りの最新動向を追いかけているのですが、2011年あたりからモバイルデベロッパーによる「Walled Gardenから自由になろう」という動きが強まってきたように思います。 Walled Gardenというのは直訳すると「塀で囲われた庭」ですが、ここではサービス事業者によるクローズドなアプリケーション開発・提供環境のことを指しています。具体的には、例えばiPhone/iPad向けアプリケーションを開発・提供する場合、デベロッパーはApple社独自の開発言語「Objective-C」を習得してアプリを開発し、App Storeの審査に通って初めてリリースとなりますが、販売は同社のApp Store上で行うことが義務づけられています。また、App Storeでの販売額のうち3
実践！すぐに導入できるセマンティックなマークアップ、4つのパターン
セマンティックなマークアップの実践 前回は、セマンティック・ウェブを中心に、HTML5やマイクロデータのマークアップについて簡単に説明しました。2回目となる今回は、もっと実践的なHTML5を使用したセマンティックなマークアップについて、以下の4つのサイトを例に挙げながら進めていきます。 ニュース配信サイト ブログサイト eコマースサイト コーポレートサイト 上に挙げたサイトの文書構造はそれぞれ異なりますし、また同じサイト内でも、ページによって構成は異なります。また、HTML5の仕様書を見ても、サイトごとやページに応じたような要素の使用例などは詳しく説明してあるわけではありません。 （＊）要素についての説明は、「HTML5の新機能、HTML4との違い」の記事を参照してください。 1つ1つの要素の定義を理解しても、実際にセマンティックなマークアップを施す際は、サイトによってケースが様々なため、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5を使って、セマンティックなWebサイトを作ろう