<?xml version="1.0" encoding="UTF-8"?>
<rdf:RDF
 xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 xmlns="http://purl.org/rss/1.0/"
 xmlns:content="http://purl.org/rss/1.0/modules/content/"
 xmlns:taxo="http://purl.org/rss/1.0/modules/taxonomy/"
 xmlns:dc="http://purl.org/dc/elements/1.1/"
 xmlns:syn="http://purl.org/rss/1.0/modules/syndication/"
 xmlns:admin="http://webns.net/mvcb/"
 xmlns:atom="http://www.w3.org/2005/Atom"
>
<channel rdf:about="http://blog.livedoor.jp/creaism/">
<title>[μ] Creaism.Blog</title>
<link>http://blog.livedoor.jp/creaism/</link>
<description>家族と地元をこよなく愛するWEB&amp;インフラSEの日記。
</description>
<dc:language>ja</dc:language>
<admin:generatorAgent rdf:resource="http://blog.livedoor.com/?v=2.0" />
<atom:link rel="hub" href="http://pubsubhubbub.appspot.com" />
<items>
 <rdf:Seq>
  <rdf:li rdf:resource="http://blog.livedoor.jp/creaism/archives/50436637.html" />
  <rdf:li rdf:resource="http://blog.livedoor.jp/creaism/archives/50436466.html" />
  <rdf:li rdf:resource="http://blog.livedoor.jp/creaism/archives/50435791.html" />
  <rdf:li rdf:resource="http://blog.livedoor.jp/creaism/archives/50436025.html" />
  <rdf:li rdf:resource="http://blog.livedoor.jp/creaism/archives/50435483.html" />
  <rdf:li rdf:resource="http://blog.livedoor.jp/creaism/archives/50435672.html" />
  <rdf:li rdf:resource="http://blog.livedoor.jp/creaism/archives/50435454.html" />
  <rdf:li rdf:resource="http://blog.livedoor.jp/creaism/archives/50435426.html" />
  <rdf:li rdf:resource="http://blog.livedoor.jp/creaism/archives/50435161.html" />
  <rdf:li rdf:resource="http://blog.livedoor.jp/creaism/archives/50430051.html" />
 </rdf:Seq>
</items>
</channel>
<item rdf:about="http://blog.livedoor.jp/creaism/archives/50436637.html">
<title>気分転換のつもりが、気付いたらがっつりと、ブログデザインを更新してた件 ～ livedoor Blog カスタマイズ ～</title>
<link>http://blog.livedoor.jp/creaism/archives/50436637.html</link>
<description>タイトルの通りなんですが、、、
とあるサイト作ろうと色々調べてたら、煮詰まってきて、
気分転換に、ブログのデザインをポツポツと弄ってたら、
いつの間にか、がっつりとデザイン更新してました xp 

折角、HTML5読書会に参加したから、CSS3を取り入れたいよな・・・とか...</description>
<dc:creator>creaism</dc:creator>
<dc:date>2012-02-05T09:30:05+09:00</dc:date>
<dc:subject>徒然日記</dc:subject>
<content:encoded><![CDATA[<h3>タイトルの通りなんですが、、、</h3>
とあるサイト作ろうと色々調べてたら、煮詰まってきて、<br>
気分転換に、ブログのデザインをポツポツと弄ってたら、<br>
いつの間にか、がっつりとデザイン更新してました xp <br>
<br>
折角、<a href="http://blog.livedoor.jp/creaism/archives/50436025.html">HTML5読書会に参加した</a>から、CSS3を取り入れたいよな・・・とか。<br>
昨年流行ったフッターデザインも、取り入れてみるか・・・とか。<br>
他の記事へのナビゲーションが弱いから改良したいよな・・・とか。<br>
考え出したら止まらなくなって。てへぺろ（・ω＜）<br>
<br>
<h3>ひとまず、納得のいくトコまで出来たので、、、</h3>
旧デザインと、新デザインのキャプチャを乗せておきます。<br>
<br>
基本的なカラーセットとかは、一切変えてないので、<br>
パッと見、あまり変わってないように見えますが...orz<br>
結構、力入れて更新した（結果的に）ので、備忘録として :-)<br>
<br>
<h4>新デザイン</h4>
<a href="http://livedoor.blogimg.jp/creaism/imgs/b/3/b39ba7f6.png" title="Creaism_Blog_New" target="_blank" class="none"><img src="http://livedoor.blogimg.jp/creaism/imgs/b/3/b39ba7f6-s.png" width="340" height="1015" border="0" alt="Creaism_Blog_New" hspace="5" class="pict"  /></a><br />
<br>
<h4>旧デザイン</h4>
<a href="http://livedoor.blogimg.jp/creaism/imgs/6/7/677bf561.png" title="Creaism_Blog_old" target="_blank" class="none"><img src="http://livedoor.blogimg.jp/creaism/imgs/6/7/677bf561-s.png" width="340" height="935" border="0" alt="Creaism_Blog_old" hspace="5" class="pict"  /></a><br />
<br>
<h3>追記</h3>
さて、とあるサイトの作成を再開するか。<br>
<br>
<img src="http://counter2.blog.livedoor.com/c?ro=1&act=rss&output=no&id=200511&name=creaism&pid=50436637" width="1" height="1" />
]]>
</content:encoded>
</item>
<item rdf:about="http://blog.livedoor.jp/creaism/archives/50436466.html">
<title>日本ツインテール協会公式サイト？！</title>
<link>http://blog.livedoor.jp/creaism/archives/50436466.html</link>
<description>
日本ツインテール協会公式サイト

正に、俺得です。本当にありがとうございます。

ツインテール宣言 via.日本ツインテール協会
“いくら長生きしても、最初の二十年こそ人生の一番長い半分だ。”
あるイギリス人の詩人は人生のエッセンスをそんな風に語った。

いくら歳を...</description>
<dc:creator>creaism</dc:creator>
<dc:date>2012-02-03T23:15:38+09:00</dc:date>
<dc:subject>徒然日記</dc:subject>
<content:encoded><![CDATA[<a href="http://twintail-japan.com/" target="_blank" class="none"><img src="http://livedoor.blogimg.jp/creaism/imgs/4/9/49ecc010.jpg" width="320" height="198" border="0" alt="twintail-japan" class="pict"  /></a><br />
<a href="http://twintail-japan.com/" target="_blank">日本ツインテール協会公式サイト</a><br>
<br>
<h3>正に、俺得です。本当にありがとうございます。</h3>
<br>
<h4>ツインテール宣言 via.日本ツインテール協会</h4>
<blockquote>“いくら長生きしても、最初の二十年こそ人生の一番長い半分だ。”<br>
あるイギリス人の詩人は人生のエッセンスをそんな風に語った。<br>
<br>
いくら歳を重ねても決して忘れることのない十代の思い。<br>
それは時に、雨の日の匂いや秋の朝の寒さ、<br>
通り過ぎる人のシャンプーの香りとともに私たちの心に蘇り、<br>
あの切なさや恥ずかしさ、いたいけな喜びを生々しく思い出させる。<br>
<br>
<b>遠く淡い、恋い焦がれた日の記憶を呼び覚ますヘアスタイルがこの国にはある。</b><br>
<b>敢えて言おう、ツインテールであると。</b><br>
<b>我々、日本ツインテール協会は今日ここに宣言する。</b><br>
<br>
男性たちはツインテールを待っている。<br>
ツインテールは女性たちを待っている。<br>
<br>
我々、日本ツインテール協会は今日ここに宣言する。<br>
この魅力的なヘアスタイルを、新たなる文化として全霊をもって広めていくことを。<br>
<br>
我々、日本ツインテール協会は今日ここに宣言する。<br>
ツインテールで日本の女性を、いや、この国に暮らす人々全ての心を<br>
もっと美しく、もっと元気に、もっと楽しくすることを。<br>
<br>
2012年2月2日<br>
日本ツインテール協会 </blockquote>
<br>
清々しいまでの、ツインテール愛。<br>
<br>
<img src="http://counter2.blog.livedoor.com/c?ro=1&act=rss&output=no&id=200511&name=creaism&pid=50436466" width="1" height="1" />
]]>
</content:encoded>
</item>
<item rdf:about="http://blog.livedoor.jp/creaism/archives/50435791.html">
<title>[まとめ][静岡][勉強会] 静岡県内のWeb/IT系勉強会（読書会等も含む）をまとめてみた。</title>
<link>http://blog.livedoor.jp/creaism/archives/50435791.html</link>
<description>もくじ

全般系
言語系
プラットフォーム系
番外編
まとめサイト


全般系
静岡ITPro勉強会

http://shizuoka-itpro.techtalk.jp/


静岡Developer's 勉強会

http://www.haskell.shizu-dev.org/


エンジニア◎リング

http://groups.google.com/group/enginee-ring


