AngularJS とは セットアップ 恒例のコードリーディング コンポーネントの追加 リリース ドキュメント 感想 AngularJS とは Google と OSS コミュニティで作成されるフロントエンドフレームワークです。 angular.jp セットアップ Angular のコマンドラインツ…

vue js とは セットアップ方法 1. JavaScript 取り込みだけでセットアップ 2. ビルド環境構築 構成の確認 ドキュメント リリース 感想 昨今の Web framework 第二弾、Vue js 3 （この記事書いてる時点で最新のやつ） vue js とは Web framework の一つ。 Rea…

template の使い方 template を親の HTML から独立させたい！ JavaScript に突っ込んじゃえ template を別ファイルに切り出しちゃえ template の使い方 基本的な使い方は MDN に載っているので、コレをまず参考にする。 developer.mozilla.org これをもとに…

概要 まずはタグを作る Shadow DOM の特性 style 透過性 要素の透過性 イベントの透過性 Shodow DOM の外側にイベントをバブリングする Open Closed の違い 弱点 概要 Shadow DOM を実際に作成した上で、どの様な動作をするのかを検証してみる。 white-azale…

カスタムなタグを作成してコンポーネントを作成するフレームワークを使ったことのある人は多いと思う。 と言うかこのサイトで紹介している LWC なんてまんまそれだし… white-azalea.hatenablog.jp で、この タグを作るって仕様的にどうなってるん？ て事で調…

目標 ServiceWorker でPush通知を受け取る。 内容的には下記の記事の続き。 white-azalea.hatenablog.jp 目次 目標 目次 フレームワークインストール 実装 各ファイルの実装 起動してみる Push 通知を送ってみる。 尚、参考はこれ qiita.com

目的 LWC などのフロントエンド技術は、極論調べてフレームワークに従っていれば処理できます。 使うだけならその内部を把握する必要はありませんが、どんな機能をどのように使って処理するのかを把握しておけば、応用が効くかも知れません。 ここでは Servi…

Polymer ってなんぞ？ What is Polymer? - Polymer Custom elements extend the web 一言でビルトイン以外のカスタムタグを追加すると。 カスタムなイベントや、デフォルトのスタイルも含めてコンポーネントとして定義できるらしい。 面白いのは「フレームワ…

まともに整理するのめんどい HTML5 とか勉強会 GoogleI/O 2015 隙間のあるエリア分けだけして出入りしやすいスペースでセッションをする。 一方通行の話というよりは双方向でいろいろ話をするというのが今回のコンセプトとのこと。 基本的に android な話。 …

そういや晒してなかったなと思って。 セッション１ ふろしきさん 日本US含む10ヵ国でモバイル検索する人はPC より多い：Google調べ で、下記の話をする アニメーション ネットワーク モニタリング アニメーション 初期：AnimationFrame方式 JS でフル制御す…

