フレームワークカテゴリー記事一覧

DreamweaverでSass（Compass）を利用する方法

Adobe DreamweaverでSass・Compassを利用する方法の備忘録です。

Gulp・Grunt等でやる方法がありますが、コマンドプロンプト（通称：黒い画面）はちょっと敷居が高いと思われる方も多いと思うので、Adobeユーザーなら大抵入っているDreamweaverの設定方法をお伝えします。

Dreamweaverを利用してWordPressでサイト構築（テーマ開発）することを想定していますが、他のサイト制作でも同様の設定で多分利用できます。

試行錯誤の結果とりあえず動いたという設定方法をご紹介しておりますので、正統なやり方では無いかもしれません。その点ご容赦ください。

2018年2月2日追記

文字コードの関係でエラーになる場合があったため、config.rb、config_prod.rbに以下の一文を追加しました。

Encoding.default_external = “UTF-8”

今回想定するDreamweaverのサイト設定

Dreamweaverのサイト設定が以下のように行われている前提で説明を行います。

今回のサイト設定・構造

サイト直下にwp-content , wp-admin, wp-includes等のファイルがある。
テーマディレクトリを「THEME_NAME」としてテーマを作り込もうとしていることを想定しています（この部分を適宜ご自身の環境に合わせて以降読み替えてください）。

空のディレクトリを作成しよう

以下のように、/wp-content/themes/THEME_NAME/ディレクトリに空のディレクトリを作成します。

scss ディレクトリ

このディレクトリにSassファイルを配置していきます。

css, css/min ディレクトリ

sassディレクトリに配置されたSassファイルがコンパイルされ、生成されたCSSファイルが配置されます（css/minにはminifyされたCSSが配置されます）

fonts, images, js ディレクトリ

とりあえず作ります。Compassが画像等を出力する時に使用するようですが正直よく分かりません（笑）

configファイルを配置しよう

以下Gist からconfig.rbとconfig_prod.rbをダウンロードしてきてテーマディレクトリ直下に配置します。

Gist：Dreamweaverでcompassを動作させようとした時のconfig.rb

https://gist.github.com/onocom/29259b091fdea04e159506bcba6d89ff

config.rb

これはMinifyしない為のコンフィグファイル。このコンフィグが実行されると、最後にMinify用のコンフィグが実行される。

THEME_NAMEディレクトリは適宜書き換えてください。

Encoding.default_external = "UTF-8"

http_path = "/"
css_dir = "/wp-content/themes/THEME_NAME/css/"
sass_dir = "/wp-content/themes/THEME_NAME/scss/"
images_dir = "/wp-content/themes/THEME_NAME/images/"
javascripts_dir = "/wp-content/themes/THEME_NAME/js/"
fonts_dir = "/wp-content/themes/THEME_NAME/fonts/"

output_style = :expanded # :expanded or :nested or :compact or :compressed
sourcemap = true
line_comments = false
relative_assets = true

on_stylesheet_saved do
    `compass compile -c wp-content/themes/THEME_NAME/config_prod.rb --force`
end

Encoding.default_external = "UTF-8"

http_path = "/"

css_dir = "/wp-content/themes/THEME_NAME/css/"

sass_dir = "/wp-content/themes/THEME_NAME/scss/"

images_dir = "/wp-content/themes/THEME_NAME/images/"

javascripts_dir = "/wp-content/themes/THEME_NAME/js/"

fonts_dir = "/wp-content/themes/THEME_NAME/fonts/"

output_style = :expanded # :expanded or :nested or :compact or :compressed

sourcemap = true

line_comments = false

relative_assets = true

on_stylesheet_saved do

`compass compile -c wp-content/themes/THEME_NAME/config_prod.rb --force`

end

config_prod.rb

Minify（圧縮）用のコンフィグ。

なお、output_styleを変更することで様々な出力を選べる。

:expanded ・・・通常のCSS出力
:nested ・・・ネストされたCSS出力
:compact ・・・コンパクトなCSS出力
:compressed ・・・ Minifyされた最も小さいCSS出力

また、sourcemap の設定は.mapファイルを生成するかどうかの指定。
line_comments の設定は、コメントを出力するかしないかの指定になります。

