【Mac】eclipse 4.3 + PDT + symfonyプラグインをインストールしました

<p>Facebook上のウォールにプログラムからGraph APIを使って画像を投稿する時</p>
<div>ちょっとかっこよく見せるためのテクニックをご紹介。</div>
<div></div>
<div>こちらはよくあるパターン</div>
<div><a href="/uploads-archive/2013/12/ed91c375302043dc5679b77b8dce26f0.png"><img decoding="async" loading="lazy" class="size-full wp-image-3811 aligncenter" alt="スクリーンショット 2013-12-10 16.04.08" src="/uploads-archive/2013/12/ed91c375302043dc5679b77b8dce26f0.png" width="513" height="404" srcset="/uploads-archive/2013/12/ed91c375302043dc5679b77b8dce26f0.png 513w, /uploads-archive/2013/12/ed91c375302043dc5679b77b8dce26f0-300x236.png 300w, /uploads-archive/2013/12/ed91c375302043dc5679b77b8dce26f0-228x179.png 228w" sizes="(max-width: 513px) 100vw, 513px" /></a></div>
<div></div>
<div>今回のものは</div>
<div> <a href="/uploads-archive/2013/12/d48ad5368c81ec17cbc00cfc8af24a8a.png"><img decoding="async" loading="lazy" class="size-full wp-image-3812 aligncenter" alt="スクリーンショット 2013-12-10 16.02.10" src="/uploads-archive/2013/12/d48ad5368c81ec17cbc00cfc8af24a8a.png" width="513" height="281" srcset="/uploads-archive/2013/12/d48ad5368c81ec17cbc00cfc8af24a8a.png 513w, /uploads-archive/2013/12/d48ad5368c81ec17cbc00cfc8af24a8a-300x164.png 300w, /uploads-archive/2013/12/d48ad5368c81ec17cbc00cfc8af24a8a-228x124.png 228w" sizes="(max-width: 513px) 100vw, 513px" /></a></div>
<div>こんな感じ。</div>
<div></div>
<div>あまり変わらないが、コンパクトにまとまっていて情報がわかりやすいのと、</div>
<div>あとは大きな理由としてAPI経由での投稿でユーザーが入力した内容以外で定型文を入れることが原則禁止されているため</div>
<div>そのような時の対処法としても便利な方法だ。</div>
<div></div>
<div>方法は、画像を投稿させるのではなく、指定の画像をOGPで指定した動的なダミーページを用意して、そのURLをシェアするイメージ。</div>
<div></div>
<div>上記の例では</div>
<div>


		<div id="crayon-64953fd595882277741596" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta property="og:title" content="ソチオリンピック日本代表を応援しよう！" /&gt;
&lt;meta property="og:type" content="article" /&gt;
&lt;meta property="og:description" content="ソチオリンピック日本代表を応援しよう！ソチオリンピック日本代表を応援しよう！" /&gt;
&lt;meta property="og:image" content="http://img.hoge.com/1.png" /&gt;
&lt;meta property="og:site_name" content="ソチオリンピック日本代表を応援しよう！" /&gt;

&lt;meta name="keywords" content="ソチオリンピック、オリンピック、ソチ" /&gt;
&lt;meta name="description" content="ソチオリンピック日本代表を応援しよう！ソチオリンピック日本代表を応援しよう！" /&gt;
&lt;title&gt;ソチオリンピック日本代表を応援しよう！&lt;/title&gt;

&lt;/head&gt;
&lt;body　onload="window.location.href='/';"&gt;
&lt;/body&gt;
&lt;/html&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd595882277741596-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-2">2</div><div class="crayon-num" data-line="crayon-64953fd595882277741596-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-4">4</div><div class="crayon-num" data-line="crayon-64953fd595882277741596-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-6">6</div><div class="crayon-num" data-line="crayon-64953fd595882277741596-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-8">8</div><div class="crayon-num" data-line="crayon-64953fd595882277741596-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-10">10</div><div class="crayon-num" data-line="crayon-64953fd595882277741596-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-12">12</div><div class="crayon-num" data-line="crayon-64953fd595882277741596-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-14">14</div><div class="crayon-num" data-line="crayon-64953fd595882277741596-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-16">16</div><div class="crayon-num" data-line="crayon-64953fd595882277741596-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd595882277741596-18">18</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd595882277741596-1"><span class="crayon-n">&lt;!doctype html&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-2"><span class="crayon-r ">&lt;html&gt;</span></div><div class="crayon-line" id="crayon-64953fd595882277741596-3"><span class="crayon-r ">&lt;head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-4"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">charset</span>=<span class="crayon-s ">"UTF-8"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-64953fd595882277741596-5"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">property</span>=<span class="crayon-s ">"og:title"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span>=<span class="crayon-s ">"ソチオリンピック日本代表を応援しよう！"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-6"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">property</span>=<span class="crayon-s ">"og:type"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span>=<span class="crayon-s ">"article"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line" id="crayon-64953fd595882277741596-7"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">property</span>=<span class="crayon-s ">"og:description"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span>=<span class="crayon-s ">"ソチオリンピック日本代表を応援しよう！ソチオリンピック日本代表を応援しよう！"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-8"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">property</span>=<span class="crayon-s ">"og:image"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span>=<span class="crayon-s ">"http://img.hoge.com/1.png"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line" id="crayon-64953fd595882277741596-9"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">property</span>=<span class="crayon-s ">"og:site_name"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span>=<span class="crayon-s ">"ソチオリンピック日本代表を応援しよう！"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-10">&nbsp;</div><div class="crayon-line" id="crayon-64953fd595882277741596-11"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">name</span>=<span class="crayon-s ">"keywords"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span>=<span class="crayon-s ">"ソチオリンピック、オリンピック、ソチ"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-12"><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">name</span>=<span class="crayon-s ">"description"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span>=<span class="crayon-s ">"ソチオリンピック日本代表を応援しよう！ソチオリンピック日本代表を応援しよう！"</span><span class="crayon-r "> /&gt;</span></div><div class="crayon-line" id="crayon-64953fd595882277741596-13"><span class="crayon-r ">&lt;title&gt;</span><span class="crayon-i ">ソチオリンピック日本代表を応援しよう！</span><span class="crayon-r ">&lt;/title&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-14">&nbsp;</div><div class="crayon-line" id="crayon-64953fd595882277741596-15"><span class="crayon-r ">&lt;/head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-16"><span class="crayon-r ">&lt;body　onload="window.location.href='/';"&gt;</span></div><div class="crayon-line" id="crayon-64953fd595882277741596-17"><span class="crayon-r ">&lt;/body&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd595882277741596-18"><span class="crayon-r ">&lt;/html&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>


