html5
目標 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>
久々に弄ってくたばる。 何がキツいって、補完無いから変数間違うんだけど、間違ったときに動かない、表示されないだけで、エラー情報が見つからないから、デバッグが死ぬ。 そのうちデバッグ方法とかも調べないトナーとか思いつつ、次にサンプル作ってみる…
ExtJs 1.1 だかの頃から一切触ってなかったので、忘れたなんてもんじゃない。 別物にもなってるだろうし、初学者同然なので、初心者らしく、HelloWorld叩いてみる。まずはSencha(何で煎茶なのかは不明)から、Ext.JS落として来る。 ライセンスとか勉強で気に…
Building Android Apps with HTML,CSS, and JavaScript(oreilly). 見ながらやってみた。ヘッダを消してみて。 #header ul.hide { display: none; } ボタン経由で表示できるようにしてみる。 <div class="leftButton" onclick="toggleMenu()">Menu</div> JavaScript をこんな感じで作って。 if(window.innerWidth &&…
3月から放置気味のこっち。久々にやる気出した。 ヘッダ上に、ボタンを配置する。よくあるiPhoneの「戻る」ボタンの実装。(戻り先もなにも無いので、とりあえずはMenu) まずはボタンのフォントとか整えてみる。 #header div.leftButton { position: absolute…
ヘッダとか色々用意してみた。教科書は、O'Reillyの「Building Android Apps with HTML, CSS, and JavaScript」日本語版はまだ無い。 <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="screen.css" /> </link></meta></head></html>
素のHTML5のページを作ってみる。 <html> <head> <meta charset="utf-8" /> <title>disable viewport</title> </head> <style> article, aside, figure, footer, header, hgroup, menu, nav, section { display:block; } p { font-size:12px; } </style> <body> <p>viewport metadata disabled!</p> </body> </html> これで…
