One By One

Chromeショートカットキー

2012-12-07T13:57:00.001+09:00

Chromeショートカットキーメモ

・F6またはCtrl＋L：アドレスバーにフォーカス
・「Ctrl+Shift+V」でプレーンテキストを貼りつけ
・「Command」＋「F」で検索をかけて次を検索する場合：Command」＋「G」

PDO接続関連

2012-12-02T20:37:00.003+09:00

メモ

PDO接続関連エラー解決方法
・データを挿入できない
→PDOによるデータの挿入（INSERT）
・文字化け
→[PHP]PDOでmysqlに日本語つっこんだら文字化けして困ったけど解決した

PHPでfaviconの取得

2012-12-01T21:20:00.003+09:00

メモ
・リンク先のFaviconを取得・表示できるWebサービス(API)とJavaScript・プラグインまとめ

Twitter　自動フォロー返し

2012-11-18T18:07:00.002+09:00

Twitter　自動フォロー返し　参考メモ

・Twitter APIで自動フォロー返し機能を実装する
・Twitter用自動フォロー返しスクリプト PHP
・bot開発物語その7(最終回)―自動フォロー返し―
・crontabの書き方

Railsプロジェクトの作り方

2012-09-02T10:11:00.000+09:00

Railsプロジェクトの作り方

新たにディレクトリを作成し、その中で下記のコマンドを叩きます。

$ rails new 【プロジェクト名】

簡単です。

Ruby on Rails 開発環境構築

2012-09-01T22:54:00.000+09:00

Ruby on Railsの開発環境を構築するために下記の項目のバージョンアップを行いました。
・ruby
・gem
・rails

それぞれ
・sudo port install ruby19
・sudo gem update --sustem
・sudo gem install rails

ruby 1.9.3p194 (2012-04-20 revision 35410) [x86_64-darwin11]
gem 1.8.24
Rails 3.2.8

Rubyのバージョンアップの際にMacPortsもいれました。
MacPorts 2.1.2

参考：
Ruby 1.9.2 にアップデートしました
Mac OS X (Snow Leopard) に Ruby on Rails 開発環境を構築
Mac OSXで初めてのRubyを始めてみました
Mac OS X LionにMacPortsをインストールする方法
MacPortsの基本的な使い方とコマンド

Rubyの学習方法まとめ

2012-08-16T08:02:00.002+09:00

以前、知人からRubyをすすめられたのですが、
中々重い腰を上げることができませんでした。

ようやくやっと暑さも和らいで涼しくなってきたので（関係ない）
少しずつ、スローペースで勉強を進めて行きたいと思います。

０スタートなので、まずはどこから手をつけていくか、
色々参考にしてみます。

Rubyを始めたい方向けまとめ(2011年秋版)

これからRubyを始める人たちへ

１時間でツイッターサービスを作ろう！

Rails3 と jQuery で、真面目にオシャレなエロサイトをつくってみました - h300（モチベーション用）

色々、見てみましたがやはり最初はドットインストールではじめてみたいと思います。
１日３レッスンで10日での終了を目標に。

今日からやると26日ぐらいですかね。

日時計算　参考リンクまとめ

2012-06-19T08:10:00.003+09:00

JavaScriptで現在時刻や今日の日付を取得・表示する
http://www.koikikukan.com/archives/2012/01/12-015555.php

JavaScript による日付・時刻・時間の計算・演算のまとめ
http://www.hoge256.net/2007/08/64.html

日付・時刻関数（PHP）
http://www.shigeweb.jp/php/project_p/?section=miniref&page=date#stamp

PHP 日付・時間関数の使い方
http://sandman.s6.xrea.com/nucleus/item-56.html

PHP による日付・時刻・時間の計算・演算のまとめ
http://www.hoge256.net/2007/08/63.html

イヌでもわかるJavaScript講座・来年をカウントダウンする
http://www.red.oit-net.jp/tatsuya/java/countdwn2.htm

Illustlator チュートリアル参考リンク

2012-06-17T18:18:00.001+09:00

ロゴの参考リンク
http://photoshopvip.net/archives/22647

WordPressでカテゴリーを階層表示

2012-06-14T17:18:00.003+09:00

メモ：
外観 > ウィジェット > SideWidget内カテゴリー
階層を表示にチェックを入れる

そのままだどカテゴリーに並ぶだけなので、インデントを入れる場合は
クラス名childrenにpadding-left:1emを追記

