デイリーポータルZの林雄司さんと、ヨッピーさんに聞いた「コンテンツを作る・伝える・稼ぐコツは何ですか？」
デイリーポータルZの林雄司さんと、ヨッピーさんに聞いた「コンテンツを作る・伝える・稼ぐコツは何ですか？」 馬場 美由紀（HTML5 Experts.jp編集部） こんにちは、HTML5 Experts.jp編集部の馬場美由紀です。HTML5 Experts.jp「Webの未来を語ろう 2017」の第三弾は、Webの未来を考えるコンテンツ編です。 毎回豪華なゲストをお招きして、聴講者を募り、白石編集長と一緒にお話を聞くイベント形式でお届けしてきたこのシリーズ。「メディア編」「コミュニティ編」に続く、コンテンツ編は大人気ライターのヨッピーさん、「デイリーポータルZ」編集長の林雄司さんという、超豪華なゲストにお越しいただきました！ ゲスト紹介 林 雄司さん 「デイリーポータルZ」編集長・ウェブマスター 1971年東京生まれ。ニフティ株式会社勤務。デイリーポータルZウェブマスター。主にインターネッ
「次のモバイルファースト」がやってくる！UIと機能設計をIonic 2を使って学んでみよう
「次のモバイルファースト」がやってくる！UIと機能設計をIonic 2を使って学んでみよう 榊原昌彦（一般社団法人リレーションデザイン研究所 ...） レスポンシブデザインが生まれたばかりの2009年には、はやくも「モバイルファースト」という言葉が使われ始めていました。 WebサイトはPCから見るものだったのは今や昔。今ではスマートフォンの普及により、多くのWebサイトではPCとモバイルからのアクセス数が逆転してるWebサイトも多く、「モバイルファースト」な開発も当たり前になりました。 しかし、2009年の「モバイルファースト」と、今の「モバイルファースト」は大きく中身が成長しました。モバイルフレームワークであるIonic 2も先日リリースされましたので、ここで改めて「モバイルファースト」とは何かを考え、モバイルの設計を見直していきます。 レスポンシブとモバイルファースト モバイルファース
WebRTCで注目された海外企業のサービス19本一挙公開
「WebRTC Conference and Expo 2013 Atlanta」のレポート。日本ではまだまだ様子見の雰囲気が強いWebRTCですが、特にアメリカでは様々なサービスや取り組みが始まっています。日本からもどんどんWebRTCを活用したアクティビティを発信して行きたいですね！海外動向が気になる人は要チェック！ 世界中で注目されるWebRTC HTML5 Experts.jp編集部による執筆記事第一弾とりなす。2013年6月25日から27日の3日間、アメリカのアトランタにて「WebRTC Conference and Expo 2013 Atlanta」が開催されました。カンファレンスでは、Developer、Business、Enterprise、Telecom、Mobileそれぞれの分野についてのパネルセッションやワークショップなど計39セッションに加え、参加企業50社以上の
この1年、Webのパフォーマンスで変わったことは？──HTML5 Conference 2016
この1年、Webのパフォーマンスで変わったことは？──HTML5 Conference 2016 川田寛（ピクシブ株式会社） こんにちは、ふろしきです。HTML5 Conference 2016の当日は、38度近くの熱があり、発表時はろれつが回ってませんでした。しかし、伝えたいことは伝えられたと思っています。その内容とは… 「この1年でWebのパフォーマンスの技術にどんな動きがあったのか」 というダイジェスト。ここで話した3つのテーマについて、本記事でもご紹介。 1. レイアウト処理を減らす HTML5がバスワードするよりもずっと前から、CSSでアニメーションさせることはごくごくあたりまえ。JSが扱えないデザイナーであっても手軽にアニメーションできる良い世界になりました。しかしそこに、モバイルが出現したことで、JSだけで満足という人たちもCSSの機能を活用しなくてはいけなくなりました。 モ
WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て！（前編）
WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て！（前編） 西田慎吾（株式会社アイ・エム・ジェイ） 今回はHTML5JapanCup2014にてWebGL賞と優秀賞を受賞したオンラインレースゲーム、JS-Racingの技術解説を書かせていただきます。 このコンテンツはWebGLの3D表現を活かした3Dレースゲームです。 また、WebSocketを使用しサーバを介して、複数のクライアントでの同時走行が可能なオンラインゲームになっています。同時に、ソケット通信時に発行されるソケットIDをPCとスマートフォンで共有することで、スマートフォンからPC上の車を操作することも可能です。 クライアントサイドの使用技術 クライアントサイドの構築において、目的・用途に応じて使用した言語やライブラリに関して解説します。 TypeScriptによるクラス設計 クライアン
今からでも間に合う！Node.js v4＆v5は何が変わったか？
Node.js v4リリースに向けて とうとうメジャーバージョンアップにされたNode.jsである、Node.js v4がリリースされました。今回はこのNode.js v4がこれまでのNode.js v0.12やv0.10と比較してどう違うのかを解説します。また、最新ではv5もリリースされていますので、合わせてお伝えしていきます。 なんでいきなりv4なのか おそらく一番最初に抱く感想は、v0.10とかv0.12みたいな数字からv1.0を飛ばして、なんでいきなりv4.0がリリースされたのかという疑問だと思います。これにはio.jsというプロダクトが関係しています。 2014年の年末、io.jsというプロダクトが発表され、2015年の初めにv1.0がリリースされました。io.jsというのは Node.js のforkで別リポジトリによって実装されたプロダクトです。io.jsの詳細は筆者のブログ
JavaScriptエンジニアへのIoTのすすめ：Node.jsとArduinoでスマートデバイスのプロトタイプをしてみよう
JavaScriptエンジニアへのIoTのすすめ：Node.jsとArduinoでスマートデバイスのプロトタイプをしてみよう Tomomi Imura（Slack） ここ、HTML5Experts.jpでも今年になって IoTやWoT関連の話題がことかかず、みさなんも関心を持ち始めていることかと思われます。 私もフロントエンド・エンジニアではありますが、もともと関心があったことと、去年からデータ・ストリームのPaaS (platform as a service) 会社であるPubNubで働いていることもあって、IoTを避けずには通れなくなり、電子工作を始めるようになりました。 そこで、最近東京・渋谷で行われた、東京Node学園で登壇した際に話したテーマ、Hardware Hacking for JavaScript Developers から、ArduinoとNode.jsを使ってプロト
JavaScriptにもクラスがやってきた！JavaScriptの新しいclass構文をマスターしよう
JavaScriptにもクラスがやってきた！JavaScriptの新しいclass構文をマスターしよう 高津戸壮（株式会社ピクセルグリッド） ECMAScript 2015（ECMAScript 6）で新たに追加された待望のclass構文について、その概要をサンプルコードを交えて紹介します。 これまでのJavaScriptにおけるクラス 多くのプログラミング言語はクラスを作れる機能を持っていますが、JavaScriptにその機能は用意されていませんでした。しかし、JavaScriptにはprototypeという柔軟な仕組みが存在しており、このprototypeを利用することで、他の言語で表現されている「クラス」と似たような振る舞いを再現することが可能でした。 それは例えば、こんなふうにです。 /* Cat雛形の作成 */ function Cat(name) { this.setName(
ネイティブでもWebRTCを使おう！―Android／iOSでWebRTC
ネイティブでもWebRTCを使おう！―Android／iOSでWebRTC がねこまさし（インフォコム株式会社） こんにちは！今回はGoogle I/O 2015の小セッションから、Justin UbertiさんとSam Duttonさんによる、”Video chat for Web, Android and iOS”のお話をお届けします。このセッションではWebRTCを使ってビデオチャットアプリを作る方法について、WebRTCの中の人であるお二人が説明してくれました。 WebRTCはWeb Realtime Communication の略で、Webブラウザ上でカメラやマイクの映像/音声を取得したり、他のブラウザと通信するための技術です。過去のHTML5Experts.jpの記事に解説がありますので、併せてそちらもご覧ください。 HTML5でWebRTCを使ってみよう！「カメラを使ってみ
連載 | パフォーマンスチューニング | HTML5Experts.jp
Webサイトやモバイルアプリなどのパフォーマンスチューニングについて、豪華エキスパート執筆陣が幅広く解説していきます。
ユーザーの体感速度を高めるためのJavaScriptチューニング（前編）
連載「Webサイト・アプリ高速化テクニック徹底解説」第2回は、JavaScriptの高速化について、まずは前編、後編に渡ってユーザーの体感速度を向上させるための方法を紹介します。JavaScriptの同期・非同期の仕組みやscript要素のasync属性、defer属性について詳しく解説します。 今回から複数回に分けて、JavaScriptの高速化をテーマに解説していきます。まずは、ユーザーの体感速度を高めるためのJavaScriptチューニングということで、単純なJavaScriptの構文によるスピードを比較するようなものではなく、主にユーザー視点からの高速化を主眼に解説します。その中で、同期・非同期といったJavaScriptの仕組みやscript要素のasync属性、defer属性などについても触れていきます。 ユーザーの体感速度を向上させる 一概にJavaScriptの高速化といっ
HTML5 Experts.jpはなぜこんなにパフォーマンスが悪いのか…全てお見せします！ーWebパフォーマンス改善企画（改善編）
HTML5 Experts.jpはなぜこんなにパフォーマンスが悪いのか…全てお見せします！ーWebパフォーマンス改善企画（改善編） 吉川 徹 Webパフォーマンス改善企画（改善編）は、実際の改善内容とその結果をお伝えします！パフォーマンス分析を行った解析編は、こちらからご覧ください。本記事はHTML5 Experts.jpがいかにして速くなったのかを包み隠さずお伝えします！ 今回の前提条件と改善ポイント 実際の改善を行う前にいくつか前提条件を説明しなければいけません。まず動作環境ですが、HTML5 Experts.jpは、WordPress上で動作しており、改善内容はプラグインの導入やPHPのコード修正が主になっています。ただ、そういったWordPressの泥臭いチューニングは本題ではないので、細かく解説するのではなく大まかな改善内容とその方針を説明したいと思います。また、改善内容に関して
HTML5 Experts.jpはなぜこんなにパフォーマンスが悪いのか…全てお見せします！ーWebパフォーマンス改善企画（解析編）
ちなみに後日談…計測対象の個別記事ですが、計測のためのアクセスがかなりの頻度あるため、PVランキングでは常に1位を独占していました（笑）。また、Google Analyticsについても、計測開始前に除外設定しておかないと、正確なデータが得られなくなりますので、ご注意下さい。 計測して問題点を洗い出す ファーストバイトダウンロードタイムの遅延問題 ということで、竹洞さんに一定期間サイトのパフォーマンスデータを計測してもらいました。その結果を見ながら、早速現在のHTML5 Experts.jpの問題点を洗い出します。 竹洞：これがある日の、ブロードバンド回線でChromeを用いてアクセスした時の計測結果です。 見ての通り、ID1のhtmlの取得にすごく時間がかかっていることがわかります。この水色は、ファーストバイトダウンロードタイム（Time To First Byte、以下、TTFB）とい
理解しておきたい、CSSによるインラインレイアウトの仕組み（vertical-align編その1）Inline Layout─Frontrend Conference
理解しておきたい、CSSによるインラインレイアウトの仕組み（vertical-align編その1）Inline Layout─Frontrend Conference 高津戸壮（株式会社ピクセルグリッド） この記事は、Frontrend Conferenceのセッション「Inline layout」でお話させていただいた内容を基に、連載記事（全4回）として書き起こしたものです。今回は第2回目です。 なぜ画像の下部にスペースができてしまうのか？ 今回の記事では、vertical-alignについて解説していきます。前回は、行のレイアウトが、font-sizeとline-heightによりどう変わるのかを見てきました。この行の中で、要素を縦位置のどこに配置するかを決定するのがvertical-alignです。これを理解すると、前回の疑問、「なぜ画像の下部にスペースができてしまうのか」が分かりま
Webアクセシビリティの重要性が加速する！「アクセシビリティやるぞ！祭り」詳細レポート
このイベントは、「来るべき近未来のために業界の認識をアップデートすべく」（イベントページより）企画されたとのこと。近未来ってどういうことか、ちょっと気になります。 また、先日の木達一仁さんに行ったインタビューでも、「『アクセシビリティが当たり前の社会』というビジョンを実現するために、HTML5 Experts.jpとしても、お手伝いできることは何でもします！」と言った約束も守らねばなりません。 ということで、タイトルからしてちょっと楽しそうなこのイベント、無理を言って取材させてもらっちゃいました。今回はそのレポート記事になります。 「アクセシビリティ＝高齢者・障害者対応」は大間違い！ 最初のセッションはヤフーでマークアップエンジニア/フロントエンジニアを担当していらっしゃる（最近では「アクセシビリティエンジニア」と名乗っているそうです）福本翔さんによる「やはりお前らのWebアクセシビリテ
HTML5で実現できる！環境光に合わせたレスポンシブなUI
HTML5で実現できる！環境光に合わせたレスポンシブなUI Tomomi Imura（Slack） フロントエンド開発やデザインに携っている皆さんにとって、ここ数年間「レスポンシブ・ウェブ」についての話題は避けて通れないものとなっているでしょう。モバイルやタブレット上でも、ユーザー・エクスペリエンスを失うことのないウェブを表現するには、CSS3 Media-queriesが欠かせないものとなってきました。 それでは実際、レスポンシブ・ウェブとは何についての対応（レスポンシブ）なのでしょうか。 現在のところ、私たちがいうレスポンシブ・ウェブデザインとは、どんなスクリーンの幅や表示領域、デバイスの画面解像度や画面の縦横の向きにも対応したウェブデザイン、というのが事実上の定義となっているようです。 そこで今回、私はその定義を超えたレスポンシブ・ウェブのユースケースについて考えてみました。 太陽光
よくある3つのデザインから考える、マークアップの最適解
Web制作においてHTMLのマークアップには絶対の正解というものがありません。ページを制作しているとき、特にセマンティクスを意識したとき「このマークアップで正しいのだろうか」と悩むことがあると思います。 そんなマークアップについて考えるイベント「MarkupCafe」がhtml5jマークアップ部の主催のもと開催されました。「MarkupCafe」では参加者同士がチームに分かれ、お題となるデザインに対して議論し、自分たちならこうマークアップするといった考えを発表し合いました。 本記事では「MarkupCafe」で出された”フッター”、”パンくずリスト”、”求人情報”の3つのお題をもとに、Web制作におけるマークアップの捉え方、誤った使い方をしがちな要素などについて考え、マークアップの最適解を探ります。 ※html5jは、HTML5などのWebプラットフォーム技術を使った「ものづくり」に関わる
HTML5のSEO－マークアップで注意すべき３つのポイント
HTML5を採用したWebサイト構築をする際に、SEOはどのようなポイントを考慮すべきなのか？ HTML5でのマークアップ、リッチ表現、SEO効果のあるh要素の使い方、HTML5で追加・削除・復活された要素などについて解説します。 HTML5化によるSEO効果の影響はあるか WebサイトをHTML5でマークアップをする際、特にHTML4などからHTML5にリニューアルする場合に、それによって検索エンジンによる評価が変化するのかどうかは非常に気になる問題です。 各検索エンジンでは、この疑問について公式に説明しています。GoogleはHTML5化することでプラスにもマイナスにもならないと度々公式に言及していますし、Bingは「List of things you really ought to know as an SEO today(今SEOとして本当に知っておきたいこと)」と題した記事の中
HTML5Experts.jp Contest
たくさんのエントリーありがとうございました！結果発表！ HTML5 Experts.jp Contestは、お題に対し、各々コードを作成し、表現力や独自性を競うコンテストです。審査はHTML5 Experts.jpのエキスパートメンバーが行い、見事選定された方には特別な報酬があります。ぜひ、奮ってご参加ください！本コンテストはjsdo.itと共催です。 Powered by Sponsored by コンテストのお題 「HTML5 Experts.jpのロゴを使った面白い動きの表現」 HTML5 Experts.jpのロゴはCSSとwebフォントのみで作成されています。そんなHTML5 Experts.jpのロゴを用いて、面白い動きの表現を作成してください。 特に、洗練されていること、ユニークであることを評価します。時間軸のあるアニメーションでも、インタラクティブ性に富んだコンテンツでもか
RAIZIN Coolで学ぶ、イマドキのWebサイトの作りかた
HTML5 Canvasを利用した冷気の演出が話題となった「RAIZIN JAPAN」のデモサイト。エキスパートが手がけたプロダクトを題材に技術的な解説を行っていくシリーズ第二弾は、RAIZIN Coolの実装を徹底解説します。 HTML5 Canvasを利用した簡易的な冷気の演出 最近の仕事で実装したものが海外の、しかも米シリコンバレーで話題になりました。 社内でもそうした簡単にできる（けど簡単そうに見えない）簡易的な実装に注目が集まり、ちょっとした話題になったので解説しつつ紹介したいと思います。 ※今回の解説用に、jsdo.itに実際に動くサンプルをアップしました。 さらに今回の解説用に特別に動作が分かりやすくなるオプションも追加しています。↓ (invalid jsdo.it code) 今回紹介するのはRAIZINというエナジードリンクの新バージョン「Cool」のLPです。 当初は
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
