ChromeでSassがコンパイルした結果のCSSから元のSCSSの場所を見つける

hamalog:

Chromeのexperimentalな機能で、Sassのコンパイルした結果のCSSから、SCSSファイルを参照できるとかなんとかを試した。元記事はこれ

まずChromeで

chrome://flags

とかやるとなんか出るので、

Enable Developer Tools experiments

をオンにする。すると、webkit inspectorの設定に、Experimentalタブが追加されてる。その中で

Support for SASS

をチェック。

Sassのコンパイル時、

sass —debug-info hoge.scss hoge.css

って具合でデバッグ情報を出力するようにする。そんで、そのCSSを普通に読み込むと

http://d.pr/i/fMZ5

あれ、これは・・・

http://d.pr/i/qjE2

オーマイガッド ジスイズクーール!

しかしこのためにCSSに元の部分がどれとか書きだされちゃうんで、ビルドツールつかって、デプロイ時には—debug-infoナシでコンパイルする必要はありんす。

Reblogable 0.0.5 - 「Shift + R」でReblogできるようになったので開発終了

2012/10/18追記: Windowsにおけるキーボードショートカットが変更されていたらしいので修正した。もう一日待てば良かったかもしれない…。

DashboardやLikeのページでポストをReblogできるキーボードショートカットを追加するシンプルなUser Script、Reblogableを0.0.5へ更新。
同時に、最近のTumblr側の更新によりDashboardなどにおいて「AltShift(MacではOption) + R」でReblogできるようになり、「公式で実装されるまでの繋ぎになる」という目的を達成できたので、Reblogableの開発を終了する事にした。

インストール: https://raw.github.com/gist/1609210/reblogable.user.js

※Chromeでセキュリティ強化によりインストールできない場合はこちらを参照

ソースコード: Add shortcut key T for Reblog on Tumblr Dashboard. — Gist

0.0.4とのコードの差分

更新の概要

Tumblr側のReblogのキーボードショートカットの実装は以下の画像の部分のはず。他のキーボードショートカットの実装もjquery.application.jsに移動しているみたい。

この通り、他にも幾つかのキーボードショートカットが追加されているようだ。また、TumblrのDashboardなどではこれまでのPrototypeやscript.aculo.usのeffects.jsに加えて、jquery_with_plugins.jsが示すようにjQueryやjQuery UI Widget、Underscore.js、Backbone.jsなどのJavaScriptライブラリも採用するようになったらしい。

開発終了については、Reblogableでは取り組むべき課題はまだいくつかあるものの、当初の目的は達成できたので良かった。Reblogableを今後も長期的に使いたい人は、環境が変化して動作しなくなった時、GistをForkするなどして改変する事で変化に対応してみると良いと思う。

ちなみに、Reblogableは0.0.4からTumblr側のキーボードショートカットよりもReblogableのキーボードショートカットを優先するようにしたので、Reblogableを編集していてRキーと被ってもReblogableの処理が実行され、Tumblr側の処理(ポストのReblogページを開く)は実行されないようになっている。他のUser Scriptを使っていてRキーでReblogできなくなって困っている人は、そのUser ScriptがTumblrの更新に対応するまでReblogableを使うと良いかもしれない(Reblogableを編集してTキーからRキーを使うようにする必要があるけど)。

CoffeeScriptでの存在確認演算子のコンパイル結果が2パターンある話

hamalog:

if age? ってやつ。これのコンパイル結果が

if (typeof age !== “undefined” && age !== null)

になる場合と

if (age != null)

になる場合がある。

!= null版

typeof版

なんでやねんと話していたら、どうやら「コンパイルするスクリプトにておいて、その変数が使われていたら != null版、それ以外はtypeof版」になるっぽい。

まず、 age != null のチェックは、age が undefined か、null の場合にのみ false を返すらしい。要するに何かセットされているかをチェックするうまい書き方らしい。