THEME_NAME ディレクトリは適宜書き換えてください。

Encoding.default_external = "UTF-8"

http_path = "/"
css_dir = "/wp-content/themes/THEME_NAME/css/min/"
sass_dir = "/wp-content/themes/THEME_NAME/scss/"
images_dir = "/wp-content/themes/THEME_NAME/images/"
javascripts_dir = "/wp-content/themes/THEME_NAME/js/"
fonts_dir = "/wp-content/themes/THEME_NAME/fonts/"

output_style = :compressed # :expanded or :nested or :compact or :compressed
sourcemap = true
line_comments = false
relative_assets = true

Encoding.default_external = "UTF-8"

http_path = "/"

css_dir = "/wp-content/themes/THEME_NAME/css/min/"

sass_dir = "/wp-content/themes/THEME_NAME/scss/"

images_dir = "/wp-content/themes/THEME_NAME/images/"

javascripts_dir = "/wp-content/themes/THEME_NAME/js/"

fonts_dir = "/wp-content/themes/THEME_NAME/fonts/"

output_style = :compressed # :expanded or :nested or :compact or :compressed

sourcemap = true

line_comments = false

relative_assets = true

テーマディレクトリ直下に配置

上記ファイルを配置するとこんな感じ。

サイト設定でCompassを有効化しよう

サイト設定を開く

Dreamweaverメニュー → サイト(S) → サイトの管理(M)から該当のサイトをダブルクリックして以下の画面を立ち上げます。

CSSプリプロセッサー－一般設定

以下のように設定しておきました。

ファイルの保存時に自動コンパイルを有効にする

をチェック入れとくと勝手にコンパイルしてくれるようです。その他のOutput file Styleやソースマップを生成、ソースコメントを作成などはconfigで設定してあるので無視して良さそう。

Compassの設定をしよう

Compassの設定項目で、

Compassを使用する

にチェックし、

Rubyベースの構成ファイルを指定で先ほど配置したconfig.rbファイルを指定します。

これが出来たら保存をします。

コンパイルされるか確かめてみよう

Sass・Compassの設定がちゃんと動作するか確かめて見ましょう。

scssディレクトリ内に、適当なscssファイル(ここではmain.scss)を作成し、保存します。

数秒待つと

/~~~/main.scss は CSSに正常にコンパイルされました： /~~~/main.css

とうメッセージが「出力」ウィンドウに出力され、以下のファイルが自動的に作成されました。

THEME_NAME/css/main.css
THEME_NAME/css/min/main.css

やったー！出来た！

まとめ

設定さえしてしまえば、DreamweaverでもSassが使えるので大変便利ですね。

黒いウインドウ怖いといって敬遠していたかた、ぜひご活用ください。

config.rb の設定方法でもっと良いやり方があれば教えてください。

CodeIgniter 3でURLに付加されるindex.phpを外したい(取り除きたい)

結論

ブログに書いていたら長々としてしまったので、結論から。

以下の2つの対応をすることでindex.phpを外すことが出来ます。

1：.htaccessを追加する

index.php と同じ階層に.htaccssを追加して、以下を記述する。

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]

2：application/config.phpを編集する

$config[‘index_page’] = ‘index.php’;

となっている箇所を

$config[‘index_page’] = ”;

に変更する。

CodeIgniter 3でウェブアプリケーションを構築すると、URLにindex.phpが付いてしまう

http://example.com/index.php/hogehoge/

CodeIgniterではデフォルトで上記のようなURLを用いてルーティング(必要なコントローラ呼び出し)がされるようになっているようです。

今回の記事はこのURLの中の

index.php

を取り除く為の方法を紹介します。

毎回CodeIgniterの初期設定としてこの作業をせねばならぬだろうと思い、備忘録をかねての投稿です。

困ったときのCodeIgniterユーザガイド

以下にて解説されておりました。素晴らしい。

CodeIgniter の URL – index.phpファイルを外す
http://codeigniter.jp/user_guide/3/general/urls.html#index-php

要は、.htaccessで以下のように書いてあげると良いよ。ということでございました。

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]

