TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
よしこです。 最近転職しまして、7月からアシアル株式会社で働いています。 ちょうど1ヶ月経ったので、ご報告(してなかった)と、入社して初めて触れたものが多かったので振り返りなんてしてみようかなと思いました。 経緯 自分がWebエンジニアとして今後どこを得意分野にしていきたいか、というのは結構ずっと悩んでいました。 サーバーサイドもフロントエンドも浅く広くやっていて、どっちも好きだったので、その中でどこを掘り下げていこうかなーと。 そんなときに、たまたま作って公開したシングルページのポートフォリオサイトへ思わぬ量の反響をいただきまして、かっこいいって言ってもらえたりしてすごく嬉しくて、その嬉しさから、あー自分フロントエンドが合ってるのかもなー、ってなんとなく気持ちを固めることができました。 アシアルのことは技術的なこと調べるときにアシアルブログの記事がよく出てきてたので知って、技術好きな人が
PhoneGapをはじめとするハイブリッドアプリは人気があります。HTML5/JavaScriptでアプリが開発できるのは魅力的ですが、問題はUIではないでしょうか。HTMLのままではUI/UXが優れているとはとても言えません。そこでHTMLをネイティブアプリ並のUIにしてくれるフレームワークを使ってみましょう。これらを使えばまるでネイティブのUIと変わらないかのようなUI/UXが得られるようになるでしょう。PhoneGapをはじめとするハイブリッドアプリは人気があります。HTML5/JavaScriptでアプリが開発できるのは魅力的ですが、問題はUIではないでしょうか。HTMLのままではUI/UXが優れているとはとても言えません。 そこでHTMLをネイティブアプリ並のUIにしてくれるフレームワークを使ってみましょう。これらを使えばまるでネイティブのUIと変わらないかのようなUI/UXが得
2014年6月末にて、3年間勤めたDeNAを退職する運びとなりました。これから起業し、そちらに注力したいと思います。 私は、2011年7月に、自分の起業した会社が買収される形でDeNAに参加しました。前の会社ではiPhoneでインストールなくFlash Playerを動かす製品を作成し、それがDeNAに高く評価されて買収されました。以後、DeNAでは3年弱にわたり、HTML5総括という立場で社内外でHTML5に関わる様々な活動に参加しました。 ここ数年間の活動を振り返ると、今の日本のHTML5、特にモバイルHTML5の技術は世界で最も高いと実感しております。そのような恵まれた環境の中でDeNAでは最先端の研究開発をさせていただきました。力及ばずお蔵入りになったり成果が出なかったプロジェクトもあり多数の方々に迷惑をかけてしまいましたが、同僚にも恵まれ、やりたいことを存分に試すことを許していた
SVGでアウトラインをカスタマイズしてみようこれまで、二回ほどSVGに関する記事を書きましたが、SVGの面白さは伝わっていますかね…!?今回はSVGのアウトライン(線)の装飾に注目!オブジェクトを徐々に描いていくラインエフェクトにも挑戦します! SVG の基本的な情報や書き方は過去記事「アイコンフォントから SVG へ!より手軽にベクター画像を表示しよう」をご覧ください! SVG 線種プロパティの基礎基本的な書き方ですが、SVG のコード内に直接記述する方法と、CSS で指定する方法があります。例えば stroke プロパティを使う場合: <svg viewBox="0 0 200 200"> <line x1="10" y1="10" x2="190" y2="190" stroke="#000" /> </svg> のように、 stroke="#000" と直接記述しても OK ですし
ーーーー HTML5はネタが出尽くした。あとは、IE8やAndroid2.X標準ブラウザのような、レガシーブラウザがいなくなればいいだけではないか? 私は最近、そんな言葉を耳にすることがあるのです。しかし、ブラウザ開発者たちは未だに、そんなことを微塵も感じさせないほど働いています。まだまだ進化の速度を、落とすわけにはいかないようです。2014年06月14日に開催された「HTML5 Night」にて、Google Chromeの開発者である及川卓也氏の口から、これからのChrome開発について語られました。 本記事では、及川氏の講演のダイジェストをお届けします。 今のChromeには何が不足しているのか? Chromeは2013年の4月に大事な出来事がありました。Appleと一緒に開発していた、「WebKit」をフォークしました。それが、Chroniumと同様なオープンソースのレンダリングエ
まさかのデザインに関するトーク 先日の 第49回 HTML5とか勉強会 で、Material Design と、それをWebで実践するための Polymer (Paper Elements) まわりについてお話させていただきました。 去年とか、Googler が紹介するパフォーマンス関係のわりとマニアックなトコだとかケーススタディの共有に努めたり、さらにその前もJavaScript関係のライブラリ・ツールの話をしておりました。 という流れで、エンジニア的なブランディングに終始しておりました為、今回Google I/O 現地で話を聞いてきたとはいえ、デザインに関するセッションのお話をいただいて緊張しきりでございました。 YouTube(追記) いつの間にか動画があがってました。 第49回HTML5とか勉強会「HTML5最新情報 @Google I/O」 - YouTube 小並感 なんでgr
本記事は「HTML5ハイブリッドアプリ開発を支えるOSS『Cordova』シリーズ」の続編です。前回に引き続き、2014年6月10日に開催された「第1回Apache Cordovaスーパー勉強会」にて、アシアル株式会社の田中正裕氏が行なった講演のダイジェストをお届けします。 まだまだ進化を止めないApache Cordova ハイブリッドアプリも日々進化しています。3年前はPhoneGapもようやく1.0という状況でしたが、それも今ではCordova3.5ということで、ここに来るまで相当な進化があったんです。 3年前に、僕が初めてPhoneGapを触った時、iOSも4.2で、CSSもまったく充実していませんでした。Androidも当時は2.2だったのですが、あれからAndroid自体のパフォーマンスが改善されてきました。 Cordovaもプロジェクトが大きくなって、やれることも増えてきまし
PhoneGapとは一味違う!純国産ハイブリッドアプリフレームワーク、「アプリカン」事始め 畠田 喜丈(株式会社ニューフォリア) アプリカンは、純国産のハイブリッドアプリフレームワークです。いつも使っているエディタだけでアプリが作れるので、開発環境のOSも選びません。 アプリカンは2013年末に公開され、ハイブリッドアプリフレームワークとしては後発ですが、他のフレームワークとは異なるアプローチとして、様々なパートナー企業のサービスのSDKを組み込み、AR機能や、位置情報連動サービスなど複雑なサービスオプション機能を JavaScriptから簡単に呼び出せるようになっています。 基本は無料で利用できますが、前述の高機能なオプションを使ったり、無料ビルドしたアプリに表示される広告バナーを外す場合には有料となります。 アプリカンの開発に必要なもの エディタ 好奇心 アプリカンの開発には、IDEを
snd.jsはHTML5のWebAudioAPIを使用したJavaScriptを「楽に・簡単に・素早く」実装するためのライブラリです。 MITライセンスですので、商用・非商用問わず、誰でも自由にご利用いただけます。 ↓のような簡易な記述で、あなたのサイト・Webアプリに音を追加することができます。 単純な効果音再生の他、プラグインを利用すればthree.jsと連動したリアルタイムの立体音響化エフェクトなどの付加機能が使用可能です。
日本全国で開催された< htmlday > 2014。全国で開催されたイベントの数は32。その中の一つであるHTML5/Web標準の全体像をつかむLT大会「HTML5 Night」が、6月14日に開催された。 「HTML5 Night」表編は、html5j部長やエキスパートたちによるLTは20連発!の様子をレポートする。 by 馬場美由紀 (CodeIQ中の人) 01. 「HTML5入門 for ビギナー」 好きなモノを作ろう!山崎 大助@html5j ビギナー部 部長 イベントはまず入門編から。最初に登壇したのは、ビギナー部部長の山崎大助さん。「HTML5入門 for ビギナー」というタイトルで5分間のLTが始まった。 山崎さんは「自称HTML5界の革命派(とんがっている男)」。「今日は好きなモノを作れということをいうための発表だ」と言う。仕様が確定していなくても、どんどん使って好きなモ
2014年7月23日 7/22の覚え書き。シナジーカフェ GMO Yoursで開催されたhtml5j パフォーマンス部 第三回勉強会に参加しました。講師は藤屋マネジメント研究所の藤屋伸二氏、テーマは「ドラッカーにUSPを学び、コンテンツを削る」ということで、まぁ表示速度高速化につながってはいるものの、技術的な話ではないというのはあらかじめ織り込み済み。僕はそこそこ楽しめたけれど(やっぱりだいぶ経営目線の中身ではあったと思う)、しかし終わってから山家 支店に飲みに行ったら一緒に参加した同僚の方の受け取り方はだいぶ違っていて、そのギャップがまた面白かったかな。次回は9月に携帯通信網の基礎とか携帯3キャリアが集まってのパネルとかを予定しているそうで、楽しみです。以下、大半はスライドに乗っていた文字の起こしだけれども、覚え書きから: イントロダクション 日本の旅行会社のサイトはどこも似たり寄ったり
「HTML5 MAKER」はHTML5のアニメーションを簡単に作成できるサイトです。HTML5でアニメーションを作るのが簡単に行えますよ。ドラッグ&ドロップで画像やテキストを追加し、アニメーションをつけることができます。PowerPointと似たような動作でHTML5のアニメーションが完成します。 以下に使ってみた様子を載せておきます。まずHTML5 MAKERへアクセスしましょう。登録不要で作成できるので、早速「CREATE ANIMATION」からアニメーションを作ってみましょう。 このように、画像やテキストを追加していきます。下部にアニメーションの設定がありますよ。開始時のアニメーションや終了時のアニメーションが設定できます。左側にスライド一覧があります。一つ前のスライドを複製できるので、連続したアニメーションを使うときに便利ですね。完成したら、「Save」するとHTML5形式でまる
「HTML5 UP」はレスポンシブデザインに対応したHTML5テンプレートをたくさん集めたサイトです。デモページがそれぞれ用意されているので、画面サイズによりどのように変化するのかを確かめることができます。また、テンプレートはCSSやJSとともにダウンロード可能です。 以下に使ってみた様子を載せておきます。まずHTML5 UPへアクセスしましょう。さまざまなテンプレートが目に入ってきます。このように各テンプレートにサンプルページが用意されています。 このように画面サイズを変えるとレイアウトが変わりますね。ぜひレスポンシブデザインのテンプレートをお探しの方はご活用ください。 HTML5 UP (カメきち)
Preface This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code. She wrote: As a web developer, learning the internals of browser operations helps you make better decisions and k
印刷する紙のデザインと異なり、Webデザインは環境によって見た目が変わります。 どの環境でも同じレイアウトで見せるには画像として書き出せば確実なのですが、テキストの部分はそうもいきません。 DTPデザイナーの方からも「こんな文字のレイアウトはWebだと無理?」といったご相談を受けることがよくあります。 今年に入って、HTML5&CSS3に対応したブラウザのシェアもかなり増えてきましたので、今回は文字のレイアウトに関するHTMLとCSSをご紹介したいと思います。 ※IE以外のブラウザは、2014年7月4日現在の最新版にて確認を行っています。 段組み CSS3の「multi-column」を使用すると、float等による段組みとは異なり、Illustratorのテキスト流し込みのような自然な段組みレイアウトが可能です。 multi-columnによる段組みの表示例: 吾輩は猫である。名前はまだ
はじめに 僕はWebフロントエンドはほぼやってないんだけど、Firefox OSとかもアレだって事でソレ系にも手を出すかとあれこれやってたらまぁWebのフロントエンド周りのツールが何か色々あってよくわかんねーしどうしよっかなと思ってた所Yeoman辺りが大分良さそうなんじゃないか程度にはわかって来たので手を出してみた次第。 Yeomanってなに Webフロントエンドでよくある各種構成をコマンド一発で生成してやろうじゃん、というのがYeomanらしい。Yeomanは内部でyo, bower, gruntの3つのツールにわかれていて、Yeoman自身が作ってるのはyo。bowerはTwitter社が、GruntはBocoup社がメインで作っている。 ワークフローとしてはこうらしい yoでプロジェクトを作成し、bowerで依存性管理をし、gruntでビルド&テストをするという事だそうで。volo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く