参考: [JavaScript] typeof arg == ‘undefined’ っていらないんじゃね? / LiosK-free Blog

で、じゃあなんで typeofうんちゃら っていう長いやつになるかって言うと、その変数がまだ使われていなかった場合、if (age != null) でチェックしちゃうと、age is undefined と、エラーを返されてしまう。ここを typeof age とすれば、変数 age が宣言されていない場合でも、エラーが出ない。

なので、ほんとは全部typeof版でもいいんだけど、既にその変数が使われていたのであれば、それは冗長なので、!= nullにコンパイルしている風。

CoffeeScriptすごい。

追記

ここに色々書いてあった

JavaScript:undefined値の判定 - 泥のように

あと、このissueで説明されてた

existential operator doesn’t check undefined for function argument · Issue #993 · jashkenas/coffee-script

typeofのチェックは、!=よりまじでslowだって言ってる。このissueにあるベンチを見てみたけど、Chromeだと全然差が無かった。しかし、IE6でみてみたところ、確かに圧倒的にtypeofのほうがslowだった。最近のブラウザは進化してそのような差が気にならないぐらい、どちらも爆速になったってことか、たぶん。

typeofが変数の存在確認に使えるの知らなかった…。Strict Modeでもちゃんと使えるみたい。

自分はStrict Modeを使用してJSLintも利用するから変数の存在確認が必要になった事はなかったと思うけど、これはどういう使い所があるんだろう。User Scriptの場合は、サイト側の変数を触る時とかに使えるかな? 大抵はwindowからチェックすれば問題ないけど。

box-shadow と filter: drop-shadow の違い

geckotang:

http://bricss.net/post/33158273857/box-shadow-vs-filter-drop-shadow

を見て日本語でも書いておこうと思って書いた。

でもサンプル見るほうが早いので(たぶん)わかりやすいサンプル作った。

サンプルは↓

スクショ↓

drop-shadowは見たままの影を作ってくれてます。

  • 擬似要素で作った▼も影の形に反映され
  • 透過PNGの透過部分は影にならず
  • 文字もまるでtext-shadowのように。

素敵。

余談

2011年の12月頃にWebKit Nightly Buildsで-webkit-filterが実装されてました。

その頃作ったデモが↓

そして2012年の10月にはChrome、iOS6で-webkit-filterが使えるようになりました。

なぜかbox-shadowと似てると思われ、あまり注目を浴びないdrop-shadowが一番のお気に入りです。

HTMLの進化が1998年に停滞したころ、ブラウザベンダーによって開発されたHTMLのためのAPIの一部がDOM Level 1(1998年)とDOM Level 2 CoreおよびDOM Level 2 HTML(2000年にはじまり2003年に最高潮になる)として規定・発行された。これらの取り組みは2004年に発行されたDOM Level 3仕様とともに次第に弱まっていき、 ワーキンググループはすべてのLevel 3草案を完了する前に閉じてしまった。

2003年に、Webフォームの次世代として位置づけられた技術であるXFormsの公表は、HTMLに代わるものを見つけるよりも、進化するHTML自身に再び関心を巻き起こした。この関心は、Web技術が新しい技術(RSSや後のAtomのような)に限られていたXMLの展開というよりむしろ、実際に展開された技術(HTMLのような)を置き換えるとするところから生まれた。

既存のHTMLウェブページとの非互換なレンダリングエンジンの実装をブラウザに要求することなく、XForms 1.0で導入された多数の特徴を提供することがHTML4のフォームを拡張することで可能であることを示すというコンセプトの証明は、この回帰した関心の最初の結果であった。草案がすでに公に利用可能であって、すべての資源に投入を要請されていた一方、初期の段階では、仕様はOperaソフトウェアの著作権下にあった。

HTMLの進化が再開されるべきであるという意見は2004年のW3Cワークショップで試みられた。ここでHTML5の作業(後述)の基礎となる原則の一部、 前記のフォームに関連した機能をカバーする初期草案の計画と同じく、MozillaとOperaの共同でW3Cに提案された。この計画は以前に選択したWebの進化の方向性と矛盾するものであるとして却下された。代わりに、W3Cスタッフと会員はXMLベースの代替品の開発を継続することを決議した。