</div>
<div>のようなHTMLを動的に生成し、ユーザーごとの画像と定型文を記載している。</div>
<div>こちらは動的なページなので、例えばhttp://hoge.com/?id=xxx</div>
<div>などとなってしまい、直接アクセスされるとよくわからないページが表示されてしまう。</div>
<div>それを回避するために、16行目のように</div>
<div>


		<div id="crayon-64953fd595886097209395" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;body　onload="window.location.href='/';"&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd595886097209395-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd595886097209395-1"><span class="crayon-r ">&lt;body　onload="window.location.href='/';"&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>


</div>
<div>と、ここではトッページにリダイレクトさせている。</div>
<div></div>
<div>余談だが、スマホを重視する場合投稿する画像のサイズは</div>
<div>468 x 245がベストらしい。</div>
<p>&nbsp;</p>

【Facebook】Graph APIでかっこ良く画像を投稿する方法

<p>先日のお仕事でつまづくことがありましたので備忘録までに共有です。</p>
<p>とあるサイトをローンチする際、Facebookのフィードにいいねが流れてこないということで分かりました。</p>
<p>現在、fb:app_idやfb:adminsが設置されていないサイトでのいいねボタンはユーザのタイムラインやアクティビティログに表示されません。</p>
<p>それはつまり、他のユーザーの目に触れることがなく、いいねボタンはソーシャル要素がない単なるいいねカウンターと化します。</p>
<p>&nbsp;</p>
<p>詳しくは、以下のブログで詳細と見解が記載されています。</p>
<p><a href="http://snowadays.jp/2012/09/788" target="_blank">「fb:app_id」とか「fb:admins」って何のために必要なの？（OGP的な意味で）</a></p>
<p>&nbsp;</p>
<blockquote><p>ここからはあくまで一説でしかありませんが、どうやらFacebookは、世の中のいいね！ボタンの管理者を把握しておきたいようです。</p>
<p>どういうことかと言うと、海外ではこのいいね！ボタン、結構裁判沙汰になったりとかいろいろトラブルも起きてます。「いいね！詐欺」みたいな。<br />
で、いわゆる「不正ないいね！ボタン」とでもいいましょうか、そういうやつの監視に苦労してるわけです。<br />
例えば、外部のアフィサイトにプラグインのいいね！ボタンがあって、スクリプト組んでそのボタンを押せばポイントがもらえる、とか。<br />
そんなの簡単に作れちゃうわけで。</p>
<p>そういう輩の対策として、Facebookが考えた作戦が、この「Facebookアプリ必須」作戦。<br />
現状、Facebookアプリを作成するにはアカウントの認証作業が必要になります。<br />
認証作業は、クレジットカードもしくは携帯電話が必要です。</p></blockquote>
<p>上記ブログから引用させて頂きましたが、こちらの見解がしっくりと来ました。</p>
<p>&nbsp;</p>
<p>Facebookのデバッカーを通して、エラーが出なければ問題ありません。</p>
<p><a href="https://developers.facebook.com/tools/debug" target="_blank">https://developers.facebook.com/tools/debug</a></p>
<p>&nbsp;</p>


いいねボタンにはfb:app_idやfb:adminsが必須