何がしたいって、スライドインアウトしたい。 原理的にはスライドインさえできれば、スライドアウトは似たようなものだろう。 まずはアニメーションできるようにしようか。とりあえずはマウスを上に置いたらアニメーションで色を変える。 .block { display: …

と言っても昨日 18時から20時までチュートリアルコードを読んで試しただけだが。 まず ReactJS ってなんぞやって話だと、下記を参照。 A JavaScript library for building user interfaces | Reactfacebook.github.io BUILDING USER INTERFACES と銘打っては…

Animate.css 素晴らしいですよね。メモ。

前回の続き。 画面にブラーをかけてみる - 謎言語使いの徒然white-azalea.hatenablog.jp マウスを左に持って行ったらメニューを表示する仕様で実装してみた。 タグ構成は下記 <nav role="popup-nav" class="popup-nav" blar-target="all_contemts"> <div class="popup-icon"> <div class="glyphicon glyphicon-menu-hamburger">CONTENTS</div> </div> <div class="content"> </div></nav>

何を使うのかというと、下記。 Filter Effects Module Level 1 で、これで画面左にメニューを置こうと考えたわけだ。 作りかけだが、やり方を思いついたのでメモする。 まず、タグ構成を下記のようにする。 <nav id="floating_nav" class="popup-nav"> <div class="content"> <ul class="nav nav-pills nav-stacked"> <li> <h4>Contents</h4> </li> <li><a href="#wizard">Wizard</a></li> </ul> </div> </nav>

MDwiki 見たままだけど、HTML5だけで書くことができるWiki。 ただし、DBを持たないので動的書き換えはできません。同じディレクトリ配下に md ファイルを乗っけて、html ファイルをフロントエンドにすることでHTMLファイルとして表示するコンバーターみたい…

前回作った Wizard のページングデザインが気に入らなかったので作ってみた。 Hello AZ UI Liblary

Hello AZ UI Liblary デザイン調整する余裕がなかったし、作りもかなりやっつけ。 とは言え、ページングとそれによるインジケータの移動はなんとかできた。 急ぎで作ったので、作りもやっつけ臭がする。 どこかで構造の見直ししないとなぁ…。

左右方向の揃えは、text-align で普通にできるが、縦方向の中央揃えは思いつかなかった… なるほど table-cell 属性持たせるのか…。 勉強になったのでメモ CSSで要素内のテキストを上下左右の中央揃えにしたい html - CSSで要素内のテキストを上下左右の中央…

使ったことなさげなタグを列挙（２） 前回 HTML5 の基本を学び直す(2) - 謎言語使いの徒然 HTML5 の基本を学び直す(2) - 謎言語使いの徒然 mark : 注目させたい箇所をハイライト表示。特別な意味論は持ってない。 <p>人を始末しようって事は、<mark>逆に始末されるか</mark></p>…

セクション section タグで基本はセクションを指定できいるが、h1-h6 のタグを使うと、暗黙的にセクションが切られる。 セクションのルート要素になっている物を セクショニングルート といい、親のアウトラインから独立して階層構造を持てる。 セクショニン…

コンテンツ・モデル どこのコンテンツに何が配置できるかの仕様を言うらしい。 今日まで真面目にやったこと無かったからなぁ…。 要素はいくつかカテゴリがあるらしく。 フローコンテンツ インタラクティブコンテンツ フレージングコンテンツ エンベデットコ…

HTML5 では DOCTYPE 宣言は html としか書かない。 HTML5 からは DTD を指定するという意味合いから、単に「レンダリングモードがHTMLですよ」というだけの意味に変わった。 省略可能なタグ html/head/body/tbody/colgroup はタグ自体を省略可能 tbody : テ…

OfflineStorage が HTML5 に入ってきて、色々できるようになっていて、一番多くのプラットフォームで扱えるのが KVS のようで、これを早速使ってみる。 http://www.html5rocks.com/ja/features/storage 対応できないデバイス？あきらめてくださいw storage =…

というかいつ出たのか、、、気づきませんでした。 ということで早速弄ってみる。 URL 現状は厳密にはRC１のようでした。 目についた変更点 mobile first (モバイル優先、わーい) IE8以上必須, Firefox3系はサポート打ち切り CSS は responsive もひとまとめ…

今日は、Play2.0 に https://github.com/aselab/scala-activerecord 突っ込んで、Backbone.js 使って、Caffee Script に直そうとしてたのだが全然進まなんだ、、、。まず、scala-active record を Play2.0 に取り込む手順をど忘れ。かれこれ２ヶ月 sbt 使っ…

ボーダーの角を丸める方法（Mozilla & webkit) http://www.css3.info/preview/rounded-border/Webkit 特有の拡張 css http://qooxdoo.org/documentation/general/webkit_css_stylesMozilla 拡張 css https://developer.mozilla.org/ja/CSS_Reference/Mozilla…

jQuery 使ってると、動的コンテンツ挿入楽でいいね。 // ローディング開始時 $('body').append('<div id="progress">now loading.</div>'); // ローディング完了時 $('#progress').remove();そして、このスタイル定義。 #progress { -webkit-border-radius: 10px; background-color: r…

案外ハマったのでメモ。 HTML5 指定でファイル作ってHTTPアクセスした(chrome12:Webkit)ら、h2 が全然表示されない。 デバグコンソール見たら h2 が無視されてた…。HTTP鯖のログでは転送されていた…。どういうことだあああああ。 <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,user-scalable=yes, initial-scale=1.0, maximum-scale=3.0" /> </meta></meta></head></html>

久々に弄ってくたばる。 何がキツいって、補完無いから変数間違うんだけど、間違ったときに動かない、表示されないだけで、エラー情報が見つからないから、デバッグが死ぬ。 そのうちデバッグ方法とかも調べないトナーとか思いつつ、次にサンプル作ってみる…