その後まもなく、WHATWGと呼ばれる新しい舞台のもとでApple、Mozilla、Operaは共同で作業を継続する意向を発表した。公開メーリングリストが作成され、草案はWHATWGのサイトに移された。その後著作権は3つのベンダー共同が所有するよう修正され、仕様の再利用を可能にした。

WHATWGは複数のコアとなる原則に基づく。特に技術は下位互換性を持つ必要があり、たとえこれが実装よりむしろ仕様が変わることを意味しても仕様と実装は一致する必要があり、仕様は実装が相互にリバースエンジニアリングすることなしに完全な相互運用性を達成可能であることが必要だというものである。

特に後者の要件は、以前にHTML4、XHTML1、 DOM2 HTMLという3つの別な文書で指定された範囲をHTML5仕様が要求した。 それはまた、これまで慣例と考えられていたよりも多くの必要事項を含むことを意味した。

2006年、結局W3CはHTML5の開発に参加することに興味を示し、2007年にHTML5仕様の開発にWHATWGと協力するためのワーキンググループ を設立した。Apple、Mozilla、OperaはW3CにW3Cライセンスのもとで仕様を公開することを許し、WHATWGサイトのバージョンでは制限の少ないライセンスを維持した。

それ以来、両方のグループが一緒に取り組んできた。

Link Extraction 0.2.1

8th713:

変更

  • Event Page を使用するようにした。

修正

  • デザインが崩れてしまったので直した。

ダウンロード

Event Page 来ましたね!!

前回の更新で「来たら対応します」って書いたらまさか3日で来るとかタイミングが酷いですね。それはともかく Event Page とは何ぞやというのを少し補足します。

不必要なプロセス

Chrome を使っていてタスクマネージャを開くとタブを一枚しか開いてなくても chrome.exe というプロセスがいっぱいあってビックリというのはよく聞く話です。これらのプロセス中にはブラウザ起動時になんらかの処理(例えば、コンテキストメニューを作る)をしてその後は何もせず居座り続けるだけのプロセスが存在します。

求めよ、さらば与えられん

プロセスはただ存在するだけでちょっとのメモリを使用します。細かいことが気になっちゃう人や潔癖症な人は「用がすんだなら消えろ」とずっと願い続けてきました。この問題を解決するべく用意されたのが「Event Page」です。Event Page は不必要になると空気を読んで消えてくれます。呼べばいつでも現れます。そしてまた何も言わずに消えて行くのです。その姿はまるで都合のいい女のようです。

でも万能ではない

いい事ずくめに見える Event Page もちょっとだけ欠点があるかもしれません。プロセスの起動がボトルネックになって実行がちょっと遅い可能性があります。なので頻繁に使う拡張(無限スクロール系とかマウスジェスチャ系)などではプロセス常駐のほうがいいのかなとおもいます。また都度破棄されるためグローバル変数に依存したコードで不具合が生じる場合もあるかもしれません。

chrome-ntp-icon と chrome-ntp-launcher は何処からの参照なのか

tetsuwo:

Google Analytics の解析画面

Chrome 拡張機能やアプリの解析をみていると上図のような文字列(chrome-ntp-iconchrome-ntp-launcher)をよくみかけます。

これは Chrome ブラウザーの何処かからのアクセスなのだろうと推測できるのですが、実際は具体的な場所は知らなかったため、調べてみました。

新しいタブを開くと下図のようになると思います。

新しいタブ

このページには下図の赤枠ような Chrome Web Store のロゴ入りアイコンが二つあります。

新しいタブ:Chrome Web Store

この二つのアイコンのリンク先をみると、それぞれ utm_source に chrome-ntp-icon と chrome-ntp-launcher が付いていることが確認できました。