<p>今回紹介するのは、<br />
wordpressプラグイン「Meta Slider」というもので、<br />
要はスライダーのプラグインなんですが、有名なプラグインのスライダー４つから選べるという代物。</p>
<p>その4つとは、</p>
<p><strong>・Nivo Slider (レスポンシブ対応, 16のエフェクト, 4つのテーマ)</strong><br />
<strong> ・Coin Slider (4のエフェクト)</strong><br />
<strong> ・Flex Slider 2 (レスポンシブ対応, 2のエフェクト, カルーセルモード)</strong><br />
<strong> ・Responsive Slides (レスポンシブ対応, フェイドのみ, 軽量！)</strong></p>
<p>です。</p>
<p>さらにいいのは、<br />
管理画面上で選べて、細かい設定も可能です。<br />
画像も管理画面でアップロードできます。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3797" alt="Meta Slider Lite ‹ e-sign — WordPress" src="/uploads-archive/2013/12/b6417756b20df846916fd39070d7fb41-1024x903.jpg" width="640" height="563" srcset="/uploads-archive/2013/12/b6417756b20df846916fd39070d7fb41-1024x903.jpg 1024w, /uploads-archive/2013/12/b6417756b20df846916fd39070d7fb41-300x264.jpg 300w, /uploads-archive/2013/12/b6417756b20df846916fd39070d7fb41-228x201.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>表示の設定も簡単で、<br />
ショートコードまたは、テンプレートのタグがあります。<br />
つまり、テーマでも固定ページでもブログでも使えるということになります。</p>
<h2>Meta Sliderのインストール・設定</h3>
<p><strong>wordpressの管理画面　＞　プラグイン　＞　新規追加　＞　「Meta Slider」検索</strong></p>
<p>でOK！</p>
<p>プラグインのインストールして、有効化すると、<br />
サイドメニューに「Meta Slider Lite」の項目が出るので、<br />
そこから設定できます。</p>
<p>ちなみに、これは無料版と有料版があり、<br />
無料版は機能が制限されいていますが、<br />
普通に使用する程度であれば十分かと思います。</p>
<p>管理画面も使いやすい感じなので、<br />
HTML等を知らないクライアントでも写真を差し替えたり、<br />
設定を変更したりできるので、なかなか良いプラグインだと思います。</p>
<p><a class="link" href="http://wordpress.org/plugins/ml-slider/" target="_blank">Meta Slider</a></p>


スライダーが４つも！wordpressプラグイン「Meta Slider」

<p>urlの最後のidを取得して、スライドショーを始める位置を指定する方法を紹介します。</p>
<p>今回はスライドショーに「bxslider」を利用しています。</p>
<p>一覧ページと詳細ページのつながりの内容</p>
<p>①　商品一覧ページがあります。<br />
②　詳細ページは商品一つ一つのページごとにスライドしてあります。<br />
③　詳細ページにいく場合、一覧ページからクリックされた商品の詳細を表示する<br />
④　また、スライドは通常通り動く。</p>
<p>上記のような流れで実装したい！</p>
<p>今回初めて使ったのは「location.hash」です。</p>
<p>「location.hash」は一覧ページからidで指定した値を取得します。</p>
<p>一覧ページからクリックした場合のurlは</p>
<p></p>

		<div id="crayon-64953fd59569b522526158" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
index.html#product01　　// #からの文字を取得します。</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd59569b522526158-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd59569b522526158-1"><span class="crayon-i">index</span><span class="crayon-sy">.</span><span class="crayon-i">html</span><span class="crayon-p">#product01　　// #からの文字を取得します。</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p></p>

		<div id="crayon-64953fd59569f605822285" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
if (location.hash){
		id = location.hash.replace("#product0","");  //最後の数字を取得しています。

			$('#slider1').bxSlider({
				 	startSlide: id - 1,　//zero based
					infiniteLoop: true,
//  infiniteLoopをtrueにしてループ表示を有効化します。
  				});
	}else{
		$('#slider1').bxSlider();
	}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd59569f605822285-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59569f605822285-2">2</div><div class="crayon-num" data-line="crayon-64953fd59569f605822285-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59569f605822285-4">4</div><div class="crayon-num" data-line="crayon-64953fd59569f605822285-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59569f605822285-6">6</div><div class="crayon-num" data-line="crayon-64953fd59569f605822285-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59569f605822285-8">8</div><div class="crayon-num" data-line="crayon-64953fd59569f605822285-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd59569f605822285-10">10</div><div class="crayon-num" data-line="crayon-64953fd59569f605822285-11">11</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd59569f605822285-1"><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-i">location</span><span class="crayon-sy">.</span><span class="crayon-i">hash</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59569f605822285-2"><span class="crayon-h">		</span><span class="crayon-i">id</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">location</span><span class="crayon-sy">.</span><span class="crayon-i">hash</span><span class="crayon-sy">.</span><span class="crayon-e">replace</span><span class="crayon-sy">(</span><span class="crayon-s">"#product0"</span><span class="crayon-sy">,</span><span class="crayon-s">""</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-c">//最後の数字を取得しています。</span></div><div class="crayon-line" id="crayon-64953fd59569f605822285-3">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59569f605822285-4"><span class="crayon-h">			</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#slider1'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">bxSlider</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd59569f605822285-5"><span class="crayon-h">				 	</span><span class="crayon-i">startSlide</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">id</span><span class="crayon-h"> </span>-<span class="crayon-h"> </span><span class="crayon-cn">1</span><span class="crayon-sy">,</span>　<span class="crayon-c">//zero based</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59569f605822285-6"><span class="crayon-h">					</span><span class="crayon-i">infiniteLoop</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd59569f605822285-7"><span class="crayon-c">//&nbsp;&nbsp;infiniteLoopをtrueにしてループ表示を有効化します。</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59569f605822285-8"><span class="crayon-h">&nbsp;&nbsp;				</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd59569f605822285-9"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-st">else</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd59569f605822285-10"><span class="crayon-h">		</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'#slider1'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">bxSlider</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd59569f605822285-11"><span class="crayon-h">	</span><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>

URLを取得してスライドショーの位置を調整する

<p>今回はxargsコマンドによる一括操作を紹介したいと思います。</p>
<h3>あるフォルダ下のファイルを検索し、特定文字列があるところを出力</h4>
<p></p>

		<div id="crayon-64953fd5954ba106189722" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
