炊きたてのご飯が食べたい

定時に帰れるっていいね。自宅勤務できるっていいね。子どもと炊きたてのご飯が食べられる。アクトインディでは積極的にエンジニアを募集中です。

mac 環境の vagrant で capstrano の rails ( github ) のデプロイを試す

vagrantbox から Debian の box 取ってきて、rails環境を構築。 1. vagrantbox のサイトから取ってきてDebianを設定する 2. git のインストール 3. rbenv , ruby-build の設定 4. ruby のインストール 5. rails環境の設定 capstrano のインストール 1. 適当…

競馬力 – 1タップで馬の実力をチェック!「実力」「平均タイム」「コースの特徴」3つのポイントを把握して勝率アップ

1タップで馬の実力をチェック!「実力」「平均タイム」「コースの特徴」3つのポイントを把握して勝率アップ。 競馬を始めたばかりの初心者の方におすすめのアプリです。 競馬力では3つのポイントが分かります。 1.レースタイムを入力して馬の実力をチェック …

ユーザー側で任意にアイテムの表示順を更新する(sqlite3)

ユーザーが好きなようにアイテムの並び替えを行う際、どのように作成するのが良いのか悩みました。単純にアイテム毎に並び順のカラムをつけ、変更がある度に全てのアイテムの並び順の値を1から番号を割り振るのは、アイテム数が多くなって来たときに更新対象…

Amazon EC2(AWS) サイトのコピーを作成(サービス断なし)

サイトのコピーは、AWSの管理画面上から簡単に行えます。また、稼働中のサービスを止めることなく作業を行うことが出来るので、何かと覚えておくと便利です。 コピーしたいサイトのEBSボリュームから、スナップショットを作成 作られたスナップショットからA…

mysqldumpをcronで1日1回取得し、バックアップ用ファイルを保存する

●環境:AWSのEC2でOSはAmazon Linux ec2-userのホームディレクトリ /home/ec2-user 内にmysqldumpファイルを置くフォルダを作成 mysqldumpファイルを取得するシェルスクリプトを作成する 動作確認し、問題がなかれば、cron.dailyにシェルスクリプトを配置 1.…

Amazon EC2(AWS) t1.microでWordPress運用

このサイトはAWSのt1.microで運営しています。2013年1月の月間訪問者数は約10,000。1日の訪問数は500人ほどのサイトです。 さくらのVPSから、AWSに移設を決め、できることなら、毎月のサーバー代を抑えたかったので、一番安いt1.microで運営することに決めま…

バックアップ取得編 - Amazon EC2(AWS) Amazon LinuxでWordPress運用

以前、ファーストサーバーで、サーバー上のファイル一式と、DBの情報が全部消去される障害がありました。僕はその被害者の一人です。結局のところ、削除されたデータは復旧されず、幸い、記事データは手元に手動で取得していたDBのdumpファイルがあったらか…

WordPress(Page Speed対応) - KeepAlive を有効にする

難易度 ★★★大変 概要 Webページをブラウザで表示するためには、サーバーに置いてあるhtmlソースや画像といった情報を、閲覧しているPCに一度ダウンロードする必要があります。普通にページを見ているだけでは意識しませんが、htmlの構成は、CSSファイルや画…

WordPress(Page Speed対応) - キャッシュ バリデータを指定する(プロキシーキャッシ(Proxy Cache)を活用する)

難易度 ★★★大変 概要 公開プロキシーサーバーのキャッシュを利用すると、サイトを訪問したことのないユーザーにもキャッシュを利用することができます。プロキシーはキャッシュ機能を実装しているので、過去にサーバから受信したコンテンツを一定期間保持し…

WordPress(Page Speed対応) - ブラウザのキャッシュを活用する

難易度 ★★★大変 概要 キャッシュ(ブラウザがローカルに保存したファイルを使用して、WEBページを表示すること)を友好的に活用することで、ネットワーク経由でのファイルのダウンロード処理が省略され、サイトの高速化、サーバの負荷軽減に繋がります。 静…

WordPress(Page Speed対応) - 圧縮を有効にする

難易度 ★★★大変 概要 Webサーバがファイルを圧縮処理(gzip、deflate圧縮)をして送ることで、送信するデータ量が削減され、ファイルのダウンロード時間の短縮につながります。圧縮したファイルはブラウザが勝手に解凍して表示してくれます。最近のブラウザ…

WordPress(Page Speed対応) - 誤りのあるリクエストを送信しない

難易度 ★すごく簡単 概要 サイト内でリンク切れとなっているページ、画像、CSS、JSを無くしましょう。といった施策です。JSやCSSファイルのようなリソースをリクエストするファイルのリンク切れは、処理をブロックすることになり、サイトをクラッシュさせて…

WordPress(Page Speed対応) - 画像を最適化する