よっしゃ出来た！と思ったら、意外な落とし穴が…

form_openなどを呼び出すと依然として付加されてしまうindex.php!!!

よしよし、と思いながらチュートリアル「ニュース記事を作成」を行っていた時の事、form_openで出力されるURLになぜかindex.phpが付いてしまうということを発見。

ニュース記事を作成 – フォームを作成する
http://codeigniter.jp/user_guide/3/tutorial/create_news_items.html

form_open関数の出力

これは、.htaccss以外にも修正箇所があるのではないかと思い、探って見ました。

application/config.phpの修正が必要だった

application/config.phpを見ていた所、それっぽい設定箇所が38行目にありました。

/*
|--------------------------------------------------------------------------
| Index File
|--------------------------------------------------------------------------
|
| Typically this will be your index.php file, unless you've renamed it to
| something else. If you are using mod_rewrite to remove the page set this
| variable so that it is blank.
|
*/
$config['index_page'] = 'index.php';

|--------------------------------------------------------------------------

| Index File

|--------------------------------------------------------------------------

| Typically this will be your index.php file, unless you've renamed it to

| something else. If you are using mod_rewrite to remove the page set this

| variable so that it is blank.

$config['index_page'] = 'index.php';

英語の説明文をGoogle翻訳するとこんな感じの事が書いてあるようです。

通常、これはindex.phpファイルになります。ただし、別の名前に変更している場合を除きます。
mod_rewriteを使用してページを削除する場合は、この変数を空白に設定します。

なるほどmod_rewriteを使用してindex.phpを削除している場合はここを空白にせよ。と。
ということで、この設定箇所からindex.phpを外したらform_openでも表示されなくなりました。

$config[‘index_page’] = ”;

感想

CodeIgniter 3の初心者から抜け出せないまま時が経ってしまった。

長期スパンで学んで行くためにも基本的な部分はこれからもブログにしていこうと思いました。

CodeIgniter 3入門（インストールから設定まで）

CodeIgniterのことを勉強したのでメモ。日本語サイトにCodeIgniter Ver.2のユーザガイドがあったのですがCodeIgniter Ver.3のユーザガイドの~~日本語版が無く~~、辞書とにらめっこしながら進めました。

間違い等あればご指摘くださいませ。

これからCodeIgniterを学ぶ方のお役に立てれば幸いです。

2016年2月23日追記
kenjis様より日本語ユーザガイドのURLをコメント頂きました。
現在翻訳中とのことです。ありがとうございます。

日本語ユーザガイド
~~http://codeigniter-jp.github.io/user_guide_src_ja/~~

2017/01/26 URLが変更されていました。以下が日本語ユーザガイドになります。

http://codeigniter.jp/user_guide/3/

CodeIgniterとは

PHP言語のフレームワークです。

フレームワークとはよく使う処理のお道具箱みたいなもので、フレームワークを使うことによりプログラムの開発効率を上げることができます。

CodeIgniterの読み方

ウィキペディアによると、「コードイグナイター」と読むそうです。なるほど。

CodeIgniter 3の動作要件

CodeIgniter 3を動作させるにはPHP version 5.4 以上が必要です。

以下のデータベース（バージョン）に対応しています。

MySQL (5.1+) via the mysql (deprecated), mysqli and pdo drivers
Oracle via the oci8 and pdo drivers
PostgreSQL via the postgre and pdo drivers
MS SQL via the mssql, sqlsrv (version 2005 and above only) and pdo drivers
SQLite via the sqlite (version 2), sqlite3 (version 3) and pdo drivers
CUBRID via the cubrid and pdo drivers
Interbase/Firebird via the ibase and pdo drivers
ODBC via the odbc and pdo drivers (you should know that ODBC is actually an abstraction layer)

参照
http://www.codeigniter.com/user_guide/general/requirements.html

CodeIgniter 3のライセンス

MITライセンスです。

The MIT License (MIT)

参照
http://www.codeigniter.com/user_guide/license.html

ちなみに、CodeIgniter 3.0からMITライセンスになったようで、2.xまでは独自のCodeIgniterライセンスというライセンスを採用していたようです。

CodeIgniterのライセンスについて from Takako Miyagawa

CodeIgniter 3のインストール

CodeIgniterのダウンロード

CodeIgniterの公式サイトからダウンロードしましょう！執筆時、Version 3.0.4が最新バージョンでした。

https://codeigniter.com/

キャプチャ.JPG — 公式サイトトップページのDownloadからCodeIgniter Version 3をダウンロード

アーカイブを展開

ダウンロードしたアーカイブを展開します。

ファイルをアップロード

「展開したファイルをサーバ上にアップロードします。」とサラッとCodeIgniterの公式に書いてあるのですが、以下の画面キャプチャで選択してあるファイルだけで問題ないかと思います。

CodeIgniter 3の設定

基本設定ファイル（config.php）を編集する

application/config/config.php

を開き”base_url”の設定をします。

$config[‘base_url’] = ‘http://example.com/’;

基本設定ファイル（config.php）を忘れずにサーバにアップロードしましょう！

とりあえず表示確認してみよう

ブラウザで、サイトを表示してみましょう！以下のように表示されていれば設置成功です。

無題.png

データベース設定ファイル（database.php）を編集する

設置が確認できたら更に設定を行っていきます。データベース使わない場合などはこの項目の作業は不要かと思います。

application/config/database.php

を開き以下を変更します。

$db['default'] = array(
        'dsn'   =&gt; '',
        'hostname' =&gt; 'localhost',
        'username' =&gt; 'root',
        'password' =&gt; '',
        'database' =&gt; 'database_name',
        'dbdriver' =&gt; 'mysqli',
        'dbprefix' =&gt; '',
        'pconnect' =&gt; TRUE,
        'db_debug' =&gt; TRUE,
        'cache_on' =&gt; FALSE,
        'cachedir' =&gt; '',
        'char_set' =&gt; 'utf8',
        'dbcollat' =&gt; 'utf8_general_ci',
        'swap_pre' =&gt; '',
        'encrypt' =&gt; FALSE,
        'compress' =&gt; FALSE,
        'stricton' =&gt; FALSE,
        'failover' =&gt; array()
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$db['default'] = array(
        'dsn'   =&gt; '',
        'hostname' =&gt; 'localhost',
        'username' =&gt; 'root',
        'password' =&gt; '',
        'database' =&gt; 'database_name',
        'dbdriver' =&gt; 'mysqli',
        'dbprefix' =&gt; '',
        'pconnect' =&gt; TRUE,
        'db_debug' =&gt; TRUE,
        'cache_on' =&gt; FALSE,
        'cachedir' =&gt; '',
        'char_set' =&gt; 'utf8',
        'dbcollat' =&gt; 'utf8_general_ci',
        'swap_pre' =&gt; '',
        'encrypt' =&gt; FALSE,
        'compress' =&gt; FALSE,
        'stricton' =&gt; FALSE,
        'failover' =&gt; array()
);

全ての設定が必要というわけではなく、必要な部分だけ設定します。

設定する主な項目

hostname：データベースサーバのホスト名
username：データベースのユーザ名
password：データベースのパスワード
database：データベース名
dbdriver：データベースのタイプ（mysqli（MySQLの場合）, postgre（PostgreSQLの場合））

参考
http://www.codeigniter.com/user_guide/database/configuration.html

.htaccess を設定する

CodeIgniterの初期設定では、以下のように index.php が含まれたURL構造になってしまいます。

http://example.com/<strong>index.php</strong>/news/article/my_article

1	http://example.com/<strong>index.php</strong>/news/article/my_article

これを回避するために.htaccessファイルを作成して以下のように記述します。

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]

RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^(.*)$ index.php/$1 [L]

作成した.htaccessファイルは忘れずにサーバにアップロードしましょう。license.txtと同じ位置に置くと良いでしょう！

参考
http://www.codeigniter.com/user_guide/general/urls.html#removing-the-index-php-file

感想

いろんなフレームワークがありますが、かなり簡単に設置出来るのがGood！

（2.x系は豊富だけど）日本語のドキュメントが少ないのでGoogle翻訳を駆使して理解していく必要がありそうです。