CSSでボタンをつくるのに参考にした記事

2012-06-13T17:46:00.002+09:00

メモ

・CSS3だけで作るボタンデザインいろいろまとめ6つ
http://w3q.jp/t/2306

http://www.paulund.co.uk/create-a-css-3d-push-button/

jquery.wookmark.jsの使い方

2012-05-20T10:37:00.000+09:00

DL：http://www.wookmark.com/jquery-plugin
参考記事：
・[JS]高さの異なる要素をレンガ状に隙間なく並べるだけのシンプルなスクリプト -Wookmark
http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-wookmark.html
・Pinterestっぽいレイアウトを作ってみる
http://kachibito.net/web-design/pintarest-like-layout.html

メモ：
スクリプトは</body>直前に記述
<head></head>内に記述しても動かない

.containrにposition: relativeを記述

【Vim】HTMLを整形

2012-05-08T14:08:00.002+09:00

MacVimでHTMLを整形しようとしたのですがコマンドが効かなかったので調べました。
一応、無事に解決したので備忘録としてメモ。

・Vimでインデントを整える（整形）コマンド
=
使い方：gg=G

・コマンドの有効化
MacVim > Contents > Resources > vim > vimrc
下記を追記
:filetype indent on

参考
・filetype
https://sites.google.com/site/vimdocja/filetype-html
・自分用のVim備忘録
http://d.hatena.ne.jp/kanonji/20110603/1307104375

jQueryで画像を全画面表示

2012-05-03T20:52:00.000+09:00

jQueryで画像を全画面表示するためのメモ

やりたいこと

・画像をウィンドウ全体に表示

・ウィンドウサイズを拡大縮小した時に画像の比率がくずれない

jQueryで背景画像を全画面表示する

HTML5のアウトラインの確認

2012-04-13T08:19:00.003+09:00

HTML5のアウトラインの確認

【HTML 5 Outliner】
http://gsnedders.html5.org/outliner/

HTML5向けのリセットスタイルシート・CSS

2012-04-13T08:17:00.000+09:00

HTML5向けのリセットスタイルシート

【HTML5 のリセット・スタイルシート】
http://www.html5.jp/html5doctor/html-5-reset-stylesheet.html
【DL】
http://code.google.com/p/html5resetcss/downloads/list

Macvimの設定変更・カラースキーマの変更

2012-04-12T18:13:00.005+09:00

Macvimの設定メモ

設定変更：
vimrc

場所（ここが分かりにくかった）：
Macvim.app > （右クリック→パッケージ内容の表示）> Contents > Resources > vim > vimrc

カラースキーマの設定変更：
colorsのフォルダにxxx.vim（カラースキーマのファイル）を置く

場所：
Macvim.app > （右クリック→パッケージ内容の表示）> Contents > Resources > vim > runtime > colors

変更内容：

" 行番号を非表示 (number:表示)
set number

" 改行した時に自動でインデント
set autoindent

" Tab幅関係
set shiftwidth=2
set tabstop=2
set softtabstop=2

" ツールバーを非表示
set guioptions-=T

" フォント指定
set guifont=Osaka-Mono:h14

" カラースキーマの設定
colorscheme molokai

カラースキーマは最終的にこれに決めました。
【molokai - A port of the monokai scheme for TextMate : vim online】
http://www.vim.org/scripts/script.php?script_id=2340

・参考記事
【Vimをちゃんと使い始めてみる】
http://hisasann.com/housetect/2012/01/vim.html
【新卒さんのための人気Vimカラースキーマランキング5+1(vim.org & github調べ)】
http://d.hatena.ne.jp/kattton/20110425/1303746056

今後も使いやすいようにいじっていきたいですが、今回はここまで。

MTでページ送り

2012-04-04T11:31:00.001+09:00

MTではページ送り機能を導入するために参考にした記事

【MovableType】一定数の記事ごとにページを分割する

jQZoom Evolutionの使い方

2012-03-06T13:15:00.001+09:00

「jQZoom Evolution」を使いました。

参考サイト
・jQueryを使ったズームプラグイン。ECサイトとかによさげ。jQZoom EvolutionとGalleriffic
http://sanride.com/blog/webdesign/jqueryec.php

・デモページ
http://www.mind-projects.it/projects/jqzoom/demos.php#demo1