難易度 ★すごく簡単 概要 画像を最適化して、ファイル容量をできるだけ小さくしましょう。といった施策です。 カメラで撮影した画像には、カメラの製品名や撮影日時などのメタ情報がデータとして入っていたり、表示には影響しないような不要なスペースがあっ…

WordPress(Page Speed対応) - 変更後のサイズで画像を提供する

難易度 ★すごく簡単 概要 ブラウザがページをレイアウトをするとき、画像のような置換要素(hr、isindex、applet、button、embed、iframe、ilayer、img、input、layer、object、select、spacer、textarea など)の周りではフロー(要素の大きさ、位置などの…

WordPressのrel="prev"とrel="next"をnextpageで分割した記事のURLに変更する

WordPressでは、自動的にrel="prev"とrel="next"がhead内に記述されますが、nextpageによる記事の区切りではなく、前の記事と次の記事を示すタグとして使用されています。 Googleが複数ページにまたがる記事の関連性を知るためにprevとnextをサポートしまし…

WordPress(Page Speed対応) - 画像のサイズを指定する

難易度 ★すごく簡単 概要 すべての画像の幅と高さを指定することで、不要なリフロー(要素の大きさ、位置などの再計算)やリペイント(描画)が減り、レンダリング(画面への表示)をより速く行うことができます。 ページを表示するときには、少なくとも1回…

WordPress(Page Speed対応) - CSS スプライトに画像をまとめる

難易度 ★★★大変 概要 複数の画像を一つの画像にまとめて、ブラウザの読み込みの処理を少なくする手法です。 外部ファイルを読み込む際には、「TCP接続設定」「HTTP要求」「DNS名前解決」の3つのレスポンスが発生します。複数の画像をまとめることで、このレ…

WordPress(Page Speed対応) - JavaScript を縮小する

難易度 ★★まぁ簡単 概要 JavaScriptファイルの改行やコメントアウトを消して、ファイルサイズを減らすことで、ファイルの読み込み時間がちょっと短くなるよ。っていう施策です。 [js]var url = window.location.href; alert(url);[/js] ↓ [js]var url=window…

WordPress(Page Speed対応) - 非同期リソースを使用する

難易度 ★★★★すごく大変 概要 ブラウザがJavascriptをパース(プログラムで扱えるようなデータに変換すること)している間は、そのJavascript以降に書かれているHTMLのレンダリング処理(画面に表示する内容を描画する処理)が止まり、ページの表示に待ちが発…

WordPress(Page Speed対応) - JavaScript の解析を遅延する

難易度 ★★★★すごく大変 概要 ブラウザは、Javascriptで書かれているコードをパース(プログラムで扱えるようなデータに変換すること)します。Javascriptの実行が必要とされるまでパースを遅らせることで、ページ表示には必要のないレンダリング(画面に表示…

WordPress(Page Speed対応) - 小さな JavaScript をインライン化する

難易度 ★すごく簡単 概要 対応方法は大きく3つあります。 htmlに直接インラインで記述する 小さなJavascriptは他のJavascriptと合わせる WordPressプラグイン – Head Cleanerの「CSS と JavaScript を、サーバ上にキャッシュする → 複数の JavaScript を結合…

WordPress(Page Speed対応) – CSS を縮小する

難易度 ★すごく簡単 概要 CSSファイルの改行やコメントアウトを消して、ファイルサイズを減らすことで、CSSの読み込み時間がちょっと短くなるよ。っていう試作です。 [css].menu{ font-size:1em; width:100%; } .sub{ font-size:0.8em; width:80%; }[/css] ↓…

WordPress(Page Speed対応) – スタイルシートとスクリプトの順序を最適化する

難易度 ★すごく簡単 概要 CSSを最初に読み込み、Javascriptは後から読み込む。ブラウザは一つのホストに対し、複数の同時接続が可能だが、Javascript同士の並列ダウンロードは行えないみたい。CSSとJavascriptの読み込みがあべこべだと、CSSの並列ダウンロー…

WordPress(Page Speed対応) – CSS をドキュメント ヘッドに含める

難易度 ★すごく簡単 概要 CSS(外部CSS、インラインスタイル両方とも)はheadの中で読み込んでね。ということです。CSSが一番最初に読み込まれることで、ブラウザのプログレッシブレンダリング(Javascritpの処理の実行より、デザインなど、視覚的な部分をな…

Amazon EC2(AWS) EBSボリューム(HDDの容量)の変更

良くありがちな手違いとして、新規でインスタンスを作成した場合、EBSの容量をデフォルトの7GBで作成してしまうことがあります。ある程度、構築が進んでから気付くなんてことも。ここでは、EBSボリュームの増やし方を説明します。 手順は下記になります。 Ap…

WordPress(Page Speed対応) – 小さな CSS をインライン化する

難易度 ★すごく簡単 概要 対応方法は大きく3つあります。 htmlのhead領域に直接インラインで記述する 小さなCSSは他のCSSと合わせる WordPressプラグイン - Head Cleanerの「CSS と JavaScript を、サーバ上にキャッシュする → 複数の CSS を結合する」を使…

WordPress(Page Speed対応) – CSS @import を使用しない

難易度 ★すごく簡単 概要 ブラウザにはパラレルロードという、並行してコンテンツを読み込む仕組みがあります。一つのファイルの読み込みが完了してから、次のファイルの読み込みに移るのではなく、複数のファイルを同時に読み込み、解析の速度を向上される…

WordPress(Page Speed対応) – HTML を縮小する

難易度 ★すごく簡単 概要 html内の改行やスペースを削除して、htmlドキュメントの容量を小さくすることです。 [html]<div> <p>aaa</p> </div>[/html] ↓ [html]<div><p>aaa</p></div>[/html] 元のソースを縮小してしまうと今後の運用に多大なダメージになってしまうので、WordPressプラグインHead …

WordPress(Page Speed対応) – 静的リソースからクエリ文字列を削除する

難易度 ★★まぁ簡単 概要 URL に「?」が含まれている場合、一部のプロキシ キャッシュ サーバーでキャッシュされない為、クエリをつける必要のないファイルはクエリを削除しなさいということです。 [html]<script type="text/javascript" src="">http://asobicocoro.com/tips/wp-includes/js/jquery/…

WordPress(Page Speed対応) - 重複するリソースは 1 つの URL から提供する

難易度 ★★まぁ簡単 概要 同じ内容のファイルだが、クエリで分けている、異なる場所から同一ファイルを読み込んでいる場合、一つにまとめましょう。ということです。WordPressの場合は、自動でJqueryのファイルが読み込まれたりもするので、必要のないJavascr…

WordPress(Page Speed対応) - 文字セットを指定する

難易度 ★すごく簡単 ★★まぁ簡単 ★★★大変 ★★★★すごく大変 ★★★★★世の中金次第 難易度 ★すごく簡単 対応 HTMLヘッダーにcharset(文字セット)を指定しましょう。といった内容です。 指定がないと、ブラウザが文字コードの自動判定処理をするので、指定をして必要…

WordPress - Page Speedを参考にフロントエンドのパフォーマンスチューニング

htmlのコーディングルールやキャッシュの設定など、サイトを作成するときに、毎回気をつけるポイントなので、覚えておいて損はないですね。「塵も積もれば山となる」です。 2012年9月4日現在のPage Speedでピックアップされる項目は全部で26個。各々の具体的…

WordPressはF5長押しでサーバーがダウンする

最近、MovabletypeからWordPressにサイトを移設しました。 Movabletypeでは、記事の管理にデータベースを使用するものの、Webサイトに公開する際には、静的ページを生成して公開する形なので、特にパフォーマンスを意識することはありませんでしたが、WordPr…

Amazon EC2(AWS) インスタンスタイプの変更(t1.microからt1.smallへ)

インスタンスタイプ(t1.microやt1.smallなど)の変更は、AWS Management Consoleの管理画面上から簡単に行うことができます。 インスタンスタイプを変更したいインスタンスの停止 AWS Management Consoleでインスタンスタイプの変更 インスタンスの再起動で…

Amazon EC2(AWS) インスタンスをコピーしてサイトを複製

インスタンスのコピーは、AWSの管理画面上から簡単に行うことができます。 Apache、MySQLの停止 AMIを作成 Apache、MySQLの開始 作成したAMIからインスタンスを起動 1.Apache、MySQLの停止 稼働中のインスタンスからAMIを作成するため、稼働中のサービスを停…

LAMP環境構築編 - Amazon EC2(AWS) Amazon LinuxでWordPress運用

Amazon Linuxの場合、初期のログインユーザーはec2-userとなります。 Webのルートドキュメントは/var/www/htmlです。 sshにec2-userでログイン sudo su - でrootに変更してLAMP環境の構築 rpmforgeを利用してyumでphpmyadminのインストール WordPressで使用…

Instance Managementの各項目の説明 - Amazon EC2(AWS)

インスタンスを右クリックして実行できる各種コマンドをまとめていきたいと思います。実行してから「やっちまった!!!!!」と思わないように…。間違えている箇所とかあったら、指摘してもらえると助かります。 Connect [ 料金 ] 無料 [ 使用条件 ] Instan…

インスタンス作成編 - Amazon EC2(AWS) Amazon LinuxでWordPress運用

大体の概算の料金が分かりましたので、次はインスタンスの作成までまとめたいと思います。 インスタンスの作成までの手順は大きく分けて3つです。 AWS Management ConsoleでKey Pairsの作成(SSH接続用のプライベートキーの作成) AWS Management Consoleで…

料金編 - Amazon EC2(AWS) Amazon LinuxでWordPress運用

EC2でWordPressで構築したサイトを運用することになりました。さくらのVPSでLAMP環境の運用は何度もやっていたのですが、EC2で構築するのは初めてだったのでメモです。 Amazon EC2の料金体系~LAMP環境の構築までを書きたいと思います。 Amazon EC2の料金に…

毎朝10分。グーグルアナリティクス(GoogleAnalytics)を使って、手間暇かけずにサイト分析

GoogleAnalyticsの確認を毎日の日課にするとブログの更新がすごく楽しくなります。 ・毎朝10分でやる事 ・手のこんだ分析は半年に一回 とやる事を分けることで、苦にならずに、どんどんと効果分析の知識が身につきますよ。 こんな調査をいつもやってます!み…

フォトショップ(photoshop)を使って5秒で背景のグレーを白に変更【色調補正:特定色域の選択】

こんな画像が こんな風に背景を白にできます。簡単です。 フォトショップで(photoshop)画像を開きます。 [イメージ] → [色調補正] → [特定色域の選択]を選択 [カラー]で[白色系]を選択。シアン、マゼンダ、イエロー、ブラックの値を全てマイナス100に。 こ…

Google検索 - link rel="canonical" の指定で効果が驚くほど激減【SEO対策】

内容の酷似したコンテンツが複数あった場合、一番元となるコンテンツはどれなんだと明示することができる rel="canonical"(カノニカル属性) ですが、こいつはとんでもない力を持っています。(※canonicalの設定は、コピーしたコンテンツのヘッダーに rel="…

Amazon EC2を使ったLAMP環境構築の勉強会をやりました

Amazon EC2は使った分だけお金を払うシステムなので、テストや勉強をするには持ってこい。 (一般に公開しなければ、月間300円とか) WEBデザイナーやコーダーだって、LAMP環境の構築は出来たほうがいいだろうと勉強会を開催しました。 一つ一つの単語の意味…

フォトショップ(photoshop)のWeb用に保存でカラーの減色を繰り返し処理【カラー:カスタム→知覚的】

画像のファイルサイズを減らす必要があり、 まずはweb用に保存で png24ビット の画像を png8 ビット にして画像の圧縮を試みた。 大分ファイルサイズは減り 320k から 100k に。 それでもまだ容量が大きかったので png8ビットの画像のカラーを 128 から 64 …

フェイスブック(facebook)のコメントボックスをウインドウサイズに合わせて設置する【jQquer:innerWidth】

facebookのコメントボックスをウインドウサイズに合わせて設置する【jQquer:innerWidth】 [html]<style> content {width:80%;} </style> <div id="content"> <script type="text/javascript" src="">http://www.google.com/jsapi"> <script type="text/javascript">google.load("jquery", "1.6");</script> <script type="text/javascript"> $(function()…</div>

フォトショップ(photoshop)の繰り返し処理【アクション】【ドロップレット】

フォトショップで同じ動作の繰り返し処理を実行するときは、 1.処理をアクションで保存 2.アクションをドロップレットでexeファイル化 3.フォルダごとexeにドロップで、フォルダ内の全てのファイルに適用 と簡単に処理を繰り返すことができます。 1.画像の解…

フォトショップ(photoshop)驚くほど簡単に画像を綺麗にする【画像補正】

※画像をクリックすると拡大して表示できます。 こんな画像は、簡単に こんな風に綺麗にできます。 これを覚えておくだけで、撮影に失敗した画像も蘇らせることができます。 1.画像をフォトショップで開きます 2.レイヤーをコピーします(背景のコピー) … 【…

ラジオボタンやチェックボックスのラベル[label]設定(Android用)【onClick=""】

ユーザーの使いやすさ向上の為、ラジオボタンやチェックボックスには、ラベル[label]を設定するのが基本ですが、Androidではそのままでは適用できません。 javascriptでテキストクリック時にチェックを入れることもできますが、簡単な方法として onClick イ…

各種サービス(Apache、MySQL、SSH、FTP、SMTP)が起動しているか確認する【nmap localhost】

サイトを運営していると、 サイトが見えない! といった問い合わせがちょこちょこ寄せられます。 そんな馬鹿なー とサイトを覗いてみると、ホントに落ちてたりして… 原因なんだろうと探る前に、復旧優先でまずは各種サービス(Apache、MySQL)が起動している…

Google Analytics(グーグルアナリティクス)の表示期間をデフォルトで当日を含むように変更

Google Analytics(グーグルアナリティクス)が新バージョンへ移行されるので、操作になれておかないとなーと思って、 最近は新バージョンの表示でいつも効果計測をしているのですが… やりにくい!特にデフォルトで表示される期間が2日前まで(夕方あたりか…