find /path/to/files -type f -print | xargs grep "search_string"</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd5954ba106189722-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd5954ba106189722-1"><span class="crayon-i">find</span><span class="crayon-h"> </span>/<span class="crayon-i">path</span>/<span class="crayon-st">to</span>/<span class="crayon-i">files</span><span class="crayon-h"> </span>-<span class="crayon-i">type</span><span class="crayon-h"> </span><span class="crayon-i">f</span><span class="crayon-h"> </span>-<span class="crayon-i">print</span><span class="crayon-h"> </span><span class="crayon-sy">|</span><span class="crayon-h"> </span><span class="crayon-e">xargs </span><span class="crayon-i">grep</span><span class="crayon-h"> </span><span class="crayon-s">"search_string"</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<h3>あるフォルダ下のファイルを検索し、特定文字列を置換</h4>
<p></p>

		<div id="crayon-64953fd5954be030239999" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
find /path/to/files -name "*.sh" -print | xargs sed -i 's@string_before_replace@string_after_replace@g'</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd5954be030239999-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd5954be030239999-1"><span class="crayon-i">find</span><span class="crayon-h"> </span>/<span class="crayon-i">path</span>/<span class="crayon-st">to</span>/<span class="crayon-i">files</span><span class="crayon-h"> </span>-<span class="crayon-i">name</span><span class="crayon-h"> </span><span class="crayon-s">"*.sh"</span><span class="crayon-h"> </span>-<span class="crayon-i">print</span><span class="crayon-h"> </span><span class="crayon-sy">|</span><span class="crayon-h"> </span><span class="crayon-e">xargs </span><span class="crayon-i">sed</span><span class="crayon-h"> </span>-<span class="crayon-i">i</span><span class="crayon-h"> </span><span class="crayon-s">'s@string_before_replace@string_after_replace@g'</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>※置換操作の前に、ファイルのバックアップを取ったほうがより安全でオススメです。</p>
<h3>あるフォルダ下のファイルを検索し、子フォルダだけ権限変更</h4>
<p></p>

		<div id="crayon-64953fd5954c0642220699" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
find /path/to/files -type d -print0 | xargs -0 chmod 777</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd5954c0642220699-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd5954c0642220699-1"><span class="crayon-i">find</span><span class="crayon-h"> </span>/<span class="crayon-i">path</span>/<span class="crayon-st">to</span>/<span class="crayon-i">files</span><span class="crayon-h"> </span>-<span class="crayon-i">type</span><span class="crayon-h"> </span><span class="crayon-i">d</span><span class="crayon-h"> </span>-<span class="crayon-i">print0</span><span class="crayon-h"> </span><span class="crayon-sy">|</span><span class="crayon-h"> </span><span class="crayon-i">xargs</span><span class="crayon-h"> </span>-<span class="crayon-cn">0</span><span class="crayon-h"> </span><span class="crayon-i">chmod</span><span class="crayon-h"> </span><span class="crayon-cn">777</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>※findコマンドもある程度一括操作ができるようです。</p>

【Linux】知って便利な一括操作コマンド

PHPを手軽に使って、画像のサムネイルを出力する方法

<p>Let&#8217;s start a new blog post. Today I would like to introduce a book,</p>
<p>of course, if you’re an entrepreneur, designer, programmer, or marketer working on a big idea and want to build</p>
<p style="padding-left: 30px;"><em><strong>A successful web application</strong></em></p>
<p style="padding-left: 30px;"><em><strong>with the smarter, faster, easier ways</strong></em><em><strong><br />
</strong></em></p>
<p>Here&#8217;s we go: <strong>Getting Real</strong> (http://gettingreal.37signals.com/)</p>
<p>This book is created by <strong>37signals </strong>that produces awesome software products and one open source web application framework(<strong><em>Ruby on Rails</em></strong>).</p>
<p>Book Outlines:</p>
<p style="padding-left: 30px;">1) Introduction</p>
<p style="padding-left: 60px;"><em>&#8211; Getting Real is actually building the real things what customers need and eliminates anything they don’t. </em></p>
<p style="padding-left: 60px;"><em>&#8211; You don’t need tons of money or a huge team or a lengthy development cycle to build great software.</em></p>
<p style="padding-left: 30px;"><em></em>2) The Starting Line</p>
<p style="padding-left: 60px;"><em>&#8211; Build Less : </em>Underdo your competition</p>
<p style="padding-left: 60px;"><em>&#8211; What’s Your Problem? : </em>Build software for yourself</p>
<p style="padding-left: 60px;"><em>&#8211; Fund Yourself : </em>Outside money is plan B</p>
<p style="padding-left: 60px;"><em>&#8211; Fix Time and Budget, Flex Scope : </em>Launch on time and on budget</p>
<p style="padding-left: 60px;"><em>&#8211; Have an Enemy : </em>Pick a fight</p>
<p style="padding-left: 60px;"><em>&#8211; It Shouldn&#8217;t be a Chore: </em>The less your app is a chore to build, the better it will be. Keep it small and manageable so you can actually enjoy the process.</p>
<p style="padding-left: 30px;">3) Stay Lean</p>
<p style="padding-left: 30px;">4) Priorities</p>
<p style="padding-left: 30px;">5) Feature Selection</p>
<p style="padding-left: 30px;">6) Process</p>
<p style="padding-left: 30px;">7) The Organization</p>
<p style="padding-left: 30px;">8) Staffing</p>
<p style="padding-left: 30px;">9) Interface Design</p>
<p style="padding-left: 30px;">10) Code</p>
<p style="padding-left: 30px;">11) Words</p>
<p style="padding-left: 30px;">12) Pricing and Signup</p>
<p style="padding-left: 30px;">13) Promotion</p>
<p style="padding-left: 30px;">14) Support</p>
<p style="padding-left: 30px;">15) Post-Launch</p>
<p style="padding-left: 30px;">16) Conclusion</p>
<p>I just introduced just top two chapters and if you would like to dig more, for completed reference, I attach English PDF version of this book. Please take a look and dig the content as much as you can.</p>
<p><a href="/uploads-archive/2013/12/Getting-Real-ebook-by-37signals.pdf">Getting Real [ebook by 37signals]</a></p>
<p>Enjoy!</p>