静岡W...</description>
<dc:creator>creaism</dc:creator>
<dc:date>2012-01-31T00:24:51+09:00</dc:date>
<dc:subject>勉強会・講習</dc:subject>
<content:encoded><![CDATA[<h3>もくじ</h3>
<ul>
<li>全般系</li>
<li>言語系</li>
<li>プラットフォーム系</li>
<li>番外編</li>
<li>まとめサイト</li>
</ul>
<br />
<h3>全般系</h3>
<h4>静岡ITPro勉強会</h4>
<a href="http://shizuoka-itpro.techtalk.jp/" target="_blank" class="none"><img title="静岡ITPro勉強会" src="http://capture.heartrails.com/320x198?http://shizuoka-itpro.techtalk.jp/" alt="http://shizuoka-itpro.techtalk.jp/" width="320" height="198" class="pict"/></a><br />
<a href="http://shizuoka-itpro.techtalk.jp/" target="_blank">http://shizuoka-itpro.techtalk.jp/</a><br />
<br />
<br />
<h4>静岡Developer's 勉強会</h4>
<a href="http://www.haskell.shizu-dev.org/" target="_blank" class="none"><img title="静岡Developer's 勉強会" src="http://capture.heartrails.com/320x198?http://www.haskell.shizu-dev.org/" alt="http://www.haskell.shizu-dev.org/" width="320" height="198" class="pict"/></a><br />
<a href="http://www.haskell.shizu-dev.org/" target="_blank">http://www.haskell.shizu-dev.org/</a><br />
<br />
<br />
<h4>エンジニア◎リング</h4>
<a href="http://groups.google.com/group/enginee-ring" target="_blank" class="none"><img title="エンジニア◎リング" src="http://capture.heartrails.com/320x198?http://groups.google.com/group/enginee-ring" alt="http://groups.google.com/group/enginee-ring" width="320" height="198" class="pict"/></a><br />
<a href="http://groups.google.com/group/enginee-ring" target="_blank">http://groups.google.com/group/enginee-ring</a><br />
<br />
<br />
<h4>静岡WEBデベロッパーフォーラム</h4>
<a href="http://groups.google.com/group/swebdev" target="_blank" class="none"><img title="静岡WEBデベロッパーフォーラム" src="http://capture.heartrails.com/320x198?http://groups.google.com/group/swebdev" alt="http://groups.google.com/group/swebdev" width="320" height="198" class="pict"/></a><br />
<a href="http://groups.google.com/group/swebdev" target="_blank">http://groups.google.com/group/swebdev</a><br />
<br />
<br />
<h4>デジタルアシストWeb勉強会</h4>
<a href="http://shizuoka-benkyo.com/" target="_blank" class="none"><img title="デジタルアシストWeb勉強会" src="http://capture.heartrails.com/320x198?http://shizuoka-benkyo.com/" alt="http://shizuoka-benkyo.com/" width="320" height="198" class="pict"/></a><br />
<a href="http://shizuoka-benkyo.com/" target="_blank">http://shizuoka-benkyo.com/</a><br />
<br />
<br />
<h4>TalkNote（トークノート）という名の勉強会</h4>
<a href="http://talknote.me/" target="_blank" class="none"><img title="TalkNote（トークノート）という名の勉強会" src="http://capture.heartrails.com/320x198?http://talknote.me/" alt="http://talknote.me/" width="320" height="198" class="pict"/></a><br />
<a href="http://talknote.me/" target="_blank">http://talknote.me/</a><br />
<br />
<br />
<h4>Knock! Knock! 静岡のWeb制作者のための勉強会</h4>
<a href="http://knock3.hamnaly.com/" target="_blank" class="none"><img title="Knock! Knock! 静岡のWeb制作者のための勉強会" src="http://capture.heartrails.com/320x198?http://knock3.hamnaly.com/" alt="http://knock3.hamnaly.com/" width="320" height="198" class="pict"/></a><br />
<a href="http://knock3.hamnaly.com/" target="_blank">http://knock3.hamnaly.com/</a><br />
<br />
<br />
<h3>言語系</h3>
<h4>CSS Nite in SHIZUOKA</h4>
<a href="http://cssnite-shizuoka.jp/" target="_blank" class="none"><img title="CSS Nite in SHIZUOKA" src="http://capture.heartrails.com/320x198?http://cssnite-shizuoka.jp/" alt="http://cssnite-shizuoka.jp/" width="320" height="198" class="pict"/></a><br />
<a href="http://cssnite-shizuoka.jp/" target="_blank">http://cssnite-shizuoka.jp/</a><br />
<br />
<br />
<h4>静岡javaScript勉強会</h4>
<a href="http://atnd.org/events/19418" target="_blank" class="none"><img title="静岡javaScript勉強会" src="http://capture.heartrails.com/320x198?http://atnd.org/events/19418" alt="http://atnd.org/events/19418" width="320" height="198" class="pict"/></a><br />
<a href="http://atnd.org/events/19418" target="_blank">http://atnd.org/events/19418</a><br />
<br />
<br />
<h4>Hamamatsu.rb</h4>
<a href="http://hamamatsu-rb.github.com/" target="_blank" class="none"><img title="Hamamatsu.rb" src="http://capture.heartrails.com/320x198?http://hamamatsu-rb.github.com/" alt="http://hamamatsu-rb.github.com/" width="320" height="198" class="pict"/></a><br />
<a href="http://hamamatsu-rb.github.com/" target="_blank">http://hamamatsu-rb.github.com/</a><br />
<a href="http://groups.google.com/group/hamamatsu-rb" target="_blank">http://groups.google.com/group/hamamatsu-rb</a><br />
<br />
<br />
<h3>プラットフォーム系</h3>
<h4>JAWS-UG 静岡支部</h4>
<a href="http://atnd.org/events/21462" target="_blank" class="none"><img title="JAWS-UG 静岡支部" src="http://capture.heartrails.com/320x198?http://atnd.org/events/21462" alt="http://atnd.org/events/21462" width="320" height="198" class="pict"/></a><br />
<a href="http://atnd.org/events/21462" target="_blank">http://atnd.org/events/21462</a><br />
<br />
<br />
<h4>JAZUG 静岡勉強会</h4>
<a href="http://www.zusaar.com/event/199062" target="_blank" class="none"><img title="JAZUG 静岡勉強会" src="http://capture.heartrails.com/320x198?http://www.zusaar.com/event/199062" alt="http://www.zusaar.com/event/199062" width="320" height="198" class="pict"/></a><br />
<a href="http://www.zusaar.com/event/199062" target="_blank">http://www.zusaar.com/event/199062</a><br />
<br />
<br />
<h4>WordBench静岡</h4>
<a href="http://shizuoka.wordbench.org/" target="_blank" class="none"><img title="WordBench静岡" src="http://capture.heartrails.com/320x198?http://shizuoka.wordbench.org/" alt="http://shizuoka.wordbench.org/" width="320" height="198" class="pict"/></a><br />
<a href="http://shizuoka.wordbench.org/" target="_blank">http://shizuoka.wordbench.org/</a><br />
<a href="http://wordbench.org/groups/shizuoka/" target="_blank">http://wordbench.org/groups/shizuoka/</a><br />
<br />
<br />
<h4>a-blog cms 勉強会 in 静岡</h4>
<a href="http://atnd.org/events/24317" target="_blank" class="none"><img title="a-blog cms 勉強会 in 静岡" src="http://capture.heartrails.com/320x198?http://atnd.org/events/24317" alt="http://atnd.org/events/24317" width="320" height="198" class="pict"/></a><br />
<a href="http://atnd.org/events/24317" target="_blank">http://atnd.org/events/24317</a><br />
<br />
<br />
<h4>日本Androidの会浜松支部</h4>
<a href="http://groups.google.com/group/android-hamamatsu" target="_blank" class="none"><img title="日本Androidの会浜松支部" src="http://capture.heartrails.com/320x198?http://groups.google.com/group/android-hamamatsu" alt="http://groups.google.com/group/android-hamamatsu" width="320" height="198" class="pict"/></a><br />
<a href="http://groups.google.com/group/android-hamamatsu" target="_blank">http://groups.google.com/group/android-hamamatsu</a><br />
<br />
<br />
<h4>CoronaSDK 勉強会 in 掛川</h4>
<a href="http://atnd.org/events/20732" target="_blank" class="none"><img title="CoronaSDK 勉強会 in 掛川" src="http://capture.heartrails.com/320x198?http://atnd.org/events/20732" alt="http://atnd.org/events/20732" width="320" height="198" class="pict"/></a><br />
<a href="http://atnd.org/events/20732" target="_blank">http://atnd.org/events/20732</a><br />
<br />
<br />
<h3>番外編</h3>
<h4>静岡ライフハック研究会</h4>
<a href="http://shizuokalifehack.com/" target="_blank" class="none"><img title="静岡ライフハック研究会" src="http://capture.heartrails.com/320x198?http://shizuokalifehack.com/" alt="http://shizuokalifehack.com/" width="320" height="198" class="pict"/></a><br />
<a href="http://shizuokalifehack.com/" target="_blank">http://shizuokalifehack.com/</a><br />
<br />
<br />
<h4>静岡アクセス解析勉強会</h4>
<a href="http://szanaly.com/" target="_blank" class="none"><img title="静岡アクセス解析勉強会" src="http://capture.heartrails.com/320x198?http://szanaly.com/" alt="http://szanaly.com/" width="320" height="198" class="pict"/></a><br />
<a href="http://szanaly.com/" target="_blank">http://szanaly.com/</a><br />
<br />
<br />
<h3>まとめサイト</h3>
<h4>静岡県のWeb/IT系勉強会</h4>
<a href="http://studymeeting.hamnaly.com/" target="_blank" class="none"><img title="静岡県のWeb/IT系勉強会" src="http://capture.heartrails.com/320x198?http://studymeeting.hamnaly.com/" alt="http://studymeeting.hamnaly.com/" width="320" height="198" class="pict"/></a><br />
<a href="http://studymeeting.hamnaly.com/" target="_blank">http://studymeeting.hamnaly.com/</a><br />
<br />
<br />
最近、静岡県内のIT系勉強会が増えてきて、アツい！！！<br />
っという事で、静岡県内のIT系勉強会をまとめてみました。<br />
本当に静岡県のIT系勉強会、増えましたね！今後が楽しみ♪<br />
こんな勉強会のあるよ！っというのがあれば、是非教えてください。<br />
# 2012/01/30 現在<br />
<br />
<img src="http://counter2.blog.livedoor.com/c?ro=1&act=rss&output=no&id=200511&name=creaism&pid=50435791" width="1" height="1" />
]]>
</content:encoded>
</item>
<item rdf:about="http://blog.livedoor.jp/creaism/archives/50436025.html">
<title>[HTML5][canvas] 静岡Developers勉強会 第3回HTML5読書会の復習 ～Canvasで色々描画～</title>
<link>http://blog.livedoor.jp/creaism/archives/50436025.html</link>
<description>昨日、静岡Developers勉強会 第3回HTML5読書会に参加してきました。
読書会では、以下書籍の第６～８章を行いました。


