草間彌生展

雑記

草間彌生展に行ってきたので画像をアップします。

kusama2017.jp

作品量とそれが持つエネルギーにひたすら圧倒されてきました。

自分のような鈍い人間にも感応させるその迫力。 とにかく執拗なのだ。

無限の網―草間彌生自伝 (新潮文庫)

無限の網―草間彌生自伝 (新潮文庫)

プトレマイオスの「アルマゲスト」

雑記

ローマ帝国時代にエジプト・アレクサンドリアの天文学者プトレマイオスが「アルマゲスト」という天文学の古典とも言える書物を残している。

アルマゲスト

アルマゲスト

これは150年頃に書かれた天文学と数学の専門書であり、過去、現在、未来を問わずある1日の太陽、月、惑星の正確な位置を算出する方法が記されていた。
西洋社会では12世紀になってこの「アルマゲスト」は「発見」された。
スペインのキリスト教徒が発見したアラビア語版が、ラテン語に翻訳されたことによる。

https://upload.wikimedia.org/wikipedia/commons/3/34/Almagest_1.jpeg

アルマゲストにおいての宇宙観は以下のようなものだ

  • 地球は球体である。

  • ただし、地球は宇宙の中心であり動かない。

  • 地球の大きさは恒星までの距離に比べて極めて小さく、数学的な点として扱うべきである。

2000年前の文明でどうやってこのような理論を構築していったのだろうか。
古代の人も現代人もどちらも生きていく上で重要なことは今が「いつ」なのかを知るということだ。
種をまくのに適しているのか、洪水はくるのか、これから寒くなるのかそれとも暑くなるのか。
それを知るために人々は試行錯誤し星の動きと季節の動きに関連があることに気づいたのだろう。
そして、そのことを知った彼らは未来を見通せるものとして人々を指導する立場に就いたのだろう。

なんにでもパターンを見出そうとする人間の思考回路は、無意識にパターンを見いだせる能力をもつものが未来を予測することができることで生存に有利に働きその結果獲得したものなのだろうか。

以下の動画はアルマゲストの中で記されている理論を視覚化したものだ。
地球を中心に置いているため惑星が逆行する独特の動きをしている。

www.youtube.com

そして、今日の東京の夜空に星は浮かぶことはないため僕らは星をみない。
星をみるとしたらプラネタリウムの箱の中だけだ。
そのときぼくらは未来を予測したりはしない。

参考

137億年の物語―宇宙が始まってから今日までの全歴史

Almagest - Wikipedia

「Q Accelerator」のmanifest.jsonを参考にしてChrome拡張機能の理解を深める

Javascript

はじめに

Chrome拡張機能について「Q Accelerator」のmanifest.jsonを参考にしながら理解を深める記事です。

Q Acceleratorとは

Q Accelerator はQiita上で行番号を表示したり、コピーアイコンを表示したりするChrome拡張機能です。

Qiitaをより便利にするChrome拡張機能をつくりました - Qiita

あーこれほしかったやつだ！って便利機能がだいたい実装されてすごい。

2017/01/25 10:24

Qiitaをより便利にするChrome拡張機能をつくりました - Qiita

最高に便利

2017/01/10 12:36

Qiitaをより便利にするChrome拡張機能をつくりました - Qiita

ここまでの情熱があるならQiita社入れてもらえば

2017/01/10 11:13

Qiitaをより便利にするChrome拡張機能をつくりました - Qiita

increments 入れよ・・・・

2017/01/10 17:13

などの賞賛コメントがついております。

技術的には

Babel, Webpack, Karma, Mocha, Chai, Sinon.JS, Vue.JS, Material Design Lite

を使っています。

Manifest Fileの概要

さて、Manifest Fileを早速みていきましょう。
これがないと拡張機能は動きません。
manifest_versionとかnameとかversionとかは必須項目です。 このあたりの部分はさっと読み飛ばしていきます。
manifest.jsonの詳細は以下のページが参考になりました。

q-acceleratorのmanifest.jsonをみてみましょう。

みていく項目はcontent_scripts、background、browser_action、content_security_policy、permissions、options_ui、web_accessible_resources です。

content_scripts