Getting Real for startups

iOS7みたいにクリックでそこからページが飛び出してくるような効果をjQueryで作ってみる

Ajax でデータ送信、受信

<p>以前にiphone5で<a href="/officer/iphone5au%E3%81%AE%E6%B6%B2%E6%99%B6%E5%89%B2%E3%82%8C%E3%81%8B%E3%82%89%E3%82%B8%E3%83%BC%E3%83%8B%E3%82%A2%E3%82%B9%E3%83%90%E3%83%BC%E3%81%A7%E4%BA%A4%E6%8F%9B%E3%81%BE%E3%81%A7%E3%81%AE%E9%A1%9B.html" target="_blank">ジーニアスバーにお世話になった記事</a>を書きましたが、今回はmacbookairの電源ケーブルが断線したということで、ジーニアスバーに行ってきました。</p>
<h2>Genius Barの予約</h3>
<p>前回ご紹介した通り、Genius Barへの予約はiphoneアプリの「<strong>Apple Store</strong>」が便利です。</p>
<p>今回は、行ったことのない銀座のapple storeの予約をしました。土曜日ということもありましが、午後18時の一箇所しか空いておりませんでした。</p>
<h2>Genius Barにて</h3>
<p>銀座のGenius Barは4階にあるんですね。おしゃれな透明なエレベーターに乗り、2階、3階のイベントスペースのようなフロアを見ながら上がっていきます。</p>
<p>4階に着くとあいかわらず盛況です。予約した旨を伝えて待っておりましたが、やはり、10分〜15分程度は待ちました。</p>
<p>ようやく通され、早速電源ケーブルが断線したという要件を伝えると</p>
<p>「<strong>macのシリアルを確認させてください！</strong>」</p>
<p>と一言。</p>
<p>「え、電源ケーブルは持って来たけどmacの本体なんて持って来てないんですけど・・・・・。」</p>
<p>ということでサポートを受けるためには、macのシリアルが必要です。</p>
<p>私の場合は、購入履歴から辿ることが出来ました。</p>
<p>但し、更なる関門が。</p>
<p>当たり前の話といえば当たり前なんですが、<strong>保証期間の1年</strong>がどちらにしても過ぎておりました。</p>
<p>また、最後に断線の状況を見てもらったところ、自然故障の類でないと保証が出来ない可能性があるとのことでした。</p>
<p>&nbsp;</p>
<p>ということで、同時に断線した購入一年以内のiphone5のケーブルだけ変えてもらって帰りました。</p>
<h2>まとめ</h3>
<p>ここで、スタッフの方にお聞きした内容を含めてまとめます。</p>
<ul>
<li>電源ケーブルでもmac本体を持っていくか、シリアル番号を控えて持っていけ！</li>
</ul>
<p>→本体からシリアルIDの調べ方は<a href="http://support.apple.com/kb/HT1941?viewlocale=ja_JP" target="_blank">こちら</a>、osからシリアルIDの調べ方は<a href="http://support.apple.com/kb/HT1529?viewlocale=ja_JP" target="_blank">こちら</a></p>
<ul>
<li>本体保証は1年間。3年間の延長サポートを受けたければAppleCare Protection Plan に入れ！</li>
</ul>
<p>→<a href="http://store.apple.com/jp/product/MD015J/A/macbook-macbook-air-13-macbook-pro-applecare-protection-plan" target="_blank">macbook air</a>で￥24,800、<a href="http://store.apple.com/jp/product/MD013J/A/applecare-protection-plan-for-15%E3%82%A4%E3%83%B3%E3%83%8117%E3%82%A4%E3%83%B3%E3%83%81macbook-pro15%E3%82%A4%E3%83%B3%E3%83%81macbook-pro-retina%E3%83%87%E3%82%A3%E3%82%B9%E3%83%97%E3%83%AC%E3%82%A4%E3%83%A2%E3%83%87%E3%83%AB" target="_blank">macbook pro ratina 15</a>なら￥34,800だ！高い！</p>
<blockquote><p>AppleCare Protection Plan（3年）<br />
・本体購入から一年以内ならいつでも加入できる。<br />
・電源アダプタなどの付属アクセサリも保証。<br />
・落下/物損/水没/天災/盗難等は保証外。<br />
・保証内の修理であれば保証額、保証回数共に無制限。<br />
・無制限の電話サポート<br />
・修理に出す際の送料も無料<br />
・消耗したバッテリーの交換は保証外<br />
・メモリやHDを自分で交換した場合、交換の際の不備が故障の原因と認定された場合は保証外</p></blockquote>
<ul>
<li>状態によっては、故意による故障とみなされることもあるから注意しろ！</li>
</ul>
<p>→巻き方はフワッと<a href="http://www.monster-dive.com/blog/tools_software/20131005_001081.php" target="_blank">このサイト</a>のお手本のように。</p>
<h2>あとがき</h3>
<p>電源ケーブルが交換してもらえなかったので、amazonでとても安い互換アダプターがあったので購入しましたが、初日から接触が悪く充電出来ないことがあるという有り様で即返品させてもらいました。</p>
<p>レビューを見てみると大分個体差があるようで、私はハズレを引いたようでしたorz</p>


macbook電源ケーブルの断線からジーニアスバーまでの顛末

<p>今更ながらですが、google fontsについての記事を書くことにしました。</p>
<p>1,2年前ぐらいwebフォントが出現し、モリサワ等の会社もwebフォントを提供していますが、<br />
webフォントを実際のサイトで使用したことはまだありません。</p>
<p>その理由としては有料ということもあると思いますが、そこまでフォントに対してこだわるお客さんがいないといった所でしょうか。。webフォントを読み込むのに時間がかかってユーザビリティが悪いといった懸念もあるように思います。</p>
<p>google fontsは無料かつ商用可で、特に登録もなく利用できるのですが、<br />
こちらは英語しかないためまだ使用に至っていません。</p>
<p>結局の所、今後もしばらくはwebフォントを使う予定はないかもしれません笑</p>
<p>とはいえ、使い方を学んでおくにこしたことはないので、<br />
軽くでは試してみたので、そちらとその流れを紹介したいと思います。</p>
<p><a class="demo" href="/demo/abe/36/" target="_blank">DEMO</a></p>
<h2>Google Fontsを使ってみた</h3>
<p>まずは、<a href="http://www.google.com/fonts" target="_blank">Google Fonts</a>で使いたいフォントを選びます。</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3728" alt="Google Fonts" src="/uploads-archive/2013/12/Google-Fonts-1024x592.jpg" width="630" height="364" srcset="/uploads-archive/2013/12/Google-Fonts-1024x592.jpg 1024w, /uploads-archive/2013/12/Google-Fonts-300x173.jpg 300w, /uploads-archive/2013/12/Google-Fonts-228x131.jpg 228w, /uploads-archive/2013/12/Google-Fonts.jpg 1206w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>&nbsp;</p>
<p>今は全部629種類のフォントがあるようですね。<br />
基本的にはこの画面から、<br />
フォントのカテゴリー（Serif,Sans Serif,Display,Handwriting）やThickness,Slant,Widthを設定して検索できます。</p>
<p>フォントの右下の⇒みたいなマークを押すと、</p>
<p>詳細画面に遷移します。</p>
<h2>webフォントのスクリプトタグをゲット！</h3>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2013/12/Google-Fonts2.jpg"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3727" alt="Google Fonts2" src="/uploads-archive/2013/12/Google-Fonts2-1024x592.jpg" width="630" height="364" srcset="/uploads-archive/2013/12/Google-Fonts2-1024x592.jpg 1024w, /uploads-archive/2013/12/Google-Fonts2-300x173.jpg 300w, /uploads-archive/2013/12/Google-Fonts2-228x131.jpg 228w, /uploads-archive/2013/12/Google-Fonts2.jpg 1206w" sizes="(max-width: 630px) 100vw, 630px" /></a></p>
<p>右側のストップウォッチみたいものはそのフォントを読み込むのかかる時間を表しているようです。</p>
<p>このページの下に、以下のようなwebフォントを読み込むスクリプトタグがあります。</p>
<p>&nbsp;</p>

		<div id="crayon-64953fd594c5c654787806" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;link href='http://fonts.googleapis.com/css?family=Wellfleet' rel='stylesheet' type='text/css'&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd594c5c654787806-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd594c5c654787806-1"><span class="crayon-r ">&lt;link </span><span class="crayon-e ">href</span>=<span class="crayon-s ">'http://fonts.googleapis.com/css?family=Wellfleet'</span><span class="crayon-h"> </span><span class="crayon-e ">rel</span>=<span class="crayon-s ">'stylesheet'</span><span class="crayon-h"> </span><span class="crayon-e ">type</span>=<span class="crayon-s ">'text/css'</span><span class="crayon-r ">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>もうこれでOKです！</p>
<p>&nbsp;</p>
<p>あとはcssで、</p>
<p></p>

		<div id="crayon-64953fd594c60148252762" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">CSS</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
font-family: 'Wellfleet', cursive;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd594c60148252762-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd594c60148252762-1"><span class="crayon-e ">font-family</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'Wellfleet'</span><span class="crayon-i ">,</span><span class="crayon-h"> </span><span class="crayon-i ">cursive</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>としてすればOKです！</p>
<p>非常に簡単ですね！</p>
<p>&nbsp;</p>
<h2>Google Fontsを選ぶのに便利なサイト</h3>
<p>以下のサイトでは、実際にgoogle fontsを試せて、ダウンロードまでできるサイトです。<br />
フォントの数が多いのでこちらで試しながらフォントを決めるのがオススメです！</p>
<p><a href="http://typecast.com/preview/google" class="link" target="_blank">Typecast &#8211; Public Demo | Design in the browser with web fonts and real content</a></p>
<p>また、googlefontsとは関係ないのですが、<br />
フォント選びということで、便利なサイトを紹介します。</p>
<p>好きな文字/単語を、<br />
自分のパソコンに入っているフォントで一覧で表示してくれるサイトです。<br />
一つ一つPhotoshopで試すのはちょっと面倒ですよね！<br />
意外と役に経ちます。</p>
<p><a href="http://wordmark.it/" class="link" target="_blank">wordmark.it &#8211; helps you choose fonts!</a></p>
<p>&nbsp;<br />
&nbsp;<br />
&nbsp;</p>
<p>google fontsで日本語出してくれないかな〜</p>