HTML5＆CSS3実践入門 最新Web標準を使いこなす (The Pragmatic Programmers)
ブライアンP.ホーガン, 高橋 登史朗, 株式会社クイープ
http://www.amazon....</description>
<dc:creator>creaism</dc:creator>
<dc:date>2012-01-30T02:28:13+09:00</dc:date>
<dc:subject>勉強会・講習</dc:subject>
<content:encoded><![CDATA[昨日、静岡Developers勉強会 第3回HTML5読書会に参加してきました。<br>
読書会では、以下書籍の第６～８章を行いました。<br>
<br>
<a href="http://www.amazon.co.jp/dp/4844330489/" target="_blank" class="none"><img src="http://ecx.images-amazon.com/images/I/51QCM4Kuz3L._SX393_CR0,5,390,200_.jpg" alt="HTML5＆CSS3実践入門 最新Web標準を使いこなす (The Pragmatic Programmers)" class="pict"/></a><br>
HTML5＆CSS3実践入門 最新Web標準を使いこなす (The Pragmatic Programmers)<br>
ブライアンP.ホーガン, 高橋 登史朗, 株式会社クイープ<br>
<a href="http://www.amazon.co.jp/dp/4844330489" target="_blank">http://www.amazon.co.jp/dp/4844330489</a><br>
<br>
復習を兼ねて、１番時間を割いた Canvasについて、<br>
当日の実習ファイルを元に、まとめ直してみました。<br>
# 他の章については、別の機会にまとめるかも。Xp<br>
<br>
<br>
<style>
canvas {
    background: #fff;
    border: 1px solid #ccc;
    display: block;
    margin: 1em 0;
    height: 185px;
    width: 320px;
}
</style>
<script type="text/javascript">
// ロード時
window.onload = function(){
    
    (function(eid){
        var cvs = document.getElementById(eid);
        var ctx = cvs.getContext('2d');
        
        ctx.beginPath();
        ctx.arc(50, 50, 40, 0, 2 * Math.PI, false);
        ctx.strokeStyle = "red";    // 赤色
        ctx.stroke();
        
        ctx.beginPath();
        ctx.scale(2, 0.5);          // 横に2倍、縦に0.5倍
        ctx.arc(70, 150, 40, 0, 2 * Math.PI, false);
        ctx.strokeStyle = "blue";   // 青色
        ctx.stroke();
        
        ctx.beginPath();
        ctx.scale(0.5, 2);           // 元に戻す
        ctx.arc(230, 100, 40, 0, 2 * Math.PI, false);
        ctx.strokeStyle = "green";   // 緑色
        ctx.stroke();
        
    })("canvas1");
    
    (function(eid){
        var cvs = document.getElementById(eid);
        var ctx = cvs.getContext('2d');
        
        // 影色の指定
        ctx.shadowColor = "gray";
        // 影を表示する座標
        ctx.shadowOffsetX = 10;
        ctx.shadowOffsetY = 10;
        // 影のぼかし幅
        ctx.shadowBlur = 5;
        // ボックスを描画
        ctx.strokeRect(20, 20, 200, 100);
        // ボックスを塗り潰す
        ctx.fillStyle = "rgb(0, 0, 120)";
        ctx.fillRect(20, 20, 200, 100);
        
    })("canvas2");
    
    (function(eid){
        var cvs = document.getElementById(eid);
        var ctx = cvs.getContext('2d');
        
        ctx.beginPath();
        ctx.strokeStyle = "rgb(200,0,0)"
        //線の太さの指定
        ctx.lineWidth = 20;
        //線の終点の指定
        ctx.lineCap = "round";
        
        ctx.moveTo(25, 25);
        ctx.lineTo(275, 125);
        ctx.stroke();
        
    })("canvas3");
    
    (function(eid){
        var cvs = document.getElementById(eid);
        var ctx = cvs.getContext("2d");
        // Linear Gradient
        var grd = ctx.createLinearGradient(0, 0, 320, 0);
        
        grd.addColorStop(0.0 , 'rgb(255,0,0)');
        grd.addColorStop(0.5 , 'rgb(0,255,0)');
        grd.addColorStop(1.0 , 'rgb(0,0,255)');
        
        ctx.fillStyle = grd;
        ctx.fillRect(0, 0, 320, 185);
        
    })("canvas4");
    
    (function(eid){
        var cvs = document.getElementById(eid);
        var ctx = cvs.getContext("2d");
        // Radial Gradient
        var grd = ctx.createRadialGradient(140,80,20,140,80,80);
        
        grd.addColorStop(0.0 , 'rgb(255,0,0)');
        grd.addColorStop(0.5 , 'rgb(0,255,0)');
        grd.addColorStop(1.0 , 'rgb(0,0,255)');
        
        ctx.fillStyle = grd;
        ctx.fillRect(0, 0, 320, 185);
        
    })("canvas5");
    
    (function(eid){
        var cvs = document.getElementById(eid);
        var ctx = cvs.getContext("2d");
        
        // img要素を生成
        var image = new Image();
        // imageの読み込み
        image.onload = function() {
            // img要素の繰り返しパターン生成
            var pattern = ctx.createPattern(image, "repeat");
            // 塗りつぶしパターンに指定
            ctx.fillStyle = pattern;
            // canvasの描画
            ctx.fillRect(0, 0, 300, 300);
        };
        // img要素読み込み
        image.src = "http://livedoor.blogimg.jp/creaism/imgs/f/9/f99e9a82.png"
        
    })("canvas6");
    
    (function(eid){
        var cvs = document.getElementById(eid);
        var ctx = cvs.getContext("2d");
        var grd = ctx.createRadialGradient(50, 50, 0, 50, 50, 200);
        
        // 球体を描く
        grd.addColorStop(0, "white");
        grd.addColorStop(1.0, "blue");
        ctx.fillStyle = grd;
        ctx.arc(80, 80, 100, 0, 2 * Math.PI, true);
        ctx.fill();
        
    })("canvas7");
    
    (function(eid){
        var cvs = document.getElementById(eid);
        var ctx = cvs.getContext('2d');
        
        // ベジェ曲線を使って、ハートを描く
        ctx.beginPath();
        ctx.moveTo(75,40);
        ctx.bezierCurveTo(75,37,70,25,50,25);
        ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
        ctx.bezierCurveTo(20,80,40,102,75,120);
        ctx.bezierCurveTo(110,102,130,80,130,62.5);
        ctx.bezierCurveTo(130,62.5,130,25,100,25);
        ctx.bezierCurveTo(85,25,75,37,75,40);
        ctx.fillStyle = 'rgb(255,187,255)';
        ctx.fill();
        ctx.clip();
        ctx.restore();
        
    })("canvas8");
}
</script>

<h3>0. 下準備: canvasタグにCSSを設定</h3>
<canvas id="canvas0"></canvas>
<pre><code>canvas {
    background: #fff;
    border: 1px solid #ccc;
    display: block;
    margin: 1em 0;
    height: 185px;
    width: 320px;
}
</code></pre><br>

<h3>円を描く。楕円がポイント。</h3>
<canvas id="canvas1"></canvas>
<pre><code>(function(eid){
    var cvs = document.getElementById(eid);
    var ctx = cvs.getContext('2d');
    
    ctx.beginPath();
    ctx.arc(50, 50, 40, 0, 2 * Math.PI, false);
    ctx.strokeStyle = "red";    // 赤色
    ctx.stroke();
    
    ctx.beginPath();
    ctx.scale(2, 0.5);          // 横に2倍、縦に0.5倍
    ctx.arc(70, 150, 40, 0, 2 * Math.PI, false);
    ctx.strokeStyle = "blue";   // 青色
    ctx.stroke();
    
    ctx.beginPath();
    ctx.scale(0.5, 2);           // 元に戻す
    ctx.arc(230, 100, 40, 0, 2 * Math.PI, false);
    ctx.strokeStyle = "green";   // 緑色
    ctx.stroke();
    
})("canvas1");
</code></pre><br>

<h3>ボックスを描く。影をつける。</h3>
<canvas id="canvas2"></canvas>
<pre><code>(function(eid){
    var cvs = document.getElementById(eid);
    var ctx = cvs.getContext('2d');
    
    // 影色の指定
    ctx.shadowColor = "gray";
    // 影を表示する座標
    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = 10;
    // 影のぼかし幅
    ctx.shadowBlur = 5;
    // ボックスを描画
    ctx.strokeRect(20, 20, 200, 100);
    // ボックスを塗り潰す
    ctx.fillStyle = "rgb(0, 0, 120)";
    ctx.fillRect(20, 20, 200, 100);
    
})("canvas2");
</code></pre><br>

<h3>線を描く。太さとかいろいろ。</h3>
<canvas id="canvas3"></canvas>
<pre><code>(function(eid){
    var cvs = document.getElementById(eid);
    var ctx = cvs.getContext('2d');
    
    ctx.beginPath();
    ctx.strokeStyle = "rgb(200,0,0)"
    //線の太さの指定
    ctx.lineWidth = 20;
    //線の終点の指定
    ctx.lineCap = "round";
    
    ctx.moveTo(25, 25);
    ctx.lineTo(275, 125);
    ctx.stroke();
    
})("canvas3");
</code></pre><br>

<h3>縦軸のグラデーションを描く。</h3>
<canvas id="canvas4"></canvas>
<pre><code>(function(eid){
    var cvs = document.getElementById(eid);
    var ctx = cvs.getContext("2d");
    // Linear Gradient
    var grd = ctx.createLinearGradient(0, 0, 320, 0);
    
    grd.addColorStop(0.0 , 'rgb(255,0,0)');
    grd.addColorStop(0.5 , 'rgb(0,255,0)');
    grd.addColorStop(1.0 , 'rgb(0,0,255)');
    
    ctx.fillStyle = grd;
    ctx.fillRect(0, 0, 320, 185);
    
})("canvas4");
</code></pre><br>

<h3>円形のグラデーションを描く。</h3>
<canvas id="canvas5"></canvas>
<pre><code>(function(eid){
    var cvs = document.getElementById(eid);
    var ctx = cvs.getContext("2d");
    // Radial Gradient
    var grd = ctx.createRadialGradient(140,80,20,140,80,80);
    
    grd.addColorStop(0.0 , 'rgb(255,0,0)');
    grd.addColorStop(0.5 , 'rgb(0,255,0)');
    grd.addColorStop(1.0 , 'rgb(0,0,255)');
    
    ctx.fillStyle = grd;
    ctx.fillRect(0, 0, 320, 185);
    
})("canvas5");
</code></pre><br>

<h3>画像をキャンバスに読み込む。</h3>
<canvas id="canvas6"></canvas>
<pre><code>(function(eid){
    var cvs = document.getElementById(eid);
    var ctx = cvs.getContext("2d");
    
    // img要素を生成
    var image = new Image();
    // imageの読み込み
    image.onload = function() {
        // img要素の繰り返しパターン生成
        var pattern = ctx.createPattern(image, "repeat");
        // 塗りつぶしパターンに指定
        ctx.fillStyle = pattern;
        // canvasの描画
        ctx.fillRect(0, 0, 300, 300);
    };
    // img要素読み込み
    image.src = "butterfly.png"
    
})("canvas6");
</code></pre><br>

<h3>グラデーションで、球体を描く。</h3>
<canvas id="canvas7"></canvas>
<pre><code>(function(eid){
    var cvs = document.getElementById(eid);
    var ctx = cvs.getContext("2d");
    var grd = ctx.createRadialGradient(50, 50, 0, 50, 50, 200);
    
    // 球体を描く
    grd.addColorStop(0, "white");
    grd.addColorStop(1.0, "blue");
    ctx.fillStyle = grd;
    ctx.arc(80, 80, 100, 0, 2 * Math.PI, true);
    ctx.fill();
    
})("canvas7");
</code></pre><br>

<h3>ベジェ曲線を使って、ハートを描く。</h3>
<canvas id="canvas8"></canvas>
<pre><code>(function(eid){
    var cvs = document.getElementById(eid);
    var ctx = cvs.getContext('2d');
    
    // ベジェ曲線を使って、ハートを描く
    ctx.beginPath();
    ctx.moveTo(75,40);
    ctx.bezierCurveTo(75,37,70,25,50,25);
    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
    ctx.bezierCurveTo(20,80,40,102,75,120);
    ctx.bezierCurveTo(110,102,130,80,130,62.5);
    ctx.bezierCurveTo(130,62.5,130,25,100,25);
    ctx.bezierCurveTo(85,25,75,37,75,40);
    ctx.fillStyle = 'rgb(255,187,255)';
    ctx.fill();
    ctx.clip();
    ctx.restore();
    
})("canvas8");
</code></pre><br>
<br>
勉強会では、さらに描画したものを動かしたり、オンマウスで色を変えてみたり、<br>
HTML5のcanvas(+JS)でここまで出来るのか～と、ワクワクした１日でした。<br>
canvas、勉強しなきゃなと思っていたので、良いきっかけとなりました。<br>
この記事が、誰かのきっかけになったら嬉しいなぁ。<br>
<br>
<br>
<img src="http://counter2.blog.livedoor.com/c?ro=1&act=rss&output=no&id=200511&name=creaism&pid=50436025" width="1" height="1" />
]]>
</content:encoded>
</item>
<item rdf:about="http://blog.livedoor.jp/creaism/archives/50435483.html">
<title>[RHEL][CentOS] Linuxのシステム構成を確認するコマンドをまとめてシェルにしてみた</title>
<link>http://blog.livedoor.jp/creaism/archives/50435483.html</link>
<description>ホストのシステム構成情報を取得するコマンド群を、
ひとつのシェルにまとめてみた。