・使い方
http://www.mind-projects.it/projects/jqzoom/index.php#howtouse

・Webデザイナーが覚えておく、代表的なライセンスまとめ
http://kojika17.com/2011/01/web-designers-have-to-remember-license-summary.php

自分用メモ
・サムネイルを含めて表示する場合は、画像が3枚必要

imgタグ内：サムネイル画像
smallimage内：メイン画像
largeimage内：拡大画像

・リスト表示するためには、demoページ内のcssの追加記載が必要

・トップに表示する画像のサイズに合わせてズームエリアの位置が自動調整

指定個所へスクロールで移動

2012-03-01T17:15:00.000+09:00

指定した箇所へスクロール移動を実装するために下記の記事を参考にしました。
ページトップへの移動に使われるjQueryです。
サンプルソースではページトップへの移動に使われていましたが、
今回の利用では指定した箇所へスクロール移動させたかったため、
指定先のクラス名を変更しました。

参考記事
・少しのコードで実装可能な20のjQuery小技集
http://www.webcreatorbox.com/tech/jquery-tips20/

送信時に文字コードを変換

2012-03-01T10:56:00.001+09:00

現在制作しているサイトと利用しているショッピングカートで文字コードが違うため、サイトからテキストをショッピングカートに送信した時に文字化けが起こりました。

下記のサイトを参考にして、
送信時に（UTF-8 → Shift-JIS）に文字コードをエンコードすることで解決しました。

・文字コードの違うサイト間のPOST送信
http://warumono.at.webry.info/201110/article_9.html

vimの環境設定

2012-02-12T00:36:00.003+09:00

参加している勉強会でvimを覚える必要があったので環境を整えました。

参考リンク
vimの設定（タブ、自動インデント、行番号表示）
http://d.hatena.ne.jp/mtbtaizo/20080622
MacでのVim設定をまとめてみた
http://takus.me/computer/mac-vim-configure/
Vimのメモ
http://ogawa.s18.xrea.com/fswiki/wiki.cgi?page=Vim%A4%CE%A5%E1%A5%E2

下記のコマンドを入力してファイルを作成
touch ~/.vimrc

今回は、以下を設定しました。

syntax on　　　　　 // シンタックスカラーを有効
set number　　　　 // 行番号を有効
set softtabstop=4　// インデントの幅を4文字に変更

イメージギャラリーの作成

2012-01-02T15:16:00.001+09:00

イメージギャラリーを作成するためにjqueryプラグイン「prettyPhoto」を使いました。

・DL
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

・参考ページ
「イメージギャラリーの設置方法まとめ」
http://whisper.sakura.ne.jp/diary/2009/08/image-gallery.html

スライダーの作成

2011-12-27T00:03:00.002+09:00

スライダーの画面を作成するためにjqueryプラグイン「bxslider」を利用しました。

使い方

１　下記のソースコードを<head>内に貼り付けます。
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="http://bxslider.com/sites/default/files/jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider1').bxSlider();
});
</script>

２　スライダーを利用したい<ul>や<div>に「id="slider1"」を指定します。

画面を確認するとスライダーの動作が行われているようになります。

オプションの詳細
http://bxslider.com/options

ソーシャルゲーム制作の導入

2011-10-28T18:13:00.001+09:00

先日飲んでいる時に、友人のイラストレーターと「ゲームをつくってみよう」という話が出ました。
せっかくの機会なので、昨今の流れを汲んだソーシャルゲーム制作にチャレンジしたいと思います。
まずはソーシャルゲーム制作の流れや、制作環境を把握するためにゲーム制作についてまとめられた記事を読んで予備知識をつけます。

以下、読んだ記事
・ソーシャルゲーム、国内外の動向
・WebベースのアクションRPGを開発するならば使いたいフレームワーク「RPG JS」
・大規模ソーシャルゲーム開発から学んだPHP＆MySQL実践テクニック
・完全公開！ソーシャルゲーム設計事例：プロローグ
・Corona［1］14歳の少年が経験3カ月で大ヒットゲームを開発
・［CEDEC 2011］稼げるゲームはこう作れ。グリーが明かす「セールスランキングNo.1プロダクトの作り方」
・[iPhone][ゲーム][開発] ゲームの作り方やアルゴリズムについてAppStoreカテゴリ別に整理してみました
・ゲーム開発プロジェクトマネジメント講座
・「第21回　HTML5とか勉強会」イベントレポート