実行するスクリプトをベージごとに指定できます。
JSだけでなくCSSも指定できます。

  "content_scripts": [
    {
      "matches": [
        "http://qiita.com/",
        "https://qiita.com/" ,
        "http://qiita.com/items",
        "https://qiita.com/items",
        "http://qiita.com/stock",
        "https://qiita.com/stock",
        "http://qiita.com/mine",
        "https://qiita.com/mine"
      ],
      "js": ["content_scripts/article-list-stream-content.js"]
    },
    {
      "matches": [
        "http://qiita.com/tags/*",
        "https://qiita.com/tags/*"
      ],
      "js": ["content_scripts/article-list-tags-content.js"]
    },
    {
      "matches": [
        "http://qiita.com/*/items/*",
        "https://qiita.com/*/items/*",
        "http://qiita.com/*/private/*",
        "https://qiita.com/*/private/*"
      ],
      "js": ["content_scripts/article-content.js"]
    },
    {
      "matches": [
        "http://qiita.com/popular-items",
        "https://qiita.com/popular-items"
      ],
      "js": ["content_scripts/popular-items-content.js"]
    },
    {
      "matches": [
        "http://qiita.com/drafts/new",
        "https://qiita.com/drafts/new"
      ],
      "js": ["content_scripts/drafts-new-content.js"]
    }
  ],

Content Script の制約

こちらがわかりやすいです。
Content Scriptには以下のような制約があります。

● chrome.*APIが一部のものしか用いることが出来ない（公式ドキュメントを参照）
● ページ内で定義されている変数や関数にアクセスができない（DOMにはアクセスできる）

background

バックグラウンドで動作するスクリプトを記述します。
ただし、バックグラウンドページの使用は推奨されていません。
代わりにイベントページを推奨しています。
Background Pages - Google Chrome

  "background": {
    "persistent": false,
    "page": "background/background.html"
  },

browser_action

メニューバーにある拡張機能のボタンがクリックされたときに表示するHTMLを記述します。

https://qiita-image-store.s3.amazonaws.com/0/97014/2823c978-eb44-a5cb-bde1-a42323e98780.png

https://qiita-image-store.s3.amazonaws.com/0/35595/f90d918d-7349-b580-1550-a55863a408d6.png

  "browser_action": {
    "default_popup": "assets/popup.html"
  },

content_security_policy

コンテンツセキュリティポリシー（CSP）。
クロスサイトスクリプティング (XSS) などを防ぐための設定。 ここではsetTimeout(), setInterval(), new Function() を使用するために以下の記述をしている。

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",

permissions

Declare Permissions - Google Chrome
ここではhtml5のストレージ（SessionStorageまたはLocalStorage）を使用するために以下の記述をしている。

  "permissions": [
    "unlimitedStorage",
    "storage"
  ],

options_ui

拡張機能のオプションを設定するHTMLを指定します。

  "options_ui": {
    "page": "assets/settings.html",
    "open_in_tab": true
  },

web_accessible_resources

外部ページ（ここではQiita）で読み込ませたいリソースのパスを指定します。

  "web_accessible_resources": [
    "assets/images/*"
  ]

まとめ

Manifest Fileを読むとなんとなくその拡張機能が何をやっているのかがわかります。
ソースコードを読む前にmanifest.json を読むとコードリーディングがはかどりますね。

ブラウザハック

ブラウザハック

Vue.js の"The Progressive Framework"という設計思想がすごく刺さった

jQueryで書いている現場にVue.js を導入

jQuery で書いている現場にフロントエンドにフレームワークを導入する際、どれを選ぶかということに頭を悩ませてきました。
複雑なフレームワークだと誰もメンテできずに放置されるだろうし、流行らないフレームワークならベストプラクティスやトラブルシューティングな情報が見つからず苦労するだろうし。
導入はシンプルで仕様もそんなに難しくなくて、かつドキュメントなどの情報量がある程度あるフレームワーク、そんなちょうどいい感じのフレームワークを探していました。

で、結局Vue.js に落ち着くことにしました。

jp.vuejs.org

The Progressive Framework

Vue.js の設計思想のひとつに"The Progressive Framework" というものがあります。
これがですね、個人的にすごく刺さったんですね。

直訳すれば進歩的なフレームワークですが、段階的に開発者が機能を選択できるフレームワークという意味です。 フレームワークは重厚で異様に複雑なもの、hello world は出力するのに特化したもの、薄すぎて向こう側が透けて見えそうなものなど様々です。