システム構築時等に、これを流しておけば、
タイムスタンプ的に使えると思う。

これもあった方が良いんじゃない？とかあると思うので、
オススメがあったら教えてください。m(_ _)m

#!/...</description>
<dc:creator>creaism</dc:creator>
<dc:date>2012-01-28T00:43:11+09:00</dc:date>
<dc:subject>技術メモ</dc:subject>
<content:encoded><![CDATA[ホストのシステム構成情報を取得するコマンド群を、<br />
ひとつのシェルにまとめてみた。<br />
<br />
システム構築時等に、これを流しておけば、<br />
タイムスタンプ的に使えると思う。<br />
<br />
これもあった方が良いんじゃない？とかあると思うので、<br />
オススメがあったら教えてください。m(_ _)m<br />
<br />
<pre><code>#!/bin/sh
# Execute user "root"
#

DATE=`date +%Y%m%d_%H%M%S`
HOST=`hostname`
LOG="./sys_conf.${HOST}-${DATE}.log"

echo -n "START = "                                           > $LOG
date                                                        >> $LOG
echo ""                                                     >> $LOG

echo "### HostName ###########################"             >> $LOG
hostname                                                    >> $LOG
echo ""                                                     >> $LOG

echo "### OS #################################"             >> $LOG
cat /etc/redhat-release                                     >> $LOG
echo ""                                                     >> $LOG

echo "### Kernel #############################"             >> $LOG
uname -a                                                    >> $LOG
echo ""                                                     >> $LOG

echo "### Memory Size ########################"             >> $LOG
cat /proc/meminfo | head -1                                 >> $LOG
echo ""                                                     >> $LOG

echo "### CPU ################################"             >> $LOG
echo ""                                                     >> $LOG

echo "--- CPU Model --------------------------"             >> $LOG
cat /proc/cpuinfo | grep "model name" | head -1             >> $LOG
echo ""                                                     >> $LOG

echo "--- CPU Physical Count -----------------"             >> $LOG
grep "physical id" /proc/cpuinfo | sort | uniq | wc -l      >> $LOG
echo ""                                                     >> $LOG

echo "--- CPU processor Count ----------------"             >> $LOG
grep "processor" /proc/cpuinfo | wc -l                      >> $LOG
echo ""                                                     >> $LOG

echo "--- CPU Core Count ---------------------"             >> $LOG
grep "cpu cores" /proc/cpuinfo | head -1 | awk '{print $4}' >> $LOG
echo ""                                                     >> $LOG

echo "### Network ############################"             >> $LOG
/sbin/ifconfig -a                                           >> $LOG
echo ""                                                     >> $LOG

echo "### Routing ############################"             >> $LOG
netstat -rln                                                >> $LOG
echo ""                                                     >> $LOG

echo "### DNS - resolv.conf ##################"             >> $LOG
cat /etc/resolv.conf                                        >> $LOG
echo ""                                                     >> $LOG

echo "### NTP - ntp.conf #####################"             >> $LOG
grep "server" /etc/ntp.conf | grep ^[^#]                    >> $LOG
echo ""                                                     >> $LOG

echo "### SMTP ###############################"             >> $LOG
grep relayhost /etc/postfix/main.cf | grep ^[^#]            >> $LOG
echo ""                                                     >> $LOG

echo "### SNMP ###############################"             >> $LOG
egrep "^sysLocation|^syscontact" /etc/snmp/snmpd.conf       >> $LOG
egrep "^community|^trapsink" /etc/snmp/snmpd.conf           >> $LOG
echo ""                                                     >> $LOG

echo "### DISK ###############################"             >> $LOG
## 以下は、/dev 配下に合わせて修正。

echo "--- fdisk /dev/sda -l ------------------"             >> $LOG
/sbin/fdisk /dev/sda -l                                     >> $LOG
echo "--- fdisk /dev/sdb -l ------------------"             >> $LOG
/sbin/fdisk /dev/sdb -l                                     >> $LOG
echo "--- fdisk /dev/sdc -l ------------------"             >> $LOG
/sbin/fdisk /dev/sdc -l                                     >> $LOG
echo ""                                                     >> $LOG

echo "### File System (df -k / fstab) ########"             >> $LOG
df -k                                                       >> $LOG
cat /etc/fstab                                              >> $LOG
echo ""                                                     >> $LOG

echo "### Account ############################"             >> $LOG
echo ""                                                     >> $LOG
echo "--- passwd -----------------------------"             >> $LOG
cat /etc/passwd | grep -v '^+'                              >> $LOG
echo ""                                                     >> $LOG
echo "--- group ------------------------------"             >> $LOG
cat /etc/group | grep -v '^+'                               >> $LOG
echo ""                                                     >> $LOG
echo "--- shadow -----------------------------"             >> $LOG
cat /etc/shadow | grep -v '^+'                              >> $LOG
echo ""                                                     >> $LOG

echo "### Service Setup (on boot) ############"             >> $LOG
/sbin/chkconfig --list                                      >> $LOG
echo ""                                                     >> $LOG

echo "### Security (sudo set users) ##########"             >> $LOG
cat /etc/sudoers  | grep ^[^#]                              >> $LOG
cat /etc/sudoers  | grep User_Alias | grep ^[^#]            >> $LOG
echo ""                                                     >> $LOG

echo "### iptables ###########################"             >> $LOG
iptables -L -v                                              >> $LOG
echo ""                                                     >> $LOG

echo "### Setup Check Permission #############"             >> $LOG
echo "--- 実行権 Off -------------------------"             >> $LOG
ls -l /usr/bin/at                                           >> $LOG
ls -l /bin/sync                                             >> $LOG
ls -l /usr/bin/last                                         >> $LOG
echo "--- SUIDビット Off ---------------------"             >> $LOG
ls -l /usr/sbin/suexec                                      >> $LOG
ls -l /usr/bin/chage                                        >> $LOG
ls -l /usr/bin/chfn                                         >> $LOG
ls -l /usr/bin/chsh                                         >> $LOG
ls -l /usr/bin/crontab                                      >> $LOG
ls -l /usr/bin/kpac_dhcp_helper                             >> $LOG
ls -l /usr/bin/lppasswd                                     >> $LOG
ls -l /bin/ping                                             >> $LOG
ls -l /bin/ping6                                            >> $LOG
ls -l /bin/traceroute                                       >> $LOG
ls -l /bin/traceroute6                                      >> $LOG
ls -l /bin/mount                                            >> $LOG
ls -l /bin/umount                                           >> $LOG
echo ""                                                     >> $LOG

echo "### カーネルパラメータ (sysctl.conf) ###"             >> $LOG
cat /etc/sysctl.conf | grep -v '^#'                         >> $LOG

echo "### crontab ############################"             >> $LOG
crontab -l | grep ^[^#]                                     >> $LOG
echo ""                                                     >> $LOG

echo "### hosts ##############################"             >> $LOG
cat /etc/hosts                                              >> $LOG
echo ""                                                     >> $LOG

echo "### syslog #############################"             >> $LOG
cat /etc/syslog.conf | grep ^[^#]                           >> $LOG
echo ""                                                     >> $LOG

echo "### /etc/inittab #######################"             >> $LOG
cat /etc/inittab                                            >> $LOG
echo ""                                                     >> $LOG

echo "### /etc/sysconfig/kudzu ###############"             >> $LOG
cat /etc/sysconfig/kudzu                                    >> $LOG
echo ""                                                     >> $LOG

echo "### /etc/securetty #####################"             >> $LOG
cat /etc/securetty                                          >> $LOG
echo ""                                                     >> $LOG

echo -n "END = "                                            >> $LOG
date                                                        >> $LOG
echo ""                                                     >> $LOG

echo "Please look ${LOG}"

exit</code></pre>
<br />
<br />
<img src="http://counter2.blog.livedoor.com/c?ro=1&act=rss&output=no&id=200511&name=creaism&pid=50435483" width="1" height="1" />
]]>
</content:encoded>
</item>
<item rdf:about="http://blog.livedoor.jp/creaism/archives/50435672.html">
<title>[メモ] Webデザイナーの為のgithub導入ガイド＠NAVERまとめより</title>
<link>http://blog.livedoor.jp/creaism/archives/50435672.html</link>
<description>あまりにも素晴らしいまとめだったので、メモ代わりに。
これ、Webデザイナーに限らず、ユーザには有益だよね。

それにしても、“黒い画面”って、、、ｗ

Webデザイナーの為のgithub導入ガイド [NAVER まとめ]

</description>
<dc:creator>creaism</dc:creator>
<dc:date>2012-01-27T13:00:45+09:00</dc:date>
<dc:subject>技術メモ</dc:subject>
<content:encoded><![CDATA[あまりにも素晴らしいまとめだったので、メモ代わりに。<br />
これ、Webデザイナーに限らず、ユーザには有益だよね。<br />
<br />
それにしても、“黒い画面”って、、、ｗ<br />
<br />
<iframe src="http://matome.naver.jp/paste?id=2132721864242946701&ver=2.0&p=0&g=0&color=02&size=02" frameborder="0" width="460" height="540" style="width:460px;height:540px;"></iframe><div data-na="NA:bottom"><a href="http://matome.naver.jp/odai/2132721864242946701" target="_blank" data-na="NL:undertitle">Webデザイナーの為のgithub導入ガイド</a> <a href="http://matome.naver.jp" target="_blank" data-na="NL:matome">[NAVER まとめ]</a></div>
<br />
<br />
<img src="http://counter2.blog.livedoor.com/c?ro=1&act=rss&output=no&id=200511&name=creaism&pid=50435672" width="1" height="1" />
]]>
</content:encoded>
</item>
<item rdf:about="http://blog.livedoor.jp/creaism/archives/50435454.html">
<title>[Firefox][add-ons]「Hatebu IncSearch」をプチ・カスタマイズして幸せになったので公開する</title>
<link>http://blog.livedoor.jp/creaism/archives/50435454.html</link>
<description>Hatebu IncSearchは、言わずと知れた、はてなブックマークを
インクリメンタルサーチするFirefoxのアドオンです。
# Hatebu IncSearch :: Add-ons for Firefox

最近、パソコンを買い替えて、Firefoxのadd-onを入れ直す際に、
作者のonozatyさんのサイトで、カスタマイズでき...</description>
<dc:creator>creaism</dc:creator>
<dc:date>2012-01-24T22:55:08+09:00</dc:date>
<dc:subject>技術メモ</dc:subject>
<content:encoded><![CDATA[Hatebu IncSearchは、言わずと知れた、はてなブックマークを<br />
インクリメンタルサーチするFirefoxのアドオンです。<br />
# <a href="https://addons.mozilla.org/ja/firefox/addon/hatebu-incsearch/" target="_blank">Hatebu IncSearch :: Add-ons for Firefox</a><br />
<br />
最近、パソコンを買い替えて、Firefoxのadd-onを入れ直す際に、<br />
作者のonozatyさんのサイトで、カスタマイズできる事を知りました。<br />
# <a href="http://www.enjoyxstudy.com/firefox/extension/hatebu_incsearch/" target="_blank">Hatebu IncSearch - Firefox Extension</a><br />
<br />
そこで、「ちょっとカスタマイズしてみようかな」と思い立ち、<br />
やってみたら、思いのほか快適だったので、その手順を公開します。<br />
ちなみに、プチ・カスタマイズの内容は、以下の３つ。<br />
<ul>
<li>はてなブックマークのカウンタを追加。</li>
<li>リンクの先頭にfaviconを追加。</li>
<li>見た目を微調整。</li>
</ul>
<br />
<br />
<h3>手順</h3>
<ol>
<li>プロファイルフォルダ配下のhatebu_incsearchフォルダに移動。</li>
<li>hatebu_incsearchフォルダ内のuser-extension.jsを修正。</li>
<li>hatebu_incsearchフォルダ内のuser.cssを修正。</li>
</ol>
<br />
<br />
<h3>1. プロファイルフォルダ配下のhatebu_incsearchフォルダに移動。</h3>
<br />
プロファイルフォルダについては、以下の公式ヘルプを参照。<br />
<a href="http://support.mozilla.org/ja/kb/Profiles" target="_blank">プロファイル | 操作方法 | Firefox ヘルプ</a><br />
<br />
基本的には、以下の方法で、プロファイルフォルダを開けるはず。<br />
<blockquote>
1. Firefox ウィンドウ上部のFirefox ボタンをクリックして ヘルプ メニュー (Windows XP では ヘルプ メニュー) をクリックし、トラブルシューティング情報... を選択します。トラブルシューティング情報のタブが開きます。<br />
2. アプリケーション基本情報 セクションの下の フォルダを開く ボタンをクリックします。あなたのプロファイルが含まれるフォルダが開きます。<br />
</blockquote>
<br />
プロファイルフォルダ内に、「hatebu_incsearch」フォルダがあるので、移動。<br />
<br />
<br />
<h3>2. hatebu_incsearchフォルダ内のuser-extension.jsを修正。</h3>
<br />
user-extension.jsを修正する事で、以下を実現しています。<br />
<ul>
<li>はてなブックマークのカウンタを追加。</li>
<li>リンクの先頭にfaviconを追加。</li>
</ul>
<br />
user-extension.jsをエディタで開き、以下に書き換え、上書き保存。<br />
# faviconの追加に、Hatena::Faviconを使用しているのがポイント。<br />
<br />
<pre><code>(function(){
  // show favicon
  IncSearch.prototype._createTitleElement = IncSearch.prototype.createTitleElement;
  IncSearch.prototype.createTitleElement = function(bookmark, patternList) {
    var faviconUrl = 'http://favicon.hatena.ne.jp/?url=' + bookmark.url ;
    return [
      '&lt;img style="border:none;margin:0;width:16px;" ',
      'src="',
      faviconUrl,
      '"&gt;',
      '&amp;nbsp;',
      this._createTitleElement(bookmark, patternList)
    ].join('');
  }
  // show bookmark count
  IncSearch.prototype.addTitleText = function(bookmark, patternList) {
    return [
      '&amp;nbsp;',
      '&lt;a href="http://b.hatena.ne.jp/entry/', bookmark.url, '" target="_blank"&gt;',
      '&lt;img style="border:none;margin:0" ',
      'src="http://b.hatena.ne.jp/entry/image/', bookmark.url, '"&gt;&lt;/a&gt;'
    ].join('');
  }
})();</code></pre>
<br />
<br />
<h3>3. hatebu_incsearchフォルダ内のuser.cssを修正。</h3>
<br />
user.cssを修正する事で、見た目を調整できます。<br />
デザインは好みにもよると思いますので、ご自由に。<br />
参考までに、自分のuser.cssを公開します。<br />
<br />
<pre><code>/* user stylesheet */
html, body {
    color: #2b2b2b;
    font-family: Meiryo, "MS PGothic", sans-serif;
    font-size: 100%;
    line-height: 1.7;
    }
th, td {
    padding: 0.5em;
    }
td &gt; a {
    text-decoration: none;
    }
tr:nth-child(even) &gt; td:first-child {
    padding: 0 3px;
    }
</code></pre>
<br />
以上で完了です。お手軽・簡単・便利！！<br />
<br />
<br />
<img src="http://counter2.blog.livedoor.com/c?ro=1&act=rss&output=no&id=200511&name=creaism&pid=50435454" width="1" height="1" />
]]>
</content:encoded>
</item>
<item rdf:about="http://blog.livedoor.jp/creaism/archives/50435426.html">
<title>[JS][CSS] google-code-prettifyをlivedoorBlogに公式の共用ファイルを使って導入する</title>
<link>http://blog.livedoor.jp/creaism/archives/50435426.html</link>
<description>DesignTemplate/CommonFile - livedoor Blog まとめサイト - livedoor Wikiを読んで、
livedoorBlogのデザインテンプレートをカスタマイズする際、
共通して利用できるファイルの中に、google-code-prettifyがあることを知り、
早速、導入してみました。手順は簡単。たったの...</description>
<dc:creator>creaism</dc:creator>
<dc:date>2012-01-24T01:07:03+09:00</dc:date>
<dc:subject>技術メモ</dc:subject>
<content:encoded><![CDATA[<a href="http://wiki.livedoor.jp/staff/d/DesignTemplate/CommonFile" target="_blank">DesignTemplate/CommonFile - livedoor Blog まとめサイト - livedoor Wiki</a>を読んで、<br />
livedoorBlogのデザインテンプレートをカスタマイズする際、<br />
共通して利用できるファイルの中に、google-code-prettifyがあることを知り、<br />
早速、導入してみました。手順は簡単。たったの４作業だけ。<br />
<br />
<h3>手順</h3>
<ol>
<li>google-code-prettifyのCSSファイルを読み込む。</li>
<li>jQueryのJSファイルを読み込む。</li>
<li>google-code-prettifyのJSファイルを読み込む。</li>
<li>&lt;pre&gt;&lt;code&gt;タグで囲む。</li>
</ol>
<br />
<h3>1. google-code-prettifyのCSSファイルを読み込む。</h3>
マイページ⇒ブログ設定⇒デザイン⇒デザインカスタマイズに移動。<br />
cssタブにて、以下を追加。<br />
<pre><code>@import url(http://parts.blog.livedoor.jp/css/prettify.css);</code></pre>
<br />
<h3>2. jQueryのJSファイルを読み込む</h3>
マイページ⇒ブログ設定⇒ブログパーツに移動。<br />
ブログパーツの追加タブを選択し、自由なカスタマイズ用から、<br />
JavaScriptを選択。<br />
表示されたフォームの「JavaScript の URL」に<br />
［http://parts.blog.livedoor.jp/js/jquery.js］を入力。<br />
「保存する」ボタンをクリックし、変更を保存。<br />
<br />
<h3>3. google-code-prettifyのJSファイルを読み込む。</h3>
マイページ⇒ブログ設定⇒ブログパーツに移動。<br />
ブログパーツの追加タブを選択し、自由なカスタマイズ用から、<br />
JavaScriptを選択。<br />
表示されたフォームの「JavaScript の URL」に<br />
［http://parts.blog.livedoor.jp/js/prettify.js］を入力。<br />
「追加JavaScript」に、以下を追加。<br />
<pre><code>$(document).ready(function () {
  $('pre').addClass('prettyprint');
  prettyPrint();
});</code></pre>
「保存する」ボタンをクリックし、変更を保存。<br />
<br />
<h3>4. &lt;pre&gt;&lt;code&gt;タグで囲む。</h3>
記事を書く際に、シンタックス・ハイライトを適用したい箇所を、<br />
以下のように、&lt;pre&gt;&lt;code&gt;タグで囲む。<br />
<pre><code>&lt;pre&gt;&lt;code&gt;＊＊＊コード＊＊＊&lt;/code&gt;&lt;/pre&gt;</code></pre>
<br />
たったこれだけの作業で、シンタックス・ハイライトを導入可能。<br />
素晴らしい！！<br />
<br />
<h3>追記１</h3>
# google-code-prettifyは、コード種別を明記しなくて良いから便利ですよね。<br />
<br />
<h3>追記２</h3>
# addClass('prettyprint');する対象を、&lt;pre&gt;に変更しました。<br />
# &lt;code&gt;のままでも、動作に支障はありません。<br />
<br />
<h3>追記３</h3>
# addClass('prettyprint');する対象を、&lt;code&gt;にした場合、<br />
# デザイン次第ですが、&lt;pre&gt;タグは、必ずしも必要ではありません。<br />
# 逆もまた然り。<br />
<img src="http://counter2.blog.livedoor.com/c?ro=1&act=rss&output=no&id=200511&name=creaism&pid=50435426" width="1" height="1" />
]]>
</content:encoded>
</item>
<item rdf:about="http://blog.livedoor.jp/creaism/archives/50435161.html">
<title>[スライド] ネットワーク トラブル シューティング ～自端末編～ ＠静岡ITPro勉強会 インフラ部</title>
<link>http://blog.livedoor.jp/creaism/archives/50435161.html</link>
<description>ネットワーク トラブル シューティング ～自端末編～

from creaism


先週末の土曜日、第６回静岡ITPro勉強会 インフラ部に参加した際、
発表に使用したスライドを公開します。
# 折角、多少なりとも時間かけて作ったからね :-)

対象としては、ネットワーク？何それ？美味...</description>
<dc:creator>creaism</dc:creator>
<dc:date>2012-01-21T22:53:39+09:00</dc:date>
<dc:subject>勉強会・講習</dc:subject>
<content:encoded><![CDATA[<a href="http://www.slideshare.net/creaism/20120114-shizuinfrants1" title="ネットワーク トラブル シューティング ～自端末編～" target="_blank">ネットワーク トラブル シューティング ～自端末編～</a><br />
<iframe src="http://www.slideshare.net/slideshow/embed_code/11189881" width="425" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe><br />
from <a href="http://www.slideshare.net/creaism" target="_blank">creaism</a><br />
<br />
<br />
先週末の土曜日、第６回静岡ITPro勉強会 インフラ部に参加した際、<br />
発表に使用したスライドを公開します。<br />
# 折角、多少なりとも時間かけて作ったからね :-)<br />
<br />
対象としては、ネットワーク？何それ？美味しいの？っていう、<br />
ネットワーク初心者の方でしょうか。<br />
スライドの中に分からない単語とかあったら調べてみて下さい。<br />
ネットワークについて勉強する第一歩になるかと思います。<br />
<br />
俺も、そんなに詳しくありません(爆)けど、大丈夫！<br />
世の中には、詳しい人が沢山いて、多少厳しいながら、<br />
何だかんだと、導いてくれるんです。だから、、、<br />
一緒に勉強会に参加しませんか？（っと宣伝してみる）<br />
<br />
<br />
<h3>追記１: 勉強会のお知らせ</h3>
以下、近日開催予定の勉強会です。<br />
<br />
2012/01/28 (土) 13:00 to 17:30<br />
静岡Developers勉強会 第3回HTML5読書会 : ATND<br />
<a href="http://atnd.org/events/24193" target="_blank">http://atnd.org/events/24193</a><br />
<br />
2012/02/18 (土) 13:30 to 17:00<br />
第1回JAZUG静岡勉強会/第8回静岡ITPro勉強会 on Zusaar<br />
<a href="http://www.zusaar.com/event/199062" target="_blank">http://www.zusaar.com/event/199062</a><br />
<br />
<br />
<h3>追記２</h3>
厳しさの無い教えは、身につかないと思う。<br />
もちろん、独学・自学の心構えは必須。<br />
<br />
<br />
<img src="http://counter2.blog.livedoor.com/c?ro=1&act=rss&output=no&id=200511&name=creaism&pid=50435161" width="1" height="1" />
]]>
</content:encoded>
</item>
<item rdf:about="http://blog.livedoor.jp/creaism/archives/50430051.html">
<title>[AWS][静岡]『Amazon Web Services勉強会 at 静岡』を、今更ながらまとめてみた。</title>
<link>http://blog.livedoor.jp/creaism/archives/50430051.html</link>
<description>
Amazon Web Services勉強会 at 静岡 : ATND

っという訳で、開催日から１週間以上経ってしまいましたが、
コツコツと記事をまとめていたので、公開したいと思います。
# 今更感満載だけど X(


もくじ


Togetterのまとめ
AWSアップデートとコミュニティエコシステムについ...</description>
<dc:creator>creaism</dc:creator>
<dc:date>2011-12-07T02:46:05+09:00</dc:date>
<dc:subject>勉強会・講習</dc:subject>
<content:encoded><![CDATA[<img src="http://livedoor.blogimg.jp/creaism/imgs/8/b/8b8b27e6.jpg" width="320" height="193" border="0" alt="AWS_Shizuoka_ATND" class="pict" /><br />
<a href="http://atnd.org/events/21462" target="_blank">Amazon Web Services勉強会 at 静岡 : ATND</a><br />
<br />
っという訳で、開催日から１週間以上経ってしまいましたが、<br />
コツコツと記事をまとめていたので、公開したいと思います。<br />
# 今更感満載だけど X(<br />
<br />
<br />
<h3>もくじ</h3>
<br />
<ul>
<li>Togetterのまとめ</li>
<li>AWSアップデートとコミュニティエコシステムについて</li>
<li>LT：「AWS S3でストレージをバックアップ」</li>
<li>LT：「／人&#9685; &#8255;&#8255; &#9685;人＼僕と契約してクラウドのNoSQL使いになってよ！」</li>
<li>LT：「Introduction AWS SDK for Ruby」</li>
<li>GT：AWSを業務で使うために上司を説得する方法</li>
<li>AWSハンズオン「AWSでWordpress 」</li>
<li>追記１: COOCKPADのAWS移行</li>
<li>追記２: AWSの都市伝説</li>
<li>追記３: AWSとゲノム解析</li>
<li>最後に。</li>
</ul>
[<span style="color: #FF0000;">2012/1/21</span>]<br />
追記３に、kzfmさんに教えて頂いたスライドを２つ追加しました。<br />
<br />
<br />
<h3>Togetterのまとめ</h3>
<br />
<a href="http://togetter.com/li/219974" target="_blnak">第１回 JAWSUG at 静岡 - Togetter</a><br />
<br />
まずは、Togetterのまとめで空気感を掴んで貰うと、<br />
勉強会の流れが分かりやすいと思います。<br />
まとめられたのは、<a href="https://twitter.com/secondarykey" target="_blnak">@secondarykey</a>さん。<br />
ありがとうございます。<br />
# 意外と自分のつぶやきが拾われてて、テレテレｗ<br />
<br />
<br />
<h3>AWSアップデートとコミュニティエコシステムについて</h3>
<br />
発表者は、アマゾンジャパン株式会社の小島さん。<br />
<br />
とても興味深い話が多かった中で、以下が個人的に印象的だった。<br />
<ul>
<li>日本国内のIT投資は横ばい。日本国内のクラウド市場は急拡大。</li>
<li>データセンタの規模を比較すると amazon.com ＜ AWSとなる。</li>
<li>AWS クラウドフォーメーション ⇒ 構築手順をスクリプト化！</li>
<li>amazonの商売におけるポリシーは、薄利多売。AmazonのDNAと言えるほど浸透。</li>
<li>AWSは、ゲノム解析にも実績あり。</li>
</ul>
<br />
インフラSEから見たAWS等のクラウドサービスを端的に表しているなと思ったのが、<br />
<a href="http://twitter.com/toshi__ya/" target="_blank">@toshi__ya</a>さんの以下のつぶやき。<br />
<div class="twitterTimeline"><a href="http://twitter.com/toshi__ya/" target="_blank"><img src="http://a2.twimg.com/profile_images/1642337537/tio03_normal.jpg" class="twitterIcon twitterIconleft" alt="" /></a><div class="twitterContent twitterContentleft"><span class="twitterAuthor"></span> <span class="twitterDate"><a href="http://twitter.com/toshi__ya/status/140665869981319169" target="_blank">2011/11/27 14:38:51</a></span><br /><span class="twitterText">黒船に乗るか、黒船と一緒に開国を目指すか、黒船を自分で作ろうとするか。だなぁ… <br /><a href="http://twitter.com/search?q=%23jawsug" target="_blank">#jawsug</a></span></div></div>
<br />
個人的な所感としては、クラウド化の流れは避けようが無い。<br />
「造船術よりも操船術の時代」到来に合わせて研鑽をつむ必要がある。<br />
それでも、やっぱり造船術も身に着けていきたいよね。っという感。<br />
# 学ぶことがまた増えたなぁ（汗；<br />
<br />
<br />
<h3>LT：「AWS S3でストレージをバックアップ」</h3>
<br />
発表者は、上田達也（<a href="http://twitter.com/tatsuya_info/" target="_blank">@tatsuya_info</a>）さん。<br />
<br />
まず、度肝抜かれたのが、自宅で「ZFS+FreeBSD」！！<br />
静岡の夜明けも近いと思ってたら、もう明けてたｗ<br />
<br />
本題は、「AWS-S3でストレージをバックアップして幸せになろう！」というお話。<br />
肝は、s3syncを使用してるところかなと感じた。<br />
s3syncは、rsync互換のAWS-S3用ツール。興味ある方は、↓をチェック。(注:英語)<br />
<a href="http://s3sync.net/wiki" target="_blank">S3Sync.net - S3Sync Wiki</a><br />
<br />
<br />
<h3>LT：「／人&#9685; &#8255;&#8255; &#9685;人＼僕と契約してクラウドのNoSQL使いになってよ！」</h3>
<br />
発表者は、荒浪一城（<a href="http://twitter.com/kimtea/" target="_blank">@kimtea</a>）さん。<br />
<br />
初っ端からキュウベェ降臨ですｗ<br />
ライトニングトークって、掴みも大事なんだな。勉強になる。<br />
<br />
NoSQLの意味するところは、<br />
<ul>
<li>NoSQL = SQLが使えるのは、RDBMSだけじゃないよ。</li>
<li>NoSQL ≠ RDBMSを否定する概念。</li>
</ul>
結構、誤解している人が多いらしいです。<br />
<br />
話は、どんどん専門的なところに踏み込んでゆく。<br />
CAP定理とACID特性。ふむふむ。<br />
ん？BASE特性・・・？むむむ。<br />
っと悩んでたところで、大石（<a href="http://twitter.com/ooishi/" target="_blank">@ooishi</a>）さんが、<br />
こちらの記事を紹介してくれていて大変助かりました。<br />
<br />
<a href="http://www.publickey1.jp/blog/09/_basecap.html" target="_blank">クラウド上のリレーショナルデータベースはなぜ難しいのか？ BASEとCAP定理について － Publickey</a><br />
# そういえば、昔読んだよな...orz<br />
記事の中で、さらに深く<strike>開設</strike>解説しているサイトへのリンクなども紹介されているので、<br />
興味のある方は、是非一読を。<br />
<br />
最後、静岡は深夜アニメの過疎地！というまとめ。<br />
うん、まとまってない。<br />
<br />
<br />
<h3>LT：「Introduction AWS SDK for Ruby」</h3>
<br />
発表者は、cloudpackの磯辺（<a href="http://twitter.com/muramasa64/" target="_blank">@muramasa64</a>）さん。<br />
<br />
うさぎとかめのレース模様が気になって、話に集中できｎ（ｒｙ<br />
<br />
AWS SDK for Rubyは、AWS公式のSDK。<br />
RubyからAPI実行することが可能。<br />
2011年7月14日に初リリースされて、現在、最新版は1.2.3。<br />
提供されて間もないので、機能はまだ少ないけど、今後に期待。<br />
<br />
『困ったことや要望があったらフォーラムに書くなどフィードバックしましょう。<br />
　Amazonさんはスピード感があり、要望に素早く対応してくれます。』<br />
コミュニティが活発なのも、Amazonの強みなんだなと感じました。<br />
<br />
<br />
<a href="http://www.slideshare.net/muramasa64/jawsug-1-introduction-to-aws-sdk-for-ruby" title="JAWS-UG静岡 #1 Introduction to AWS SDK for Ruby" target="_blank">JAWS-UG静岡 #1 Introduction to AWS SDK for Ruby</a><br />
<iframe src="http://www.slideshare.net/slideshow/embed_code/10347179" width="425" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe><br />
from <a href="http://www.slideshare.net/muramasa64" target="_blank">Kazuhiko ISOBE</a><br />
<br />
<br />
<h3>GT：AWSを業務で使うために上司を説得する方法</h3>
<br />
発表者は、株式会社サーバーワークス 大石蔵人之助（@ooishi）さん。<br />
<br />
切腹ネタの源流はココでしたｗ<br />
<br />
クラウドって興味あるけど、実際コスパ的にどうなのさ？とか、<br />
疑問を抱いてる上司を説得する、より政治的な(？)お話。<br />
<br />
上司を説得というタイトルだけど、自分を納得させるにも。<br />
<br />
切り口は、「1.予算 2.セキュリティ 3.実績」の３つ。<br />
<br />
特に、おぉ！っと惹かれたのは、以下。<br />
これは、上司というか、総務を納得させる材料になる。<br />
<br />
<blockquote>
AWS方向へのトラフィックは無料。つまり、DoS攻撃等の原因で課金されることはない。<br />
サーバのスペックを越えるアウトバウンドトラフィックが発生しようがないので、<br />
サーバのスペックを決めれば大体の値段は計算できる。</blockquote>
<br />
因みに、どうしても説得できなかったら、、、<br />
討ち入り同士、募集中とのことｗ<a href="http://twitter.com/serverworks/" target="_blank">@serverworks</a>に、脱藩なうとつぶやくだけ！<br />
<br />
<a href="http://www.slideshare.net/serverworks/201111-jawsugaws3" title="2011年11月 JAWS-UG「上司を説得してAWSを使わせる3つのポイント」" target="_blank">2011年11月 JAWS-UG「上司を説得してAWSを使わせる3つのポイント」</a><br />
<iframe src="http://www.slideshare.net/slideshow/embed_code/10347742" width="425" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe><br />
from <a href="http://www.slideshare.net/serverworks" target="_blank">Serverworks</a><br />
<br />
<br />
<h3>AWSハンズオン「AWSでWordpress 」</h3>
<br />
AWSのアカウントを作成し、WordPressを開設する所まで実施。<br />
Apache、PHP、WordPressとインストールが、サックサク進む。<br />
アカウント作成の時間を除けば、WordPress開設まで５分かからない！<br />
ストレスを感じないスピード感に、驚きました。<br />
<br />
これは、、、ゴク。<br />
ちょっとした使用用途なら、わざわざ、一から用意するより簡便だな。<br />
スパコンベンダーには、かなり脅威かも。。。<br />
国内ベンダーが、クラウドに舵きりを急ぐのも分かる。<br />
<br />
実際に体験することの重要さを思い知るハンズオンでした。<br />
<br />
<a href="http://www.slideshare.net/kaz.goto/1-jawsug-awsawsec2-10346882" title="第1回 JAWS-UG静岡 勉強会 AWSハンズオン「AWSアカウント作成～EC2ログイン」" target="_blank">第1回 JAWS-UG静岡 勉強会 AWSハンズオン「AWSアカウント作成～EC2ログイン」</a><br />
<iframe src="http://www.slideshare.net/slideshow/embed_code/10346882?rel=0" width="425" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe><br />
from <a href="http://www.slideshare.net/kaz.goto" target="_blank">Kazutaka Goto</a><br />
<br />
<br />
<h3>追記１</h3>
<br />
途中、COOCKPADは100% AWSだという話題が上がりましたが、<br />
クックパッドの開発者ブログにて、スライドが公開されていたので、<br />
ここでもご紹介しておきます。<br />
<a href="http://techlife.cookpad.com/2011/06/01/amepad-thanks/" target="_blank">資料を公開しました（サイバーエージェント×クックパッド合同勉強会～それぞれのクラウド活用事例） ≪ クックパッド開発者ブログ</a><br />
<br />
<a href="http://www.slideshare.net/winebarrel/aws-8120106" title="AWS移行に向けたクックパッドの取り組み+α" target="_blank">AWS移行に向けたクックパッドの取り組み+α</a><br />
<iframe src="http://www.slideshare.net/slideshow/embed_code/8120106" width="425" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe><br />
from <a href="http://www.slideshare.net/winebarrel" target="_blank">winebarrel</a><br />
<br />
<br />
<h3>追記２</h3>
<br />
Amazonの「都市伝説」について、気になって調べてみたら、<br />
GIGAZINさんの記事をを見つけました。参考まで。<br />
<a href="http://gigazine.net/news/20110901_amazon_cloud/" target="_balnk">Amazonがクラウドに関する「都市伝説」に反論、「AWSの真実」とは？ - GIGAZINE</a><br />
<br />
<br />
<h3>追記３: AWSとゲノム解析</h3>
<br />
個人的に、興味があったので、関連記事などをまとめておきます。<br />
<br />
<a href="http://aws.amazon.com/jp/lifesciences/" target="_blank">Life Sciences - Amazon Web Services</a><br />
<a href="http://www.computerworld.jp/topics/601/%E3%82%AF%E3%83%A9%E3%82%A6%E3%83%89%E3%83%BB%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0/186829/%E3%82%A2%E3%83%9E%E3%82%BE%E3%83%B3%E3%80%81EC2%E3%81%A7HPC%E7%94%A8%E3%81%AE%E3%80%8CCluster%20Compute%E3%80%8D%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%83%B3%E3%82%B9%E3%82%92%E5%88%A9%E7%94%A8%E5%8F%AF%E8%83%BD%E3%81%AB" target="_blank">アマゾン、EC2でHPC用の「Cluster Compute」インスタンスを利用可能に|クラウド・コンピューティング|トピックス|Computerworld</a><br />
<br />
# あまり見つからなかった...。ご存知の方、教えてください :)<br />
<br />
[<span style="color: #FF0000;">2012/1/21</span>]<br />
kzfmさんに教えて頂いたスライドを２つ追加。<br />
<br />
<a href="http://www.slideshare.net/inutano/largescale-data-in-life-science" title="Large-scale data in life science" target="_blank">Large-scale data in life science</a><br />
<iframe src="http://www.slideshare.net/slideshow/embed_code/10516627" width="425" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe><br />
from <a href="http://www.slideshare.net/inutano" target="_blank">Tazro Ohta</a><br />
<br />
<a href="http://www.slideshare.net/sesejun/ss-10104027" title="次世代シーケンサが求める機械学習" target="_blank">次世代シーケンサが求める機械学習</a><br />
<iframe src="http://www.slideshare.net/slideshow/embed_code/10104027" width="425" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe><br />
from <a href="http://www.slideshare.net/sesejun" target="_blank">sesejun</a><br />
<br />
<br />
<h3>最後に</h3>
<br />
今回、Amazon Web Services勉強会 at 静岡に参加して強く感じたことは、<br />
『最初の一歩を踏み出す大変さと、その大切さ。』<br />
今まで、横から眺める事しかできなかった方たちと、<br />
実際にお会いして、会話して、とても楽しい時間を過ごせました。<br />
<br />
勉強会って、響きからして敷居が高そうでしり込みしちゃうけど、<br />
実際に参加してみると、意外とそんなに敷居は高くないです。<br />
ビビリで人見知りなオレが、参加できたくらいなんで大丈夫（ぉ<br />
<br />
<br />
<img src="http://counter2.blog.livedoor.com/c?ro=1&act=rss&output=no&id=200511&name=creaism&pid=50430051" width="1" height="1" />
]]>
</content:encoded>
</item>

</rdf:RDF>

