weblog

WEB全般の忘備録(HTML・CSS・JavaScript・PHPなど)

Windows環境にSCSS環境を構築する手順

WindowsにCSSプリプロセッサのSCSSを導入する手順メモです。

Rubyインストール

Macでは標準でインストールされているらしいですが、Windowsには入っていないので
公式サイトよりダウンロードします。

インストールの時、パスを通すことを忘れずに。(後でもできるけど)
インストールしたらコマンドプロンプトcygwinなんかで

ruby -v

と入力して

ruby 2.0.0p0

とバージョン情報が出たらインストール成功です。

Compassのインストール

CompassCSSを効率的に書くためのフレームワークのようです。
gemをアップデートして、compassをインストールします。

gem update --system
gem install compass

下記コマンドでバージョン情報が出たらインストール成功です、Commpassがインストールされたら自動的にScssもインストールされます。

compass -v

Compassを使う

作業ディレクトリにassetsディレクトリを作成してconfig.rbを作成します

http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"

scssディレクトリにscssファイルを作成します。
scssファイルに変更があったら自動的にcssファイルにコンパイルするように下記コマンドを実行して監視しておきます。

sass --style expanded --watch scss:css

これで下準備完了。

Scssの文法については今回は割愛しますが、
Rubyとすごく似てるっぽいです。mixinとかすごく便利。

GW中にCakePHPでブログつくる。

もうすぐGWなので何を作ろうか考えていたのだけど、
とりあえず今はPHPを重点的に勉強しているので、CakePHPでブログを作ろうかと。

機能要件としては、

【必須】
・カテゴリー設定が出来るようにする。
・記事に画像が投稿出来るようにする。
・記事にコメントが投稿出来るようにする。


【出来れば】
wysiwygエディタだと素敵。だけどどうやるんだろう?
・カレンダーをつける。
・アバターとかも付けられたら嬉しい。
・下書き機能は欲しいな。。。


ってことで次回からCakePHPでつくっていきます。
しょぼくても形にする。

GitHubを使うときに一番初めにやる事

GitHubにかぎらず、リモートリポジトリにpushするまでの手順の忘備録。
最初しかやらないことってすぐ忘れてしまうので。。

メールアドレスと名前を設定

git init
git config --global user.name "名前"
git config --global user.email "メールアドレス"

リポジトリURIエイリアスを登録。下記の場合は「files」名前はなんでも良い。

git remote add files git@github.com:ysk/PHP_files.git

commitする。

git add .
git commit .
git push files master
Everything up-to-date

とメッセージがでてGitHubに反映されていたら成功。

wordpressで企業サイトを構築する際に入れるべきプラグイン12個

このまえwordpressの構築の際にいろいろなプラグインを試してはボツりました。
その中でこれは使えるなと判断した12個のプラグインを紹介します。

必ず入れておくべきプラグイン

Adminimize

http://wordpress.org/extend/plugins/adminimize/
各権限でできることを細かく調整出来るプラグイン。

Custom Post Type Permalinks

http://wordpress.org/extend/plugins/custom-post-type-permalinks/
カスタムポストタイプのパーマリンクを調整するプラグイン。

PS Disable Auto Formatting

http://wordpress.org/extend/plugins/ps-disable-auto-formatting/
エディタに挿入したタグの自動整形やタグの除去を回避ためのプラグインです。
W3Cのバリデートに通したいとき非常に邪魔だったので導入しました。

WP Multibyte Patch

http://wordpress.org/extend/plugins/wp-multibyte-patch/
日本語などマルチバイト文字列の不具合を解消するプラグイン

WP No Category Base

http://wordpress.org/extend/plugins/wp-no-category-base/
URLから/category/という文字列を削除するプラグイン。
URLがかっこ良くなります。なくても動作には問題ありませんが、
WordPressで作ったんだな」という感じが薄まります。

BackWPup

http://wordpress.org/extend/plugins/backwpup/
自動でデータをバックアップするプラグイン。超必須です。