Google Fontsを使ってみた＆フォント選びに便利なツール

<p>There is a bit differences between Symfony 2.0.x and latest Symfony versions.</p>
<p>For symfony 2.o.x, firstly download the zip file from http://symfony.com/download(Legacy Release/Pick a specific version)</p>
<p>File and folder structure in symfony 2.0.x ,</p>
<p>Symfony</p>
<p style="padding-left: 30px;">&#8211; app</p>
<p style="padding-left: 30px;">&#8211; bin</p>
<p style="padding-left: 30px;">&#8211; deps</p>
<p style="padding-left: 30px;">&#8211; deps.lock</p>
<p style="padding-left: 30px;">&#8211; src</p>
<p style="padding-left: 30px;">&#8211; web</p>
<p>There is no &#8220;vendor&#8221; folder after archiving symfony 2.o.x.</p>
<p>To create &#8220;vendor&#8221; folder including all required third-party bundles: assetic, bundles, doctrine, monolog, symfony, twig etc</p>
<p>Please open Terminal(command line):</p>
<p><strong>$ cd /var/www/html/Symfony/</strong></p>
<p>* please be sure to add <strong>https</strong> to all links in &#8220;<strong>deps</strong>&#8221; file.</p>
<p>example:</p>
<p>[original data in deps]</p>
<p style="padding-left: 30px;">[symfony]</p>
<p style="padding-left: 30px;">    git=http://github.com/symfony/symfony.git</p>
<p style="padding-left: 30px;">    version=v2.0.1</p>
<p>[edited]</p>
<p style="padding-left: 30px;">[symfony]</p>
<p style="padding-left: 30px;">    git=http<span style="text-decoration: underline;"><strong>s</strong></span>://github.com/symfony/symfony.git</p>
<p style="padding-left: 30px;">    version=v2.0.1</p>
<p>Then if it&#8217;s firstly installation symfony, type:</p>
<p><strong>$ php bin/vendors install</strong></p>
<p>bin/vendors will firstly look &#8220;deps&#8221; files and will automatically create &#8220;vendor&#8221; folder under /var/www/html/Symfony/</p>
<p>Or if you want to add new bundle or update existing ones:</p>
<p><strong>$ php bin/vendors update</strong></p>
<p>If you want to know, which symfony version did you install?</p>
<p><strong>$ php app/console &#8211;version</strong></p>
<p>If you want to know, how to use &#8220;php app/console&#8221; command,</p>
<p><strong>$ php app/console &#8211;help</strong></p>
<p style="text-align: center;">##############################</p>
<p>In Symfony latest version (2.3 or 2.4):</p>
<p>We can install symfony via terminal easily.</p>
<p>Please install composer:(on Linux disto)</p>
<p><strong>$ curl -sS https://getcomposer.org/installer | php </strong>(assumed that you&#8217;ve already installed &#8220;curl&#8221; command)</p>
<p><strong>$ mv composer.phar /usr/local/bin/composer</strong></p>
<p>If so, you&#8217;ve already installed &#8220;composer&#8221; in your computer and can use &#8220;composer&#8221; command in Terminal.</p>
<p><strong>$ cd /var/www/html/</strong></p>

		<div id="crayon-64953fd594a80493195022" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$ composer create-project symfony/framework-standard-edition path/ 2.3.7</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd594a80493195022-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd594a80493195022-1"><span class="crayon-sy">$</span><span class="crayon-h"> </span><span class="crayon-e">composer </span><span class="crayon-i">create</span>-<span class="crayon-e">project </span><span class="crayon-i">symfony</span>/<span class="crayon-i">framework</span>-<span class="crayon-i">standard</span>-<span class="crayon-e">edition </span><span class="crayon-i">path</span>/<span class="crayon-h"> </span><span class="crayon-cn">2.3.7</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>Then composer will install symfony 2.3.7 (as above command) to /var/www/html/Symfony</p>
<p>Folder and file structure in symfony 2.3.7:</p>
<p style="padding-left: 30px;">&#8211; app</p>
<p style="padding-left: 30px;">&#8211; bin</p>
<p style="padding-left: 30px;">&#8211; composer.json</p>
<p style="padding-left: 30px;">&#8211; composer.lock</p>
<p style="padding-left: 30px;">&#8211; src</p>
<p style="padding-left: 30px;">&#8211; vendor</p>
<p style="padding-left: 30px;">&#8211; web</p>
<p><strong>$ cd Symfony</strong></p>
<p><strong>$ composer install</strong></p>
<p>composer command will firstly look &#8220;composer.json&#8221; and automatically install required bundles.</p>
<p>If you want to add new bundle or update existing one,</p>
<p><strong>$ composer update</strong></p>
<p>If you want to know, which symfony version did you install?</p>
<p><strong>$ php app/console &#8211;version</strong></p>
<p>The End!</p>