つまり、こういうことになりそうです。

item                 value
chrome-ntp-icon     新しいタブページのアプリと同列に並んでいるアイコンからの流入
chrome-ntp-launcher 新しいタブページの下部のランチャーからの流入

なるほどなるほど。

ついでに ntp = New Tab Page ということっぽいですね。

cineraria-jp:

poochin:

hkdmz:

cineraria:

ある時刻のdashboardに戻る方法

どうでもいいけど俺のreblogがキャプチャされてるのは意図的なのか。

よく Tombloo パッチを作成している polygonplanet さんの tumblelog  polygonplanet.tumblr.com では post id を使って Dashboard へのリンクを作成しているので、その手法を使ってはどうでしょう。

polygonplanet さんのところを見ました。javascriptでpost_id+1のリンクを作っているみたいです。時間があるときに切り取り線のテーマをいじってみます。

バファリンの半分はやさしさでできているが如くセミナーの半分以上は善意でできている

hamalog:

何やらイラついたことがあったので書いておきます。

Web業界界隈で働いしている人には、有料無料問わず、セミナーに参加されたことがある人が多いと思うのですが、このようなセミナー、特に無料だったりするものは、そもそも直接の利益を出すことが殆んど無理なのです。多くの場合は、スポンサーにお金を出してもらい、開催されたりする形になるでしょう。有料でもそれは同じ。でかいホールを借りるのには一日でも数十万はかかるし、登壇する人が食っていけるだけのフィーを出すのは、参加費だけで計上するのは殆んど無理に近いのです。

では、そのうようなセミナーをなぜやるのかというのは、その殆どが善意です。こんな技術があるので紹介したいとか、みんなに伝えたいことがあるとか、オーガナイザーも登壇者も、そういう気持ちで臨んでる人が殆どを占めているはずです。少なくとも、私が会ってきた人達のほぼ全ては、そのような人らだった。そして、そのようなセミナーを開催される人、登壇する人らには敬意を払わざるをえないです。

しかしながら、そのように善意だけでメシが食っていけないのも事実。ではどうするかというのは、各人のビジネスプランですが、例えば結構いい値段のする少人数向けレクチャーを宣伝したり、自著を宣伝したり、受託案件の受注を狙ったりなどなどです。まぁ、そんなこんなで「セミナーの半分以上は善意でできている」と僕は思ってます。

数ヶ月前、アメリカにjQuery conference, node conferenceを聞きに行きましたが、そのような場でもそれは同様です。いや、僕の感覚では、登壇者がそれ自身を楽しみ、コミュニケーションするという側面は、日本で開催されているセミナーらよりも、もっと強かったと感じられ、非常に印象的でした。(そのレポートはCodeGridに書いたので興味があればーと微妙に宣伝)

誰しもそうだと思うんですが、Webにおいて、開発者らを支えているのはオープンな技術と、それを共有してくれる偉大な先人らだったりするわけですよね。

だから、うちはなんちゃらの元祖だから他のやつらがうちらのことを真似るのは我慢ならないなどとくだらないことを言い、他のセミナーや同業種の他者にケチをつけ、方方に迷惑をかけたりしているのを見かけたら、少なくとも僕はそのような人らを信頼することは無いでしょう。

jQuery conferenceで聞いてきたこの超すごいMVCの考え方を日本で広めたのはオレなんで、それを真似してセミナーを開催しようなど我慢ならない - などと僕が言ったとして、それがどれだけ滑稽か、分かるでしょう? Webの技術において、そのようなクローズドな考えは、これからもずっと適すことはないでしょう。

こんなことを考えていました。

tmbrtext for tumblrはもともと自分が使いやすいものが欲しくて作りました。
2011年末のTDMにて、発表者の方々が楽しそうで、とてもうらやましかったってのもあります。
そこから開発をスタートして半年後にリリースしました。