僕らはチームのメンバーの人数やスキルという問題やアプリケーション固有の複雑といった問題を考慮してフレームワークを選定します。

ただ、これでめでたしめでたしとはならないのがWebアプリケーションというものですね。
フレームワーク選定時に決定した状況は変化します。

最初はシンプルな機能だけだったものがいつの間にかいろんな機能が五月雨に追加されてしまい薄いフレームワークの中に重厚なロジックが詰め込まれている状態に陥ってしまったり。
また、複雑さはある程度高くなるのはわかっているが、サービスローンチまでの開発スピードが要求されるときにあえて重厚なフレームワークを選択したり。
どのフレームワークを選ぶべきかという問題はとても悩ましいものです。
Twitterのようにバックグラウンドをコロコロ変える企業もありますが一度サービスインしたサービスのフレームワークの移行は得てして大変なものです。

この辺の問題をクリアできるように"The Progressive Framework"という思想のもと設計されたのがVue.js です。
必要に応じてステップ・バイ・ステップで複雑さ＝機能を選択できるようになっています。
f:id:snowlong:20170327170314p:plain Vue.js @ LaraconEU - Google スライド

ちょっと画面にAjax的な動きを入れたいのであれば、宣言的レンダリングでVueを宣言してその中にdataやmethodsを追加するだけでjQuery を同じくらい簡単に導入することができます。
宣言的レンダリング

Vue.js の作者Evan YouがVue.js の設計思想について語っています。

アプリケーション開発者に必要な機能を選択させるというのはわりと誰でも思いつくことなのですが、Vue.js はそれがきちんと実装されていていいですね。

Learning Vue.Js 2

Learning Vue.Js 2

プログラマー35歳定年説

押し出されてるのか引き寄せられてるのかわからないが、段々とひとつの業務に集中できなくなってきている。

それは、自分の経験がそうさせているのかもしれないし誰かが求めているからかもしれない。

それを人は成長というのかもしれないが、同時にそれは人生の打ち止めとも言える。 そんな気がする。

誰も行かないところに行こうと決めたのに誰かが踏み歩いた道に続こうとしていることに不安を感じる。

問題は個人的にはどちらでもいいと自分が思っているからだ。
どちらも本当は求めてないし、人に求められるのならそちらに進もうかと安易に針路をとっていないか。

針路があるだけで幸せなのかもしれない。 最後の選択肢は20代後半だと誰かが言った。 もしそれが本当ならまだ選択肢のある自分は幸せなのかもしれない。

幸せ？それは何か？
自分はそれに幸せと感じていないのに他人と比較して幸せだから幸せだと思えというのか。

そもそも幸せになりたいのか、俺は。

とかそういうことを考えている。 いや、考えているというか迷っている。

自分は今年で定年だ。

プログラマー35歳定年説。

それは、嘘であり真実でもある。

自分がだいたいなんなのかどこらへんの人なのかはわかった。
絶望した。諦めた。
まあなんでもいい。

いつの間にか技術を高めることは何かの逃避になっていた。
それは30を目前にしてこの道を選んだ時からそうだったのかもしれない。

うん、先はわからないしそれは昔からそうだった。
次の駅で降りなきゃいけない。
考えるのはまた今度にしよう。

ハイフンぽい文字列をUnicode に変換してそれを「全角の長音」に変換する

JavaScript

文字列をUnicode に変換して置換する

ここではJavascriptでハイフンぽい文字列をUnicode に変換してそれを「全角の長音」に変換する例を示します。

Unicode ⇔ 文字列 への相互変換

“\uXXXX"形式の4桁の16進数を文字に変換

String.fromCharCode(0xff0d); // "－"

文字を"\uXXXX"形式の4桁の16進数で表すに変換

"－".charCodeAt(0).toString(16); // "ff0d"

正規表現で置換する処理に応用

var h = v.replace( /[‐－−―]/g, 'ー');

は以下のように表すことができます。

v.replace(/[\u2010\uff0d\u2212\u2015]/g, '\u30fc');

検証

"‐－−―".replace(/[\u2010\uff0d\u2212\u2015]/g, '\u30fc');

参考

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp#Special_characters_in_regular_expressions https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで