Debugging Service Workers
Google Developers Codelabs provide a guided, tutorial, hands-on coding experience. Most codelabs will step you through the process of building a small application, or adding a new feature to an existing application. They cover a wide range of topics such as Android Wear, Google Compute Engine, ARCore, and Google APIs on iOS. Codelab tools on GitHubnorth_east p +��U 0�H��U ��9��U
今すぐ知っておくべき！モダンな10のWeb技術
エンジニアやデザイナー、Web担当者が今すぐ知っておくべきモダンな10のWeb技術を紹介しています。Webデザインの世界が根本的に変化し、Webサイトの構築ははるかに簡単に高い技術でできるようになりました。ぜひ覚えておきましょう。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、ライターのJake Rocheleau氏によって投稿されました。
React Desktop - Reactを使ってMac OSX/Windowsアプリを開発 MOONGIFT
Reactへの注目がどんどん高まっています。Webのビューライブラリという枠を越えて、React Nativeによってスマートフォンアプリ開発にも使えるようになっています。特にコンセプトであるLearn once, run everywhere（一度覚えればどこでも動く）が素晴らしい考えと言えます。 そんなReactを次のターゲットとしてデスクトップでも動くようにしたのがReact Desktopです。Mac OSX/Windowsに対応しています。 React Desktopの使い方 React Desktopのデモです。Webでも表示できるのがすごいです。 コントロールもちゃんと動きます。 そしてWindows 10でも使えます。 フォームもまさにWindows 10といった感じです。 メニューを隠すこともできます。 ElectronはHTML5を使ってデスクトップアプリを作ることがで
Material Design Lite
Material Design Lite Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. Get started now. Templates The MDL components are created with CSS, JavaScript, and HTML. You can use the compone
Google Sites: Sign-in
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
PolymerでMaterial Designなチャットアプリを作ろう
今年注目のオープンWebテクノロジーのひとつに、Web Componentsが挙げられると思います。HTML5Experts.jpでも今まで幾度も関連記事、Polymer.jsについての記事が紹介されてきました。今回は実際に、PolymerとMaterial Designのデザインコンセプトを用いて、視覚的にもユーザエクスペリエンスにも優れたチャットアプリを実際に作ってみましょう。 まず始める前にこのライブデモ、Kitteh Anonymousをデスクトップまたはモバイルのモダンブラウザで実際に試してみてください。ここでは、このデモの簡略版であるLiteバージョンを実際に作成する方法をステップ・バイ・ステップで紹介したいと思います。 必要な知識 Polymerの基礎知識 パッケージマネージャ、Bowerの基本的な使い方（Polymerと依存するファイルをインストール、アップデートするのに使
Web Componentsのアクセシビリティ
Editor's NotesWeb Componentsでは、1度書いたコンポーネントが再利用されます。なので、コンポーネントのアクセシビリティが、そのアプリなりサイトなりのアクセシビリティに大きく影響してきます。そう、コンポーネントのアクセシビリティが重要です。この時重要になるのは、アクセシビリティが高い、良いコンポーネントを選ぶこと、もしくは、良いコンポーネントを作ることです。Web Componentsでは、1度書いたコンポーネントが再利用されます。なので、コンポーネントのアクセシビリティが、そのアプリなりサイトなりのアクセシビリティに大きく影響してきます。そう、コンポーネントのアクセシビリティが重要です。この時重要になるのは、アクセシビリティが高い、良いコンポーネントを選ぶこと、もしくは、良いコンポーネントを作ることです。もう少し噛み砕いてしゃべると もしコンポーネントのアクセシビ
お手軽データバインディングライブラリ「Vue.js」を使いこなそう（基礎編）
はじめに Vue.jsは、シンプル・軽量・高速という特徴を持つデータバインディングライブラリとして最近注目を集めています。LINE社でもアプリ内WebViewの実装技術の選択肢の一つとしてVue.jsを採用しています。2014年11月27日にリリースされたLINEスケジュールは、Vue.jsを使って実装しているSPA（Single Page Application）の代表例です。 本稿は日本語記事がまだ少ないVue.jsの基本機能の紹介を目的とした「基礎編」として、公式ドキュメントの内容を元に解説します（執筆時点のバージョンであるv0.11の内容です）。 Vue.jsとは Vue.jsは、双方向バインディングによるModelとViewをつなぐ仕組み「ViewModelレイヤー（MVVMパターン）」を提供するJavaScriptのライブラリです。 Vue.jsの基本概念は以下のようになってい
HTML Imports - Web Components を構成する技術
この記事は webcomponents.org の記事とのクロスポストです。 Template や Shadow DOM、Custom Elements を使うことで、機能ごとの UI コンポーネントが実現できるようになることはこれまでに説明してきました。しかし、それらを使ったコンポーネントの HTML、CSS、JavaScript を別々に呼び出すのは、非効率です。 依存関係の解決も容易ではありません。jQuery UI や Bootstrap を思い出して下さい。JavaScript、CSS、Web Font といった各種リソースを、必要に応じて別々のタグに記述しなければなりませんでした。特にタグごとにコンポーネントとして扱うことが想定されている Web Components の場合、状況が複雑化することは簡単に想像できます。 これらのリソースを、ひとつの HTML ファイルにまとめて
Web Componentsを簡単・便利にするライブラリ「Polymer」を使いこなそう
Web Componentsを簡単・便利にするライブラリ「Polymer」を使いこなそう 泉水翔吾 この記事は、連載「基礎からわかる Web Components 徹底解説 〜仕様から実装まで理解する〜」の第3回目になります。連載の第3回目となる今回は、Googleが中心となって開発を進めるPolymerというWeb Componentsのライブラリについて解説します。 Web Componentsをより柔軟に、そして強力にするライブラリ Polymerは素のWeb Componentsにおいて、煩雑である部分を簡略化し、機能をより強力なものにし、基礎となるコンポーネントを提供します。BSDライセンスのもと、オープンソースで開発が行われており、ソースコードもGitHubにて公開されているので、Pull Requestを送るなどのかたちで私たちも開発に貢献することが可能です。 Welcome
Raspberry Pi（ラズベリーパイ）を購入するまでの手順（販売場所、購入すべきモデルなど）。 - Pythonで学ぶ金融工学
2014-09-01 Raspberry Pi（ラズベリーパイ）を購入するまでの手順（販売場所、購入すべきモデルなど）。 03.Raspberry Pi Tweet Raspberry Pi（ラズベリーパイ）を購入するまでの手順。 さっそくRaspberry Pi（ラズベリーパイ）を購入しました！ Raspberry Piを売っている場所は一般にはないですし、始めはどこで売っているのか、また何を買っていいのかあまり良くわからないと思います。そこで本記事では、Raspberry Piを購入することのできる場所や購入にあたっての注意事項をまとめます。 Raspberry Piはどこで売っているのか。 通常、日本の正規代理店アールエスコンポーネンツのウェブサイト、RSオンラインを通じて購入することになります。また、有限会社レオコムのウェブサイトからも購入が可能なようです。一応、Amazonでも購
Web Componentsを構成する4つの仕様 ー Web Components基礎編
我々Web開発者がWeb Componentsという言葉を耳にしてから、もう2年程経ったでしょうか。Web Componentsが変えるWeb開発の未来という記事に、「今のWeb開発がどのような課題を抱えているか、それをWeb Componentsがどう解決するか」を書きました。これを踏まえて、本連載ではWeb Componentsの仕様から実装、PolymerやX-TagといったWeb Componentsを支えるライブラリなどの周辺知識まで解説していきます。 Web Componentsを支える4つの仕様 連載第1回目となる本記事では、Web Componentsを支える4つの仕様について解説します。Web Componentsは以下の4つの独立した仕様から構成されます。 Custom Elements – 独自のカスタム要素をユーザーが定義することを可能にする Shadow DOM
誰でもAndroid 5.0のMaterial DesginをWebに持ち込めるPolymer
誰でもAndroid 5.0のMaterial DesginをWebに持ち込めるPolymer：HTML5アプリ作ろうぜ！（13）（1/4 ページ） Material DesginでWeb ComponentsでオープンソースでレスポンシブなJavaScriptフレームワーク「Polymer」をWeb上で活用するためのチュートリアル記事です。Bootstrapライクなレイアウトを実現するサンプルを交えてインストール方法や使い方を紹介します。
Web Componentsが変えるWeb開発の未来
Google I/O 2014でEric BidelmanがPolymer and Web Components change everything you know about Web developmentというタイトルで、Web Componentsおよびその補完・拡張ライブラリであるPolymerについてセッションが行われました。 「なぜWeb Componentsが生まれたのか」 「Web Componentsが何を解決してくれるか」 この2点を上記セッションに沿って解説していきます。 HTML/CSSが持つ弱点 Webを構成していくパーツを作る際、今まではどのように行っていたでしょうか。<div>や<textarea>といったようなネイティブで用意されているタグに、CSSで見た目で装飾し、JavaScriptからDOMのAPIを操作してインタラクションを付与してきました。 しか
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Material Design
新着記事