2012年12月7日金曜日

Chromeショートカットキー

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

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

2012年9月2日日曜日

Railsプロジェクトの作り方

Railsプロジェクトの作り方

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

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

簡単です。

2012年9月1日土曜日

Ruby on Rails 開発環境構築

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の基本的な使い方とコマンド

2012年8月16日木曜日

Rubyの学習方法まとめ

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

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

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

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

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

1時間でツイッターサービスを作ろう!

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

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

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


2012年6月19日火曜日

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

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

2012年6月14日木曜日

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

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

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


2012年5月20日日曜日

jquery.wookmark.jsの使い方

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を記述


2012年5月8日火曜日

【Vim】HTMLを整形

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




2012年5月3日木曜日

jQueryで画像を全画面表示

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

やりたいこと
・画像をウィンドウ全体に表示
・ウィンドウサイズを拡大縮小した時に画像の比率がくずれない


2012年4月12日木曜日

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

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


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

2012年3月6日火曜日

jQZoom Evolutionの使い方

「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枚必要

  1. imgタグ内:サムネイル画像
  2. smallimage内:メイン画像
  3. largeimage内:拡大画像
・リスト表示するためには、demoページ内のcssの追加記載が必要
・トップに表示する画像のサイズに合わせてズームエリアの位置が自動調整

2012年3月1日木曜日

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

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

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

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

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

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

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

2012年2月12日日曜日

vimの環境設定

参加している勉強会で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年1月2日月曜日

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

イメージギャラリーを作成するために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