List of atom - Baldanders.info
tag:Baldanders.info,2015-05-31:/tags
2015-05-31T09:00:00+00:00
バルトアンデルスは連続的な怪物,時間の怪物である。(ホルヘ・ルイス・ボルヘス 『幻獣辞典』より)
https://baldanders.info/images/avatar.jpg
https://baldanders.info/images/avatar.jpg
Baldanders.info リニューアルに向けて
tag:Baldanders.info,2015-05-31:/blog/000848/
2015-05-31T09:00:00+00:00
2015-05-31T09:00:00+00:00
このサイトは MTOS(Movable Type Open Source)で運用しているのだが, MTOS は今年の10月でサポートが切れる。そこで今年の9月を目処にサイトの全面リニューアルを行うことにする。
Spiegel
/profile/
<p> このサイトは <a href="http://www.movabletype.jp/opensource/">MTOS(Movable Type Open Source)</a>で運用しているのだが, MTOS は今年の10月でサポートが切れる。 </p><ul> <li><a href="http://www.movabletype.jp/blog/mtos_support.html">MTOSのサポート方針について | MovableType.jp - CMSプラットフォーム Movable Type -</a></li> </ul><p> もちろん MTOS はオープンソースなので,誰かが引き継いで継続させることも可能なのだが, XML-RPC 自体が時代遅れになりつつあり(現在は JSON REST API が主流),<a href="http://www.movabletype.jp/">Movable Type</a> では事実上見捨てられている。 そもそも SaaS や PaaS が当たり前の時代に自前でサイトを立てて運用することが時代遅れだし,セキュリティ・リスクの高い行為になりつつある。 (ここはレンタルサーバなので下回りの管理はプロバイダがやってくれるけど,それでも CMS などのウワモノは自分で面倒を見ないといけない) </p><p> そうした状況でこのサイトを維持していく意義を考えると,やはりこのサイトは「公開物置」として運用していくのが合理的だと考えるようになった。 そこで今年の9月を目処にサイトの全面リニューアルを行うことにする。 今回の目標は以下のとおり。 </p><ol> <li>既存のサイト構成は変えない</li> <li>オンラインでのコンテンツ管理をやめる。現行のブログはいったん凍結</li> <li>その上でローカルでサイト管理できる仕組みを導入し git 等を使って deploy する(git を使った deploy は導入済みだが CMS が生成するページと conflict する可能性があるので半手動状態)</li> <li>他サービスとの連携を強化する</li> </ol> <section> <h3>現在利用しているサービス</h3> <p> 現在利用している主なサービスは以下のとおり。 </p><ul> <li><a href="http://log.baldanders.info/">Tumblr</a></li> <li><a href="https://www.flickr.com/photos/spiegel/">Flickr</a> & <a href="https://instagram.com/spiegel_2007/">Instagram</a></li> <li><a href="https://delicious.com/spiegel">Delicious</a></li> <li><a href="http://qiita.com/spiegel-im-spiegel">Qiita</a> & <a href="https://medium.com/@spiegel">Medium</a></li> </ul><p> <a href="http://log.baldanders.info/">Tumblr の記事</a> は既にうちのドメインを割り当てて運用しているが,悲しいかな, reblog 以外ではほとんど使わなくなった。 Tumblr は Yahoo! の傘下に入ってからどんどんダメになっていく気がする。 あの広告まみれの Dashboard は見るに耐えない(ので見なくなった)。 </p><p> Flickr は多くの日本人に見つからなかったおかげで非常に居心地のいいサービスになっている(願わくば Delicious のように Yahoo! から独立して欲しい)。 一方の Instagram は「馬鹿に見つかった」状態になってしまい今後に不安を残すが,私にとって Instagram はカメラと連動しているサービスなので,もはや手放せない(ちなみにオリジナルの写真データはストレージ・サービスで保管している)。 </p><p> Delicious は Yahoo! から独立してからとてもよくなった。 これは本当に「幸せな離婚」だったようだ。 Yahoo! は本当に買ってきたサービスを壊すよねぇ。 ちったぁそこにいるユーザのことも考えろっての。 </p><p> <a href="http://qiita.com/spiegel-im-spiegel">Qiita</a> と <a href="https://medium.com/@spiegel">Medium</a> は現在の主な遊び場である。特に最近はセキュリティ脆弱性情報のメモ置き場として <a href="http://qiita.com/spiegel-im-spiegel">Qiita</a> を使うようになった。 </p><ul> <li><a href="http://qiita.com/spiegel-im-spiegel/items/a6e149b41115bee6b41c">セキュリティ - VENOM 脆弱性について - Qiita</a></li> <li><a href="http://qiita.com/spiegel-im-spiegel/items/af0cdb620ad79c4d0f36">セキュリティ - TLS における Diffie-Hellman 鍵交換の脆弱性 - Qiita</a></li> </ul><p> Medium には export 機能があり,いつでも記事を引き上げられる状態(今のところその気はないけど)。 <a href="http://qiita.com/spiegel-im-spiegel">Qiita の記事</a>は草稿版を markdown 形式で保持している。 <a href="http://qiita.com/spiegel-im-spiegel">Qiita の記事</a>はいずれここに引き取りたいと考えている。 </p> </section> <section> <h3>Go Hugo</h3> <p> 「<a href="http://t32k.me/mol/log/hugo/">Jekyllが許されるのは小学生まで</a>」らしいので(笑), CMS(Content Management System)は <a href="http://gohugo.io/">Hugo</a> にしようかと考えているが,まだ全然評価できてない。 というのも Go 言語について調べてたらハマっちゃったのだ。 </p><ul> <li><a href="http://qiita.com/spiegel-im-spiegel/items/dca0df389df1470bdbfa">はじめての Go 言語 (on Windows) - Qiita</a></li> </ul><p> あまり言語にこだわりはないのだが,個人的に Go 言語は相性がいいらしい。 多分 C/C++ 言語から入った人(若い人にはいないかな)は Go はかなりとっつきやすい言語なんじゃないだろうか。 強い型付けは,空気を読まなくていい(つまり文脈依存でない)のが助かる。 型推論は今や C++ にも実装されているくらいなので,あって当たり前。 </p><p> いや,逃避している場合じゃないな。 </p> </section> <section> <h3>MSYS2</h3> <p> <a href="https://baldanders.info/blog/000705/">昨年の苦労</a>は何だったのか。 <a href="http://msys2.github.io/">MSYS2</a> のおかげで簡単に 32bits と 64bits の環境を併設できるようになっていた。 </p><ul> <li><a href="http://qiita.com/spiegel-im-spiegel/items/ba4e8d2418bdfe0c8049">MSYS2 による gcc 開発環境の構築 - Qiita</a></li> </ul><p> pgpdump のビルドがこれでできるかどうか試してみる予定。 </p><p> そういえば, <a href="http://msys2.github.io/">MSYS2</a> の git は 2.4.1 なのだが,非公式ながら <a href="http://gitextensions.github.io/">GIT Extensions</a> で使えるようだ。 </p> <figure style="margin:0 auto;text-align:center;"> <a href="https://www.flickr.com/photos/spiegel/18266339862" title="GIT Extensions preference by Yasuhiro ARAKAWA, on Flickr"><img src="https://c4.staticflickr.com/8/7735/18266339862_3c10ecb656.jpg" width="500" height="351" alt="GIT Extensions preference"/></a> <figcaption><a href="https://www.flickr.com/photos/spiegel/18266339862">GIT Extensions preference</a></figcaption> </figure> <p> ここで <a href="http://msys2.github.io/">MSYS2</a> の git と sh へのパスをセットすれば使えた。 動作が遅くなるのを我慢できるなら,こっちのほうがいいかも。 </p><p> って,逃避している場合じゃないんだって。 </p> </section> <section> <h3>ATOM Editor</h3> <p> ようやく <a href="https://atom.io/">ATOM Editor</a> が手に馴染んできた。 </p><ul> <li><a href="http://qiita.com/spiegel-im-spiegel/items/3d41d98dacc107d73431">ATOM Editor をそろそろ始めようか - Qiita</a></li> </ul><p> 「コマンドパレット」という発想は, Emacs や vi/vim あたりが由来なのかな。 VT 端末で vi で仕事してた頃は(私はコマンドとかすぐに忘れてしまうので)よく使うコマンド一覧を紙に打ち出して,紙を見ながら作業したりして「何やってんだろ,オレ」な状態だったけど,今は入力アシストが強力なので覚えなくても何とかなるのが素晴らしい。 ただコマンドパレットを呼び出すのにキーを3箇所も押さないといけないのはちょっと苦痛なので,(秀丸ではヘルプ表示に割り当てられている) F1 キーを割り当てている。 そういうカスタマイズもテキストファイルでできるのが素敵。 </p><p> <a href="http://hide.maruo.co.jp/software/hidemaru.html">秀丸</a>から乗り換えるにはまだ足りないものがある感じだが,今では入力作業の8割くらいは ATOM でこなせるようになってきた。 プロジェクト機能はまだ使ってないのだが,今のところ使う機会がない。 そういや秀丸にもプロジェクト機能があるけど使ったことないな。 </p><p> いやいやいや。逃避している場合じゃないんだってば,どってんばってん。 </p> </section>
HTML5 とメタデータ
tag:Baldanders.info,2014-08-23:/blog/000727/
2014-08-23T09:00:00+00:00
2014-08-23T09:00:00+00:00
Atom feed と ccREL / head 要素内の標準的なメタ情報 /Microdata の基本知識
Spiegel
/profile/
<p> 今回は覚え書きのみでお送ります。 イマイチ理解してない気がするので,おかしいところは遠慮なくツッコんで下さい。 </p> <section> <h3>Atom feed と ccREL</h3> <p> Atom feed は XML なので ccREL を使って著作権情報を入れることは可能。 </p><ul> <li><a href="https://wiki.creativecommons.org/Atom">Atom - CC Wiki</a></li> </ul><p> まず ccREL の名前空間を追加する。 </p> <pre class="brush:html" title="feed element - Atom feed"><feed xmlns="http://www.w3.org/2005/Atom" xmlns:cc="http://web.resource.org/cc/"></pre>
<p>
これで <code><feed></code> 要素,またはその子要素の <code><entry></code> 要素内に <code>cc:license</code>, <code>cc:morePermissions</code> 等の記述を追加すればいいだけ。
</p>
<pre class="brush:html" title="ccREL on Atom feed"><link rel="cc:license" type="application/rdf+xml" href="http://creativecommons.org/licenses/by/4.0/rdf" />
<link rel="cc:morePermissions" type="text/html" href="/cc-license.shtml#morePermissions" /></pre>
<p>
この例では cc-license の Commos Deed ではなく RDF/XML に直接リンクしている。
これでいいらしい。
タイトル,著者,日付情報については Atom の property でまかなえる。
</p><p>
<code>cc:license</code>, <code>cc:morePermissions</code>, <code>cc:useGuidelines</code> といった property については<a href="https://baldanders.info/spiegel/rdfa/#ccrel">拙文の ccREL の節</a>を参照のこと。
</p>
</section>
<section>
<h3>head 要素内の標準的なメタ情報</h3>
<p>
HTML5 の <code><head></code> 要素内には <code><meta></code> 要素や <code><link></code> 要素などでメタデータを記述できる。
値がリテラルの場合は <code><meta></code> 要素を, URL 等のリソースの場合には <code><link></code> 要素を使う。
</p><p>
<code><link></code> は void 要素で有効な属性は(グローバル属性以外では)以下のとおり。
</p><ul class="cloud">
<li><code>href</code></li>
<li><code>crossorigin</code></li>
<li><code>rel</code> (MUST)</li>
<li><code>media</code></li>
<li><code>hreflang</code></li>
<li><code>type</code></li>
<li><code>sizes</code> (for <code>rel="icon"</code> property)</li>
<li><code>title</code></li>
</ul><p>
メタデータは rel-href のセットで記述される。
<code>rel</code> 属性にセットする標準のタイプは以下のとおり。
</p><ul class="cloud">
<li><code>author</code></li>
<li><code>help</code></li>
<li><code>icon</code></li>
<li><code>license</code></li>
<li><code>next</code></li>
<li><code>prefetch</code></li>
<li><code>prev</code></li>
<li><code>search</code></li>
<li><code>stylesheet</code></li>
</ul><p>
<code>icon</code> と <code>prefetch</code> 以外は <code>href</code> 要素にハイパーリンクを指定する。
<code>bookmark</code>, <code>nofollow</code>, <code>noreferrer</code>, <code>tag</code> は <code><link></code> 要素では使用できない。
</p><p class="offrec">
(<code>tag</code> は <code><a></code> 要素等では使えるとあり,確かに <a href="http://validator.w3.org/">HTML5 validator</a> では問題ないが <a href="http://www.w3.org/2012/pyRdfa/Validator.html">RDFa Validator</a> ではガッツリ怒られる(<code>nofollow</code> は怒られないのに)。この場合は <code>xhv:</code> 接頭辞をつけるとよい。でもこれで parser が正しく認識してくれるかは不明)
</p><p>
<code><meta></code> は void 要素で, <code><title></code>, <code><base></code>, <code><link></code>, <code><style></code>, <code><script></code> 要素で表現できない情報を記述する。
有効な属性は(グローバル属性以外では)以下のとおり。
</p><ul class="cloud">
<li><code>charset</code></li>
<li><code>content</code></li>
<li><code>http-equiv</code></li>
<li><code>name</code></li>
</ul><p>
ひとつの要素内では <code>name</code>, <code>http-equiv</code>, <code>charset</code> 属性のうちひとつのみを記述する(<span class="offrec">グローバル属性を含め property 名を指示する属性は要素内にひとつしか記述できないようだ</span>)。
</p><p class="offrec">
(<code>http-equiv</code> 属性の <code>content-type</code> は <code>charset</code> 属性で代替できるため HTML5 では不要。また <code>content-language</code> もグローバル属性の <code>lang</code> で代替できるため,同様に不要)
</p><p>
name-content のセットでメタデータを記述する際の標準メタデータ名は以下のとおり(なのでこれらのメタデータを <code><head></code> 要素で指示する場合はなるべく標準の名前を使うべき?)。
</p><ul class="cloud">
<li><code>author</code></li>
<li><code>description</code></li>
<li><code>generator</code></li>
<li><code>keywords</code></li>
</ul><p>
参考:
</p><ul>
<li><a href="http://www.w3.org/TR/2014/CR-html5-20140731/">HTML5(2014-06-17 W3C Cantidate Recommendation)</a></li>
<li><a href="http://ja.opera-wiki.com/Project:HTML5%E6%97%A5%E6%9C%AC%E8%AA%9E%E5%8C%96">Project:HTML5日本語化 - Opera Wiki</a></li>
</ul>
</section>
<section>
<h3>Microdata の基本知識</h3>
<p>
Microdata で利用可能な属性は以下のとおり。
</p><ul class="cloud">
<li><code>itemscope</code></li>
<li><code>itemtype</code></li>
<li><code>itemid</code></li>
<li><code>itemprop</code></li>
<li><code>itemref</code></li>
</ul><p>
これらはグローバル属性として扱われる。
基本的には <code>itemscope</code> 属性を指定した要素で囲まれた部分で <code>itemprop</code> 属性を使ってメタデータを記述していく。
</p>
<!--
<div itemscope itemtype="http://schema.org/Person">
私の名前は <span itemprop="name">Spiegel</span> です。
</div>
-->
<pre class="brush:html" title="Microdata basic"><div itemscope itemtype="http://schema.org/Person">
私の名前は <span itemprop="name">Spiegel</span> です。
</div></pre>
<p>
<code>itemscope</code> 属性の範囲を item と呼ぶ。
item のタイプを <code>itemtype</code> 属性で記述し, item の内容を <code>itemprop</code> 属性で記述する。
</p><p>
item は入れ子にすることで構造化が可能。
</p>
<!--
<article itemscope itemtype="http://schema.org/Article">
[...]
<div itemprop="author" itemscope itemtype="http://schema.org/Person">
Written by <span itemprop="name">Spiegel</span>.
</div>
<article>
-->
<pre class="brush:html" title="Microdata basic"><article itemscope itemtype="http://schema.org/Article">
[...]
<div itemprop="author" itemscope itemtype="http://schema.org/Person">
Written by <span itemprop="name">Spiegel</span>.
</div>
<article></pre>
<p>
<del>更に item 同士は <code>id</code> 属性(グローバル属性)と <code>itemref</code> 属性を使って連結できる。
これによりメタデータを構造化できる? かも?</del>
<code>itemref</code> 属性は <code>id</code> 属性(グローバル属性)で指定した先の情報を include する。
</p>
<!--
<div itemscope itemtype="http://schema.org/Person" itemref="link">
私の名前は <span itemprop="name">Spiegel</span> です。
</div>
[...]
<div id="link">
続きは <a href="https://baldanders.info/profile/" itemprop="url">Web</a> で。
</div>
-->
<pre class="brush:html" title="Microdata basic"><div itemscope itemtype="http://schema.org/Person" itemref="link">
私の名前は <span itemprop="name">Spiegel</span> です。
</div>
[...]
<div id="link">
続きは <a href="/profile/" itemprop="url">Web</a> で。
</div></pre>
<p>
この例では, <code>itemprop="url"</code> で指定した情報が元の item に組み込まれる。
<code>itemref</code> 属性には複数の ID を指定できるらしい?
</p><p>
id-itemref 連携はページ内でしかできない(URI ではないため)。
外部のリソースを指示するには <code>itemid</code> を使う(<span class="offrec">らしいのだが使い方がいまいち分からない。 URN を使った例示はあるが,一般的な URI が使えるのかどうか明示されてない</span>)。
</p><p>
また Microdata の属性はグローバルなので <code><link></code> 要素や <code><meta></code> 要素でも使える。
この場合 <code><link></code> 要素や <code><meta></code> 要素は <code><body></code> 要素内でも使用可能となり,しかも flow content かつ phrasing content として機能するらしい(あまり smart じゃない気がするなぁ)?
</p><p>
Microdata の Validator のようなものはない模様。
その代わり Google が <q lang="en"><a href="http://www.google.com/webmasters/tools/richsnippets">Google Structured Data Testing Tool</a></q> というサービスを行っていて,これである程度は分かるかもしれない。
</p><p>
参考:
</p><ul>
<li><a href="http://www.w3.org/TR/2013/NOTE-microdata-20131029/">HTML Microdata (W3C Working Group Note 29 October 2013)</a></li>
<li><a href="http://schema.org/">schema.org</a></li>
<li><a href="http://kots.jp/blog/site-structured/2585/">Microformats & RDFa – 構造化についてまとめ① | kots blog</a></li>
<li><a href="http://hyper-text.org/archives/2013/01/meta_microdata.shtml">meta 要素に対する Microdata の指定 | WWW WATCH</a></li>
</ul>
</section>
<div class="hreview"><a class="item url" href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CZ711QS/baldandersinf-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/51918WvpWNL._SL160_.jpg" alt="photo" class="photo"/></a><dl><dt class="fn"><a class="item url" href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CZ711QS/baldandersinf-22/">HTML5 スタンダード・デザインガイド~Webサイト制作者のためのビジュアル・リファレンス&セマンティクスによるコンテンツデザインガイド~ [リフロー版]</a></dt><dd>エ・ビスコム・テック・ラボ </dd><dd>マイナビ 2013-02-14</dd><dd>評価<abbr class="rating" title="4"><img src="https://images-fe.ssl-images-amazon.com/images/G/01/detail/stars-4-0.gif" alt=""/></abbr> </dd></dl><p class="similar"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CZ711R2/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00CZ711R2.09._SCTHUMBZZZ_.jpg" alt="CSS3 スタンダード・デザインガイド【改訂第2版】 [リフロー版]"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CALAWC8/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00CALAWC8.09._SCTHUMBZZZ_.jpg" alt="よくわかるJavaScriptの教科書 (教科書シリーズ)"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00BPLSH9E/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00BPLSH9E.09._SCTHUMBZZZ_.jpg" alt="jQueryデザインブック 仕事で絶対に使うプロのテクニック"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00M0ESXUI/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00M0ESXUI.09._SCTHUMBZZZ_.jpg" alt="Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00IWHVLUG/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00IWHVLUG.09._SCTHUMBZZZ_.jpg" alt="これからの「標準」を身につける HTML+CSSデザインレシピ[固定レイアウト版]"/></a> </p><p class="gtools">by <a href="http://www.goodpic.com/mt/aws/index.html">G-Tools</a> , <abbr class="dtreviewed" title="2014/08/22">2014/08/22</abbr></p></div>