そんなきっかけなので、自分のアプリでtumblrを普及させたいとかそういった高尚なモチベーションは持ってません。あなたのために作ったものではなく、自分用のものをお裾分けしてるような感覚でいます。おいしいと言われれば、また分けたくなるし、まずいと言われれば、もうあげたくないです。


アホなユーザは公式アプリ使ってください。
既存のアプリが使いにくかったら自分で作ってください。


tumblr gear、tumblife、開発終了とのことおつかれさまでした。
tumblr gearにはtumblrと出会うきっかけを、tumblifeにはアプリ開発のヒントをいただきました。
どちらのアプリも大変お世話になりました。

App Storeからtumblr gearが消えて、いつも見ていたアイコンが無いことがとても寂しいです。

そんなことを考えていました。

(via tmbrtext)

Tumblr新ダッシュボードで『カスタマイズ』が見当たらない件

chips-tips:

     

2012年9月8日(日本時間)にアナウンス&変更がありました。

また部分的に変わったのかなーと眺めていたところ、サイドバーにあったカスタマイズページへのリンクが行方不明に。

     

メインTumblrは↑のようにカスタマイズページ直通になってますが、
サブのTumblrは一体どこから・・・ってことで探したらありました。
ダッシュボードのヘッダメニューアイコン、設定⇒サブのTumblrを選択。

     

メインのほうもこちらからカスタマイズページへリンクが繋がってます。
ついでに予約投稿の設定もこっちにまとめられてたり。

なんだか気になったので取り敢えずメモでした。

staff:

The brand new mobile blog: completely redesigned for faster browsing, cleaner reading, and easier sharing.

  • Like and reblog directly from index page
  • Share posts through Facebook, Twitter, or email
  • Built-in support for Pages
  • Full-width images and infinite scrolling

人生という名のインターネットはむずかしい

youkoseki:

インターネットむずかしい。最近ほんとうにそう思ってます。インターネットはどんどんむずかしくなっている。

私は技術に関しては楽観主義者で、インターネットがより良い未来をもたらしてくれると思っていたし、今もそう思ってネット関連企業で働いている。でも実際、インターネットがどんどん大きな存在になって、カリカリした技術的なところと、ウェットな社会的なところと、なんとも形容しがたい政治的なところがグツグツと煮込まれていく様を見ると、インターネットむずかしいと思う。

ウェブ2.0というトレンドが生まれて、個人が情報を発信して、個人が能動的に情報を取捨選択するようになった。これはもうみんなナチュラルに受け止めているが、本当にすごいことだ。たとえその結果が誰の望まぬ炎上や、心ないデマの氾濫だったとしても。個人が個人として声をあげられる。すごい。

ただそうやって、色々な人の生活や行動様式が見えるようになって、人生をどう生きるかという指針はむしろ見えづらくなったように感じる。情報量が増えて、情報中毒だとか言われるけれど(情報中毒社会サバイバルガイド!)、それ以上に深刻なのは、個人のさまざまな生活が明らかになって、人との比較を意識しながら生きることが求められるようになった点かもしれない。

たとえば人の親になって思うのは、今日ほど子供に説教をするのに難しい時代はなかったのでは、ということだ。私の場合、祖父がたいへんな読書家で、賢くなるためには本を読むべしといつも言っていた。おかげで私も読書が好きだし、本を読むのは基本的にいいことなのだと思っている。しかし、インターネットにはたくさんの読書家がいて、まあなんというか、この人これだけたくさん本を読んでてどうしてこうなっちゃうの、という人も少なくない。同じような例で、名門と言われる大学を出ておいてダメな人とか、一流と言われる企業で大変そうな生活の人とか、インターネットにはそういう人達がたくさんいる。反対に、たとえば大学をドロップアウトして成功した人とか、全然だめな生活を送ってるのに楽しそうな人とか、そういう人生も見つけられる。