Differences between Symfony 2.0.x and latest Symfony versions installation

git再入門

<p>My first experience in installation symfony 2 on Mac made me crazy. I had experienced installing it on Ubuntu Linux and it worked fine. I used to setup web development on Ubuntu Linux and mobile development on Mac.</p>
<p>In Mac, for web development, I used MAMP (<strong>Macintosh, Apache, Mysql and PHP</strong>) instead of using built-in PHP and Apache Web server. I know that its time saving but it can&#8217;t make a complete and perfect development environment. But setting up built-in web server and using PHP take time to completely setup. So I was lazy to set it up.</p>
<p>In previous days, I need to install symfony 2 on my Mac. I thought installing a PHP framework is piece of cake for me. Because I&#8217;ve many experience since earlier. But, when I try to install symfony, I can&#8217;t get perfect installation. Installation stages reported back many errors. I was googling again and again to solve it. Finally, I found that Symfony 2 uses</p>
<ul>
<li>Alternative PHP Cache (APC) 3.1.13</li>
</ul>
<p>But in MAMP package, it can offer &#8220;Alternative PHP Cache (APC) 3.1.9&#8221; only. I can&#8217;t upgrade MAMP version anymore. If I will continue want to use current MAMP version, I can only downgrade symfony version, it may be version 1 of Symfony.</p>
<p>So, finally, I completely gave up using MAMP package and start setting up all required tools for web development in my local laptop. It took about half day to fully setting up it manually, but its the most suitable development for a developer.</p>
<p>Yes, of course, we developer guys like to setup our own web development environment by ourselves instead of using the ready-made already setting up working environment.</p>
<p>Ok, this is just my first experience when I try to install symfony 2 with MAMP.</p>
<p>Thank for reading at the end.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


Symfony 2 installation problem with MAMP

NivoスライダーみたいなエフェクトをjQueryで組んでみる

<p>今まで気付かなかった！GoogleAppsの空き容量が復活する方法があったのでご紹介します。</p>
<p>弊社では、GoogleAppsを導入し、Gmail、Googleカレンダー、Googleドライブで業務を遂行しています。</p>
<p>無料プランが存在していた時に導入をしていたので、幸い50ユーザーまで無料で使うことが出来ますが、容量が15GBと制限されています。</p>
<p>この15GBの容量というのが、GmailとGoogleドライブを合算した容量となっておりまして、日々の業務を遂行する上で、プレゼン資料や、psdやaiファイルなどを共有しているとあっという間に数GBになってしまいます。</p>
<p>ですので、日々プロジェクトが終了すると、社内のローカルサーバにファイルを移動して、Googleドライブの容量を確保するという運用をしておりますが、先日気づくと既に14GBほど、空き容量が1GBを切っている状態になっていました。</p>
<p>定期的にGoogleドライブのファイルは移動しているし、</p>
<p><a href="https://www.google.com/settings/storage">https://www.google.com/settings/storage</a></p>
<p>ここで容量を見てみると、Googleドライブが半分以上利用していることになっていました。</p>
<p>何よりPCで保存してあるGoogleドライブの容量と異なっていることが気になりました。</p>
<p>余計なファイルでもないかとWeb版のGoogleドライブにアクセスして判明致しました。</p>
<p><a href="/uploads-archive/2013/11/1e3b01d5bb877c22c335a08f09763d98.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3687" alt="スター付き_-_Google_Drive-6" src="/uploads-archive/2013/11/1e3b01d5bb877c22c335a08f09763d98-300x196.jpg" width="300" height="196" srcset="/uploads-archive/2013/11/1e3b01d5bb877c22c335a08f09763d98-300x196.jpg 300w, /uploads-archive/2013/11/1e3b01d5bb877c22c335a08f09763d98-228x149.jpg 228w, /uploads-archive/2013/11/1e3b01d5bb877c22c335a08f09763d98.jpg 866w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>&nbsp;</p>
<p>なんと左カラムに「ゴミ箱」なるものが！！！</p>
<p>ここに今まで削除したファイルがたんまり溜まっていました。</p>
<p>ゴミ箱を空にしたところ</p>
<p><a href="/uploads-archive/2013/11/0a415c7d9e8bffbba020d538ce31e468.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3688" alt="ドライブ_ストレージ-2" src="/uploads-archive/2013/11/0a415c7d9e8bffbba020d538ce31e468-295x300.jpg" width="295" height="300" srcset="/uploads-archive/2013/11/0a415c7d9e8bffbba020d538ce31e468-295x300.jpg 295w, /uploads-archive/2013/11/0a415c7d9e8bffbba020d538ce31e468-228x231.jpg 228w, /uploads-archive/2013/11/0a415c7d9e8bffbba020d538ce31e468.jpg 511w" sizes="(max-width: 295px) 100vw, 295px" /></a></p>
<p>&nbsp;</p>
<p>5GB以上の空き容量が出来ましたとさ。</p>
<p>Web版は滅多にアクセスしないからそりゃ気が付かないって。</p>
<p>容量が逼迫している人はどうぞお試しあれ。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2013/12/12

2013/12/11

2013/12/11

2013/12/11

2013/12/11

2013/12/10

2013/12/10

2013/12/10

2013/12/04

2013/12/04

2013/12/04

2013/12/04

2013/12/04

2013/12/03

2013/11/27

2013/11/27

2013/11/27

2013/11/27