TinyMCE Advanced

http://wordpress.org/extend/plugins/tinymce-advanced/
エディタの機能をカスタマイズ出来るプラグイン。

要件によっては入れたほうが良いプラグイン

Peter's Collaboration E-mails

http://wordpress.org/extend/plugins/peters-collaboration-e-mails/
承認フローに必要なプラグイン。
寄稿者が承認依頼を送るとすると管理者にメールが届くようになる。

Simple expires

http://wordpress.org/extend/plugins/simple-expires/
記事に有効期限を設ける。有効期限がを過ぎた記事は自動的に下書き状態となる。

Export to Text

http://wordpress.org/extend/plugins/export-to-text/
WordPressのコンテンツをText形式で出力するプラグイン。
出力形式がtxtで良ければこのプラグインはだいぶ重宝する。

Events Manager

http://wordpress.org/extend/plugins/events-manager/
イベントカレンダー・イベント検索などイベントに関する機能をまるごと管理できるプラグイン
高機能だがプラグインの仕様から外れた場合、改修はソースを追うしかない。
日本語のドキュメントや導入実績が見当たらない。。。

Replace Domain

http://www.koikikukan.com/archives/2011/06/01-005555.php
サイト内のURLをhttps://に書き換える。または / から始まる絶対パスに書き換えるプラグイン。
サイト内にSSLのページがある場合重宝する。
注意点:記事内にURLがあった場合、それらもすべて書き換わってしまう。


WordPressはかなり高機能とはいえもともとはブログなのでCMSとしてはまだ発展途上ですね。
CMSとしてもっと熟成したら記事の公開承認機能なんかは標準で実装されそうな気がします。

windows環境にNode.jsをインストールする手順

                                                        • -

インストールするもの
node.js本体
http://nodejs.jp/nodejs.org_ja/download/
モジュール
・express MVCフレームワーク
http://expressjs.com/
・mongoose MongoDB アクセスライブラリ
http://mongoosejs.com/
・socket.io
http://socket.io/

                                                        • -

Node.jsのインストール

windowsの場合、exe形式でダウンロードできる。
インストール時に特に設定など必要ない。クリック・クリック・完了。

ちなみにNode.jsが正常にインストールされているか確認するには
コマンドプロンプトに下記のように入力してバージョン情報が表示されればOK。

C:\Users\userName>npm -v
1.1.62
C:\Users\userName>node -v
v0.8.11

expressのインストール

C:\>npm install express ejs -g
//C:\sample\node_modules以下にexpressというフォルダが作成される。

//ejsを指定する。
C:\>express -e sample

gはグローバルオプションで、これを付けないとコマンド実行パスの
node_modules にインストールされるらしい。こちらを参考にさせていただきました。
(ちなみにexpressnにはこのようなオプションがある。)

    -h, --help          output usage information
    -V, --version       output the version number
    -s, --sessions      add session support
    -e, --ejs           add ejs engine support (defaults to jade)
    -J, --jshtml        add jshtml engine support (defaults to jade)
    -H, --hogan         add hogan.js engine support
    -c, --css <engine>  add stylesheet <engine> support (less|stylus) (defaults
to plain css)
    -f, --force         force on non-empty directory

mongooseのインストール

C:\sample>npm install mongoose

C:\sample\node_modules以下にmongooseというフォルダが作成される。

Socket.IOのインストール

C:\sample>npm install socket.io

C:\sample\node_modules以下にsocket.ioというフォルダが作成される。

サンプルプログラムの動作確認

C:\sample>node app

app.jsを起動後 http://localhost:3000 にアクセスするとexpressのデフォルトの画面が表示される。

疑問というか課題というか。

1:ポート80でアクセスするにはどうすればよいか。
2:今の方法だとプロジェクト毎にライブラリインストールするの面倒だけどどうすればよいか?
(例えばsample2とか作ったらまたインストールからはじめる事になる。)