-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
433 lines (264 loc) · 21.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>0xff.toBlog()</title>
<meta name="author" content="os0x">
<meta name="description" content="github と github:enterpriseさんのfaviconが見分けがつかないので、Chrome拡張で差し替えることにしました。
画像どうしようかとちょっと悩んだけど、色変えるだけでいいだろうとFireworksを起動するも、色を良い感じに変える方法がわからない…。 元が の通り、 …">
<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="http://os0x.github.com/">
<link href="/favicon.png" rel="icon">
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<script src="/javascripts/modernizr-2.0.js"></script>
<script src="/javascripts/ender.js"></script>
<script src="/javascripts/octopress.js" type="text/javascript"></script>
<script>
(function() {
var s = document.createElement('script');
s.src = 'http://s.hatena.ne.jp/js/HatenaStar.js';
s.onload = function () {
Hatena.Star.Token = '1a7adda9e00f0d5389d7f40cb4bfc227c657858a';
Hatena.Star.SiteConfig = {
entryNodes: {
'#content article': {
uri: '.entry-title a',
title: '.entry-title',
container: '.entry-title'
}
}
};
};
document.getElementsByTagName('head')[0].appendChild(s);
}());
</script>
<link href="/atom.xml" rel="alternate" title="0xff.toBlog()" type="application/atom+xml">
<!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
</head>
<body >
<header role="banner"><hgroup>
<h1><a href="/">0xff.toBlog()</a></h1>
</hgroup>
</header>
<nav role="navigation"><ul class="subscription" data-subscription="rss">
<li><a href="/atom.xml" rel="subscribe-rss" title="subscribe via RSS">RSS</a></li>
</ul>
<form action="http://google.com/search" method="get">
<fieldset role="search">
<input type="hidden" name="q" value="site:os0x.github.com" />
<input class="search" type="text" name="q" results="0" placeholder="Search"/>
</fieldset>
</form>
<ul class="main-navigation">
<li><a href="/">Blog</a></li>
<li><a href="/blog/archives">Archives</a></li>
</ul>
</nav>
<div id="main">
<div id="content">
<div class="blog-index">
<article>
<header>
<h1 class="entry-title"><a href="/2012/04/16/favicon-on-canvas/">Faviconの色をcanvasで変える</a></h1>
<p class="meta">
<time datetime="2012-04-16T16:05:00+09:00" pubdate data-updated="true">Apr 16<span>th</span>, 2012</time>
</p>
</header>
<div class="entry-content"><p>github と github:enterpriseさんのfaviconが見分けがつかないので、Chrome拡張で差し替えることにしました。
画像どうしようかとちょっと悩んだけど、色変えるだけでいいだろうとFireworksを起動するも、色を良い感じに変える方法がわからない…。</p>
<p>元が <img src="https://github.com/favicon.ico"> の通り、白黒なので、トーンカーブ的なものではダメそうで、諦めてcanvasでやることにしました。</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">favicon</span><span class="o">=</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">'img'</span><span class="p">)[</span><span class="mi">0</span><span class="p">];</span>
</span><span class='line'>
</span><span class='line'><span class="kd">var</span> <span class="nx">cv</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'canvas'</span><span class="p">);</span>
</span><span class='line'><span class="nx">cv</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="mi">16</span><span class="p">;</span>
</span><span class='line'><span class="nx">cv</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="mi">16</span><span class="p">;</span>
</span><span class='line'><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">cv</span><span class="p">);</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">c</span> <span class="o">=</span> <span class="nx">cv</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="s1">'2d'</span><span class="p">);</span>
</span><span class='line'><span class="nx">c</span><span class="p">.</span><span class="nx">drawImage</span><span class="p">(</span><span class="nx">favicon</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">16</span><span class="p">,</span> <span class="mi">16</span><span class="p">);</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">data</span> <span class="o">=</span> <span class="nx">c</span><span class="p">.</span><span class="nx">getImageData</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">16</span><span class="p">,</span> <span class="mi">16</span><span class="p">);</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">d</span> <span class="o">=</span> <span class="nx">data</span><span class="p">.</span><span class="nx">data</span><span class="p">;</span>
</span><span class='line'><span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">len</span> <span class="o">=</span> <span class="nx">d</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">len</span><span class="p">;</span> <span class="nx">i</span> <span class="o">+=</span> <span class="mi">4</span> <span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">d</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="mi">255</span><span class="p">;</span>
</span><span class='line'> <span class="nx">d</span><span class="p">[</span><span class="nx">i</span> <span class="o">+</span> <span class="mi">1</span><span class="p">]</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
</span><span class='line'> <span class="nx">d</span><span class="p">[</span><span class="nx">i</span> <span class="o">+</span> <span class="mi">2</span><span class="p">]</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'><span class="nx">c</span><span class="p">.</span><span class="nx">putImageData</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'><span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'a'</span><span class="p">);</span>
</span><span class='line'><span class="nx">a</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="nx">cv</span><span class="p">.</span><span class="nx">toDataURL</span><span class="p">();</span>
</span><span class='line'><span class="nx">a</span><span class="p">.</span><span class="nx">download</span> <span class="o">=</span> <span class="s1">'ge.png'</span><span class="p">;</span>
</span><span class='line'><span class="nx">a</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">cv</span><span class="p">);</span>
</span><span class='line'><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>
<p>うん、簡単だった。</p>
<hr />
<p>ほぼ書き終えていた記事があったので、今更ながら公開…。</p>
</div>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/2012/04/02/why-coffee/">なぜ CoffeeScript がよいか</a></h1>
<p class="meta">
<time datetime="2012-04-02T21:57:00+09:00" pubdate data-updated="true">Apr 2<span>nd</span>, 2012</time>
</p>
</header>
<div class="entry-content"><p><a href="http://subtech.g.hatena.ne.jp/cho45/20120402/1333366338">なぜ CoffeeScript がダメか - 冬通りに消え行く制服ガールは✖夢物語にリアルを求めない。 - subtech</a>について。</p>
<p>いや、本当はこのタイトルにするほど CoffeeScript 推しているわけではないのですが、まあそういう建前で書きます。</p>
<h2>CoffeeScript のメリット</h2>
<h3>簡潔に書ける</h3>
<p>簡潔であるということは、ソースコードにおいて、本質ではない部分を書かなくてよいということで、逆に言えば必要なことだけが書かれている状態に近くなります。少し慣れればむしろ読みやすくなる(と思います)。</p>
<h3>JavaScript の罠を回避できる</h3>
<p>var を忘れた変数がグローバル変数になるとか、変数のホイスティングとか、オブジェクトリテラルの最後のカンマとか、 JavaScript の for in は prototype を辿ってしまう問題とか、JavaScript の等価演算子が曖昧すぎて嵌りやすい問題とかとか、 CoffeeScript を使うだけで回避できる問題が結構あります。読む側(レビューする側)としても、注意する部分が少ないのでだいぶ楽になります。</p>
<h3>書き方がある程度統一される</h3>
<p>インデントが半強制的に揃う。また CoffeeScript を書く場所は実質外部ファイルなので(インラインに CoffeeScript を書く選択肢もないわけではない。 Rails だと coffee-filter とか Barista とか)、インラインにコードを書かれにくくなる。(まあ、 JavaScript で書いちゃえば元も子もないんだけど)</p>
<h2>CoffeeScript のデメリット</h2>
<h3>デバッグしにくい</h3>
<p>CoffeeScript のままデバッグできるようになる予定はあるが、今のところ JavaScript として出力されたコードをデバッグすることになる。ある程度長いコードになるとデバッグが大変になってきます。</p>
<h3>記号が多めだけど、中途半端</h3>
<p>-> や => 、 @ など、記号中心と思わせつつ、3項演算子は if ～ then ～ else ～ と書かなければいけなかったりします。3項演算子のイマイチ感は特に強いですね。</p>
<h3>将来的に廃れる可能性がある</h3>
<p>現在、 ECMAScript6 とかその先の未来の JavaScript について議論が進められており、そこでの CoffeeScript の影響力はすごく大きくなっています。ただ、大きいがゆえに、 ECMAScript が CoffeeScript に近づいていく方向になってきています。というと、 CoffeeScript の長所に聞こえるかもしれませんが、実際は CoffeeScript そのものが採用されるわけではないので、 CoffeeScript は ECMAScript に似た中途半端な言語となってしまう可能性が高くなっています(というような話を edvakf さんが)。</p>
<h2>メリットでもデメリットでもないあたり</h2>
<p>個人的にポイントなのは、生成される JavaScript がかなり読みやすくて、比較的きれいな JavaScript が生成されるところにあると思っています。 GWT や Dart がはき出す JavaScript はとても人間が読み書きできるレベルではないですが、 CoffeeScript の生成する JavaScript はその正反対です。なので、デバッグは思ったほど大変ではないし、あとで CoffeeScript をやめたくなったら生成された JavaScript に乗り換えるだけでよいのです。極端なことを言えば、CoffeeScript はプロトタイピングだけに使って、メンテナンスは JavaScript の状態で行う運用だって可能です。</p>
<p>なので、今だからこそ CoffeeScript を触ってみるのがいいんじゃないかと思っています。 ECMAScript6 の先取りもできますしね。正直 CoffeeScript がベストとは思ってませんし、この先 CoffeeScript をやめるかもしれませんが、そのときは書きだした JavaScript をコミットし直すだけです。安心して触ってみましょう。</p>
</div>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/2012/04/01/new-blog/">Octopressとgithub Pagesを使ったブログ</a></h1>
<p class="meta">
<time datetime="2012-04-01T06:06:00+09:00" pubdate data-updated="true">Apr 1<span>st</span>, 2012</time>
</p>
</header>
<div class="entry-content"><p>はてなダイアリーからの移転先をいくつか検討していたのですが、どれもしっくりこない。。当分放置でいいかなと思いかけていたのですが、ちょうど<a href="http://shogo82148.github.com/blog/2012/03/21/test/">GitHubにブログを設置してみたよ - Shogo’s Blog</a>が目に入って、GitHubに置くのはよさそうだなぁと思い、試してみたのがこちらになります。</p>
<p>設置については、</p>
<ul>
<li><a href="http://mattn.kaoriya.net/software/lang/ruby/20111017205717.htm">Big Sky :: githubとjekyllとoctopressで作る簡単でモダンなブログ</a></li>
<li><a href="http://choplin.github.com/blog/2012/01/04/start-octopress/">github pages + octopressはじめました - 分け入ってもコード</a></li>
<li><a href="http://tokkonopapa.github.com/blog/2011/12/30/octopress-on-github-and-bitbucket/">Octopressのインストールから運用管理まで - T.I.D.</a></li>
<li><a href="http://blog.glidenote.com/blog/2011/11/07/install-octopress-on-github/">GithubとOctopressでモダンな技術系ブログを作ってみる * Glide Note - グライドノート</a></li>
<li><a href="http://tokkono.cute.coocan.jp/blog/slow/index.php/programming/github-pages-almost-perfect-guide/">GitHub Pagesホスティングサービス（ほぼ）完全活用ガイド | ゆっくりと…</a></li>
</ul>
<p>などなど、参考になる記事はたくさんあるので、その辺の話は割愛します。</p>
<p>で、なぜ、はてなダイアリーから移転しようとしているのかというと、はてなブログの登場によりダイアリーのほうは後方互換的なアレになってしまったこと、DOCTYPEがアレで互換モードなのはまだいい(いや良くはないけど、今更互換モードとか逆に趣があるというか)としても、文字コードがeuc-jpなのは…みたいな感じです。素直にはてなブログにしてもいいんですが、面白くないよなーということで、辿り着いたのがOctopress + github Pagesといった感じです。</p>
<p>ただ、 Octopress は静的にHTMLを作ったりするところが Movable Type を彷彿させます。はてなダイアリーを使い始める前は Movable Type をレンタルサーバーに設置とかしていた時期がありまして、その頃にブログに書いていたのは Movable Type の設置方法だとか、カスタマイズがどうこうとか、ブログパーツを設置してみたとか、そういった内容ばかりでした。しばらくはそういったことを楽しんでいたのですが、ふと自分のブログの意味のなさに気がついてしまったわけです。
たぶん、こういった現象は珍しくなくて、Linuxを触ったときもそういった傾向がありました。自由度が高いが故に、そのカスタマイズ自体に時間を取られてしまって、あとで振り返ってみるとすごく狭い範囲しか見えてなかったといった感じです。<a href="http://0xcc.net/misc/bad-knowhow.html">奥が深い症候群</a>や<a href="http://0xcc.net/blog/archives/000196.html">yak shaving</a>と少し似ています。</p>
<p>で、 Octopress はかなり自由度が高いので、ちょっと警戒しています。うっかりカスタマイズに時間を取られてしまう予感がしています。まあ、今ならその辺を意識してコントロールできそうなので、しばらくは続けてみようかと思っています。</p>
</div>
</article>
<div class="pagination">
<a href="/blog/archives">Blog Archives</a>
</div>
</div>
<aside class="sidebar">
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
<a href="/2012/04/16/favicon-on-canvas/">faviconの色をcanvasで変える</a>
</li>
<li class="post">
<a href="/2012/04/02/why-coffee/">なぜ CoffeeScript がよいか</a>
</li>
<li class="post">
<a href="/2012/04/01/new-blog/">Octopressとgithub Pagesを使ったブログ</a>
</li>
</ul>
</section>
<section>
<h1>GitHub Repos</h1>
<ul id="gh_repos">
<li class="loading">Status updating…</li>
</ul>
<a href="https://github.com/os0x">@os0x</a> on GitHub
<script type="text/javascript">
$.domReady(function(){
if (!window.jXHR){
var jxhr = document.createElement('script');
jxhr.type = 'text/javascript';
jxhr.src = '/javascripts/libs/jXHR.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(jxhr, s);
}
github.showRepos({
user: 'os0x',
count: 3,
skip_forks: true,
target: '#gh_repos'
});
});
</script>
<script src="/javascripts/github.js" type="text/javascript"> </script>
</section>
</aside>
</div>
</div>
<footer role="contentinfo"><p>
Copyright © 2012 - os0x -
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>
</footer>
<script type="text/javascript">
var disqus_shortname = 'os0x-github';
var disqus_script = 'count.js';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/' + disqus_script;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#appId=212934732101925&xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript">
(function() {
var script = document.createElement('script'); script.type = 'text/javascript'; script.async = true;
script.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(script, s);
})();
</script>
<script type="text/javascript">
(function(){
var twitterWidgets = document.createElement('script');
twitterWidgets.type = 'text/javascript';
twitterWidgets.async = true;
twitterWidgets.src = 'http://platform.twitter.com/widgets.js';
document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
})();
</script>
</body>
</html>