asamuzaK.jp
tag:asamuzak.jp,2017://1
2017-03-04T08:16:29Z
Log Of Trial, Usually Sillious...
クルマやウェブや日常における試行錯誤の記録、たいてい無益…
Movable Type
♪Story in the SVG また繋がるフラグメント (c) AAA
tag:asamuzak.jp,2016://1.524
2016-10-29T07:52:49Z
2016-12-30T11:09:32Z
symbol & useをひとしぼり! NEW SVGスプライト!
Kazz
<p>
<a href="http://asamuzak.jp/html/476" title="asamuzaK.jp : 使えば爽快! SVG Sprite">使えば爽快! SVG Sprite</a>の改訂版。
SVGのsymbolとuseを使ってSVGスプライトを利用する方法を、再度、考えてみた。
</p>
<ul>
<li>
<a class="refer-to" href="http://asamuzak.jp/test/svg_sprite2_test" title="SVG sprite test">SVG#fragmentを利用したSVGスプライトのテストケース</a>
</li>
<li>
<a class="refer-to" href="http://asamuzak.jp/test/svg_sprite2_test2" title="SVG sprite test">Safari用のバグ対策を施したテストケース</a>
</li>
</ul>
<p>
今回のSVGのサンプルソース。
ターゲットになっていないuse要素はCSSで非表示にしてしまうことがコツといえばコツ。
あと、ルートのsvg要素には、widthもheightもつけず、viewBoxのみ。
</p>
<pre class="sample"><code>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 128 128">
<style>
use:not(:target) {
display: none;
}
</style>
<symbol id="rect1">
<title>Rect</title>
<rect x="1" y="1" width="126" height="126"/>
</symbol>
<symbol id="circle1">
<title>Circle</title>
<circle cx="64" cy="64" r="64"/>
</symbol>
<symbol id="triangle1">
<title>Triangle</title>
<polygon points="0,128 128,128 64,0"/>
</symbol>
<use id="rect" xlink:href="#rect1" fill="rgb(255,0,0)"/>
<use id="circle" xlink:href="#circle1" fill="rgb(0,255,0)"/>
<use id="triangle" xlink:href="#triangle1" fill="rgb(0,0,255)"/>
</svg>
</code></pre>
<p><a href="http://asamuzak.jp/html/524">"♪Story in the SVG また繋がるフラグメント (c) AAA"の全文を読む</a></p>
♪1年2年は夢のうち まさかと笑って待てば (c) 中島みゆき
tag:asamuzak.jp,2016://1.516
2016-04-25T04:50:57Z
2016-04-25T05:01:07Z
プジオの2度目の車検
Kazz
<p>
気がついたら、もうプジオの2度目の車検の時期を迎えていた。
入庫時の走行距離は38,584kmで前回の車検時は27,125km。
なので、平均すれば年間5,730km…ってところ。
住環境・家庭環境的に車なしの生活は今は考えられないけど、走行距離は年々少なくなっているなぁ。
</p>
<p><a href="http://asamuzak.jp/307sw/516">"♪1年2年は夢のうち まさかと笑って待てば (c) 中島みゆき"の全文を読む</a></p>
♪1999 Scalable Object 輝ける時代の救世主 (c) 聖飢魔II
tag:asamuzak.jp,2016://1.514
2016-03-14T02:27:59Z
2016-03-14T03:22:57Z
リンクやボタンの子孫object要素で読み込んだSVGをインタラクティブにする
Kazz
<p>
a要素の子孫のobject要素やbutton要素の子孫のobject要素でSVGを読み込む場合には、そのままではリンクやクリックが効かず、ちょっと困ったことになる。
</p>
<p>
その対処法はすでにいろんな方が指摘していて、
</p>
<pre class="sample"><code>
a, button {
display: inline-block;
}
a object, button object {
pointer-events: none;
}
</code></pre>
<p>
といった具合にCSSを指定すればよい。<br />
<a class="refer-to" href="http://bakera.jp/ebi/topic/4704" title="SVGをobject要素で活用する | 水無月ばけらのえび日記">SVGをobject要素で活用する | 水無月ばけらのえび日記</a><br />
<a class="refer-to" href="http://subtech.g.hatena.ne.jp/mayuki/20120212/1329046476" title="SVGをobject要素で表示してリンクにする - ういはるかぜの化学 - subtech">SVGをobject要素で表示してリンクにする - ういはるかぜの化学 - subtech</a><br />
<a class="refer-to" href="http://dresscording.com/blog/svg/retina_svg.html" title="Retina対応にSVGを使う方法とリンクを張る時の注意点 - ROCHAS">Retina対応にSVGを使う方法とリンクを張る時の注意点 - ROCHAS</a>
</p>
<p>
ところが、当然のことながらSVGにマウスイベントなどが伝わらないので、<code>:hover</code>で色が変わるようにSVG内にCSSで指定していても色は変わらない…orz
</p>
<p>
そこで、a要素やbutton要素が受け取ったイベントを利用して、子孫のSVGをインタラクティブにするJavaScriptを書いてみた。
<a class="refer-to" href="http://asamuzak.jp/test/svg_interactive_test2" title="SVG Interactive test">object要素のSVGでインタラクティブにCSSを変更するテスト</a>
</p>
<p><a href="http://asamuzak.jp/html/514">"♪1999 Scalable Object 輝ける時代の救世主 (c) 聖飢魔II"の全文を読む</a></p>
♪Move over, don't do it over, Cause it's over, Generation next (c) Spice Girls
tag:asamuzak.jp,2016://1.512
2016-02-01T14:26:30Z
2016-02-04T05:29:25Z
特定のブラウザにはES2015以降をそのまま配信する方法
Kazz
<p>
せっかくES2015でJavaScriptを書きあげたとしても、結局、ES5にトランスパイルしたものしか使ってないのはなんだかもったいない。
例えば、<a href="https://kangax.github.io/compat-table/es6/" title="ECMAScript 6 compatibility table">kangax</a>を見ると、Firefox 45、Chrome 49、Edge 13ではすでに8割方、ES2015に対応している。
</p>
<p>
元のES2015のファイルも残っているわけだし、だったらそれらのブラウザにはES2015をはじめとした次世代のES.nextをそのまま適用させる方法はないものか、と考えてみた。
</p>
<p><a href="http://asamuzak.jp/html/512">"♪Move over, don't do it over, Cause it's over, Generation next (c) Spice Girls"の全文を読む</a></p>
Sign 'O' The Times (c) Prince
tag:asamuzak.jp,2015://1.510
2015-12-24T13:53:15Z
2015-12-25T02:12:52Z
Firefoxのアドオンが署名されてない? 今一度ご確認を
Kazz
<p>
Firefoxが43に更新されて以来、署名のないアドオンがデフォルトで無効化されたということであちこちから悲鳴が聞こえてくる昨今ですw
</p>
<p>
たとえば自分の観測した範囲では「<a href="https://addons.mozilla.org/ja/firefox/addon/tree-style-tab/" title="ツリー型タブ (Tree Style Tab) :: Add-ons for Firefox">ツリー型タブ</a>が無効になった」「<a href="https://addons.mozilla.org/ja/firefox/addon/autopagerize/" title="AutoPagerize :: Add-ons for Firefox">AutoPagerize</a>が無効になった」とか叫んでるツイートをしばしば見かけるわけです。
</p>
<p>
で、次(Firefox44)からはFirefoxを捨ててChromeなどに移ると仰っている方が多いわけですが…。
</p>
<p>
駄菓子菓子、ちょっと待って!
だいたいのアドオンは<a href="https://addons.mozilla.org/ja/firefox/" title="Add-ons for Firefox">AMO</a>に署名済みのものがあがってますから!
AMO以外で落としてきたアドオンは、アドオンマネージャからの「更新を確認する」からではおそらく更新されないのでそこであきらめないでください。
今一度、AMOを訪れて自分が入れているアドオンの最新バージョンを確認してみてください。
</p>
<blockquote title=""Sign 'O' The Times / Prince"の歌詞より">
<pre class="lyrics">Sign o' the times mess with your mind
Hurry before it's too late
</pre>
</blockquote>
<p>
ってことで手遅れになる前に、今一度、自分のアドオンをご確認くださいませ。
</p>
Firefox用アドオン withExEditor
tag:asamuzak.jp,2015://1.502
2015-09-19T11:16:35Z
2015-11-14T23:00:33Z
外部エディターでソースや選択部分を表示、またはテキストを編集
Kazz
<p>
初めてFirefox用のアドオンを自作してみた。
</p>
<p>
Firefoxでのソース表示やテキスト編集には、長らく<a href="https://addons.mozilla.org/ja/firefox/addon/dafizilla-viewsourcewith/" title="Dafizilla ViewSourceWith :: Add-ons for Firefox">Dafizilla ViewSourceWith</a>を使用していたのだが、Firefoxが導入したマルチプロセス(e10s)を有効にすると動かなくなってしまい、それならばと習作のつもりで作成。
</p>
<ul>
<li><a href="https://addons.mozilla.org/ja/firefox/addon/withexeditor/" title="withExEditor :: Add-ons for Firefox">withExEditor :: Add-ons for Firefox</a>(ダウンロード)</li>
<li><a href="https://github.com/asamuzaK/withExEditor" title="asamuzaK/withExEditor">asamuzaK/withExEditor</a>(ソースコード)</li>
</ul>
<p>
また、ありがたいことに、公開して早々にいろいろなところで取り上げていただいた。
</p>
<ul>
<li><a href="http://wikiwiki.jp/firefox/?Ext%2Fedit%2FwithExEditor" title="withExEditor - Firefox更新情報 Wiki*">withExEditor - Firefox更新情報 Wiki*</a></li>
<li><a href="http://mozilla-remix.seesaa.net/article/422943974.html" title="Mozilla Re-Mix: ソースの表示やテキストエリアの編集を任意のエディタで実行できるようになるFirefoxアドオン「withExEditor」">Mozilla Re-Mix: ソースの表示やテキストエリアの編集を任意のエディタで実行できるようになるFirefoxアドオン「withExEditor」</a></li>
<li><a href="http://beau.g-com.ne.jp/mon-extension-memo15_07-8.html#memo15725" title="Mozilla Firefox Thunderbird の拡張あれこれ-MEMO(2015年7月-8)">Mozilla Firefox Thunderbird の拡張あれこれ-MEMO(2015年7月-8)</a></li>
<li><a href="http://www.forest.impress.co.jp/docs/review/20150824_717122.html" title="【レビュー】Webページのソースを任意のエディターで表示可能なFirefox拡張「withExEditor」 - 窓の杜">【レビュー】Webページのソースを任意のエディターで表示可能なFirefox拡張「withExEditor」 - 窓の杜</a></li>
<li><a href="http://utaukitune.ldblog.jp/archives/65718437.html" title="歌うキツネ : Firefoxのページのソースを表示するアプリを設定する">歌うキツネ : Firefoxのページのソースを表示するアプリを設定する</a><ins>withExEditorに関する記述は削除された模様</ins></li>
</ul>
<p>
バグやご要望などぜひお知らせください!
</p>
ClosureCompiler用ユーザー・スクリプト ClosureCompilerParameters.user.js
tag:asamuzak.jp,2015://1.497
2015-05-16T17:10:05Z
2016-01-22T01:06:28Z
Closure Compiler Serviceのオプション設定を半自動化
Kazz
<p>
<a href="https://closure-compiler.appspot.com/home">Closure Compiler Service</a>で、オプション設定を一々記入するのがちょっと面倒くさかったので、その記述を半自動化させるグリモン。
</p>
<ul>
<li>
<a href="https://github.com/asamuzaK/ClosureCompilerParameters" title="asamuzaK/ClosureCompilerParameters">asamuzaK/ClosureCompilerParameters</a>
(GitHub)
</li>
<li>
<a href="https://github.com/asamuzaK/ClosureCompilerParameters/raw/master/ClosureCompilerParameters.user.js">ClosureCompilerParameters.user.jsのインストール</a><br />
(Firefoxでは要Greasemonkey。Chrome / Operaでは要Tampermonkey)
</li>
</ul>
<p><a href="http://asamuzak.jp/html/497">"ClosureCompiler用ユーザー・スクリプト ClosureCompilerParameters.user.js"の全文を読む</a></p>
♪抹消, 抹消 man, I've got to be a 抹消 man (c) Village People
tag:asamuzak.jp,2015://1.496
2015-05-11T05:31:56Z
2015-05-11T08:20:06Z
エランを一時抹消登録
Kazz
<figure class="img_r">
<img src="http://asamuzak.jp/photos/elan_20150511_1.jpg" alt="関東運輸局神奈川運輸支局" />
</figure>
<p>
エランの車検時期を迎えたが、車検は継続せずに、一時抹消することにした。
ということで、その手続きに行ってきた。
</p>
<p>
乗ればどこかしら壊れそうでorz、乗ろうというモチベーションが上がらなかったことやら、家庭の事情やら…。
</p>
<p>
はたして、次に復帰できるのは何年後か…
</p>
<p>
その暁にはフル・レストアさせたいなぁ…
</p>
<figure>
<img src="http://asamuzak.jp/photos/elan_20150511.jpg" alt="冬眠に入るエラン" />
</figure>
♪めぐり逢いを約束にいつかはきっと (c) 渡辺徹
tag:asamuzak.jp,2015://1.495
2015-05-04T12:54:02Z
2015-06-17T13:14:51Z
非同期なファイルのリクエストをPromise化して関数を遅延実行するための簡易ラッパー
Kazz
<p>
Promiseとかfetch()とか非同期でファイルを取得してから関数を遅延実行させるためのラッパー関数のようなものを作ってみた。
Promiseって.then()でいくらでも繋げるので確かに処理過程はわかりやすくなってるんだけど、でも一々書くのが面倒なのでそれらの処理をまとめて隠蔽。
</p>
<p>
だって、.then().then()とか書き連ねるのって全然イケてないじゃん…みたいなw
</p>
<p>
<a class="refer-to" href="http://asamuzak.jp/test/requestfile_test" title="requestFile(), requestFileHeader() test">テストケース</a>
</p>
<p><a href="http://asamuzak.jp/html/495">"♪めぐり逢いを約束にいつかはきっと (c) 渡辺徹"の全文を読む</a></p>
♪URI思い出の中に君をこのままURI閉じこめられない (c) 久保田利伸
tag:asamuzak.jp,2015://1.494
2015-04-24T15:41:26Z
2015-12-30T17:33:10Z
IPv6にも対応したURIの正規表現とURIの各コンポーネントを取り出すスクリプト
Kazz
<p>
<a href="http://tools.ietf.org/html/rfc3986" title="RFC 3986 - Uniform Resource Identifier (URI): Generic Syntax">RFC 3986</a>とその更新版の<a href="http://tools.ietf.org/html/rfc6874" title="RFC 6874 - Representing IPv6 Zone Identifiers in Address Literals and Uniform Resource Identifiers">RFC 6874</a>で定められている<abbr title="Internet Protocol Version 6">IPv6</abbr>や将来のIP(IPvFuture)も含めた<abbr title="Uniform Resource Identifiers">URI</abbr>と各コンポーネンツのシンタックスを1つの正規表現の中に閉じこめてみたよ!
</p>
<p>
<code class="sample" typeof="schema:SoftwareSourceCode"><meta property="schema:codeSampleType" content="code snippet" /><meta property="schema:license" content="http://asamuzak.jp/MIT" title="MIT" /><meta property="schema:license" content="http://asamuzak.jp/GPL" title="GPL" />
/*
* <span property="schema:about">URI正規表現</span>
* <span property="schema:description" lang="ja">RFC3986とRFC6874に定められたURIシンタックスの正規表現</span>
* Copyright (c) <span property="schema:copyrightYear">2015</span> <span property="schema:copyrightHolder" typeof="schema:Person"><span property="schema:name">Kazz</span>
* <span property="schema:url">http://asamuzak.jp</span></span>
* Dual licensed under MIT or GPL
* <span property="schema:license" title="About License">http://asamuzak.jp/license</span>
*/
/^([a-z][a-z0-9\+\-\.]*):(?:\/\/(?:(?:[a-z0-9\-\._~!\$&'\(\)\*\+,;=:]|%[0-9A-F]{2})*@)?(\[(?:(?:(?:(?:(?:[0-9a-f]{1,4}:){0,4}[0-9a-f]{1,4})?::|(?:(?:[0-9a-f]{1,4}:){0,3}[0-9a-f]{1,4})?::[0-9a-f]{1,4}:|(?:(?:[0-9a-f]{1,4}:){0,2}[0-9a-f]{1,4})?::(?:[0-9a-f]{1,4}:){2}|(?:(?:[0-9a-f]{1,4}:){0,1}[0-9a-f]{1,4})?::(?:[0-9a-f]{1,4}:){3}|[0-9a-f]{1,4}?::(?:[0-9a-f]{1,4}:){4}|::(?:[0-9a-f]{1,4}:){5}|(?:[0-9a-f]{1,4}:){6})(?:(?:(?:(?:1[0-9]|[1-9])?[0-9]|2(?:[0-4][0-9]|5[0-5]))\.){3}(?:(?:1[0-9]|[1-9])?[0-9]|2(?:[0-4][0-9]|5[0-5]))|[0-9a-f]{1,4}:[0-9a-f]{1,4})|(?:(?:[0-9a-f]{1,4}:){0,5}[0-9a-f]{1,4})?::[0-9a-f]{1,4}|(?:(?:[0-9a-f]{1,4}:){0,6}[0-9a-f]{1,4})?::)%25(?:[a-z0-9\-\._~]|%[0-9A-F]{2})+|(?:(?:(?:[0-9a-f]{1,4}:){0,4}[0-9a-f]{1,4})?::|(?:(?:[0-9a-f]{1,4}:){0,3}[0-9a-f]{1,4})?::[0-9a-f]{1,4}:|(?:(?:[0-9a-f]{1,4}:){0,2}[0-9a-f]{1,4})?::(?:[0-9a-f]{1,4}:){2}|(?:(?:[0-9a-f]{1,4}:){0,1}[0-9a-f]{1,4})?::(?:[0-9a-f]{1,4}:){3}|[0-9a-f]{1,4}?::(?:[0-9a-f]{1,4}:){4}|::(?:[0-9a-f]{1,4}:){5}|(?:[0-9a-f]{1,4}:){6})(?:(?:(?:(?:1[0-9]|[1-9])?[0-9]|2(?:[0-4][0-9]|5[0-5]))\.){3}(?:(?:1[0-9]|[1-9])?[0-9]|2(?:[0-4][0-9]|5[0-5]))|[0-9a-f]{1,4}:[0-9a-f]{1,4})|(?:(?:[0-9a-f]{1,4}:){0,5}[0-9a-f]{1,4})?::[0-9a-f]{1,4}|(?:(?:[0-9a-f]{1,4}:){0,6}[0-9a-f]{1,4})?::|v[0-9a-f]+\.[a-z0-9\-\._~!\$&'\(\)\*\+,;=:]+)\]|(?:(?:(?:1[0-9]|[1-9])?[0-9]|2(?:[0-4][0-9]|5[0-5]))\.){3}(?:(?:1[0-9]|[1-9])?[0-9]|2(?:[0-4][0-9]|5[0-5]))|(?:[a-z0-9\-\._~!\$&'\(\)\*\+,;=]|%[0-9A-F]{2})*)(:[0-9]*)?((?:\/(?:[a-z0-9\-\._~!\$&'\(\)\*\+,;=:@]|%[0-9A-F]{2})*)*)|(\/(?:(?:[a-z0-9\-\._~!\$&'\(\)\*\+,;=:@]|%[0-9A-F]{2})+(?:\/(?:[a-z0-9\-\._~!\$&'\(\)\*\+,;=:@]|%[0-9A-F]{2})*)*)?|(?:[a-z0-9\-\._~!\$&'\(\)\*\+,;=:@]|%[0-9A-F]{2})+(?:\/(?:[a-z0-9\-\._~!\$&'\(\)\*\+,;=:@]|%[0-9A-F]{2})*)*|(?:[a-z0-9\-\._~!\$&'\(\)\*\+,;=:@]|%[0-9A-F]{2}){0}))(\?(?:[a-z0-9\-\._~!\$&'\(\)\*\+,;=:@\/\?]|%[0-9A-F]{2})*)?(#(?:[a-z0-9\-\._~!\$&'\(\)\*\+,;=:@\/\?]|%[0-9A-F]{2})*)?$/i
</code>
</p>
<p>
URIなので、http(s):やftp:だけでなく、mailto:とかtel:とかurn:とかでも使えます。
</p> <p><a href="http://asamuzak.jp/html/494">"♪URI思い出の中に君をこのままURI閉じこめられない (c) 久保田利伸"の全文を読む</a></p>