同い年で自分よりすごい人もたくさんいるし、ぜんぜんだめな人もたくさんいる。自分がかつて抱いていたような夢をとっくに叶えている人もいれば、かつて尊敬していた人がだめになっていく様も目にする。上には上がいて、下には下がいる。そういうことはみんな知ってるつもりでも、偉人の伝記を読むのとは違って、今日ではソーシャルメディアを通じて、一人一人のリアルが伝わってくる。この実態を思えば、いわゆるソーシャル疲れとか、あしあとや挨拶に疲れたとかいう話は表層的なもので、むしろ考えるべきは人間のリアルがどんどん記録され蓄積され分類される社会と、どう付き合っていくのかという問題になる。

自分と似た人を見つけるのはつらい。自分は特別でないと気付かされる。映画を観たあと、自分がもやっと思ったことをパリッと書いたレビュー記事を見つけるのはつらい。新しいことをはじめようと思ったら、それを極めている人の解説が見つかってしまう。今日も誰かが成功して持ち上げられ、誰かが語られることなく失敗していく。それを読んでいる自分。インターネットは、自分が凡庸であることを再認させる装置となりつつある。自分はインターネットになにかを残す価値があるのだろうか。この毎日はガイシュツではないだろうか。この生き様はブックマークを集めるに足るものだろうか。

適当なことを言うけれど、もしかしたら日本は総中流と呼ばれる時代が長かったため、他人と比較して生きるということにナイーブなのかもしれない。だとしたら、この時代の鋭さに動揺しているのは日本だけなのかも。私だけなのかも。分からない。

でも凡庸なのは悪いことではない。誰かと同じであるからこそ、その人と繋がることができる。同じ趣味の人を見つけて、運が良ければその人と仲良くなれる。見知らぬ人が相手であっても、インターネットに人々のリアルが存在するからこそ、私たちはそのリアルを参考にしてより良い生活を生きていくことができる。たとえば食べログのおかげで美味しいレストランと巡りあえる。その美味しさが、誰かがすでに発見したものであったとしても。インターネットが、ソーシャルメディアがなかったかと思うと、私はたぶん友達の半分も作ることができず、美味しいレストランも面白い本も見つけられず、そのうち孤独で死んでいたと思う。

だからインターネットはもうだめだとか、そういうことを言うつもりはぜんぜんないし、そういうことを言うひとは本当にちょっと待ってよく考えてくれよと言いたい。ただ、インターネットはむずかしい。これほど人のリアルが蓄積されていて、私はそれをどう活用すればいいのか、ましてやそこになにかを足すことなどできるのかと。

そういうわけで、けっきょくのところ他人はさておき、好きに生きるしかないという凡庸な結論に辿りつきつつある。他人は他人、自分は自分で、好きなことを見つけて生きていける人達は強い。いつでも他人の声を聞けるようになった今、他人の声に耳を傾けない(こともできる)人が強いというのは、なかなか面白い。あるいは、自分の行動や発言が凡庸かどうかを気にしない人は(多少疎ましいことはあっても)強い。すこし前までのインターネットは、元ネタ探しゲームというか、こういうの前もあったよねと指摘する人が勝者という感じだったけど、今は何周目のネタでもやりきった人の勝ちという感じになりつつある。いいことなのだろう。

たぶん、私の子供の世代は、それはもうたくさんのリアルがインターネットに蓄積されているのを見て、見て見ぬふりをして、好きに生きて行けるのだろう。ちょうど私達が図書館を見て、面白い本はたくさんあるだろうけど全部読むのは無理だよね、と諦められるように。でも私は、インターネットが好きで、どんどん大きな存在になっていくのを楽しんで、今はその大きさに圧倒されている。インターネットに存在するリアルなあれこれに悩むより、リアルそのものを楽しむためのインターネットという風に頭を切り替えるべきなのだろう。インターネットなんて結局はツールなんだから。重要なのは人生のほうじゃないか。いや、でも、インターネットはそれ以上のものだったのではないか? そんな簡単に切り替えられるだろうか。インターネットはむずかしい。

Prev