kokoe blog

技術メモブログ

XAMPPで複数ドメイン管理

とっても役にたったのでメモ。http://likealunatic.jp/2008/05/16_xampp.phpふむふむ。1.httpd-vhosts.conf修正/xampp/apache/conf/extra/httpd-vhosts.conf の修正をしてあげて2.hostsC:\WINDOWS\system32\drivers\etc\hosts へ1で追加したドメインを追加してあげればいいのね。hostsで思い出したことが。前の会社のSEさんに教えてもらったことなのですが、hostsファイルの情報ってDNSより優先されるらしいですね。なんて説明したものやら困っていたら、いいサイトさんがあった!http://www.higaitaisaku.com/hosts.html

Movable Type UTF8→Shift_JIS変換

すごくはまってしまったのでメモ。またまた、Movable Type案件です。今度は、MTOSで構築です。自社案件だから、あまりお金がかけられないということでw・システム:Movable Type Open Source Ver5.12・サーバー:Web Arena SuiteXで、途中までさくさく進みました。ええ、PCサイトの構築までは。。。携帯サイトの構築になったとき、ふと過去の苦い思い出が横切りました。文 字 化 けでも、まあ、前回プラグイン関連を調べたことだし。プラグインがあるから大丈夫だよねー。・・・なんて思っていたら、予定外。動かないwどんな風に対処したか、記載しておきます。

文字コード変換関連 プラグイン

TransEncoding
出力ファイルの文字コードを再構築時に指定の文字コードエンコードしてくれる。
MTI18N_Plugin
MTEncodetextタグでかこった部分を指定の文字コードエンコードしてくれる。
I18N Helper Plugin
MTEncodetextタグでかこった部分を指定の文字コードエンコードしてくれる。(MT4.2用)
CharsetEncoder
ブログ・テンプレート単位で指定の文字コードエンコードしてくれる。

プラグインを踏まえて対応メモ

要件のまとめ
MTOS上でPCサイトと携帯サイト両方を管理したい。だが、PCサイトはUTF-8で記述してあり(かつ、JQueryとかも使っていて)、携帯サイトはShift_JISで記述しなければいけないので、携帯サイトだけ文字コードShift_JISエンコードする。
対応内容メモ
まず、はじめに前回利用させてもらったMTI18N_Pluginを利用しました。→文字化けしてしまう。で、調べたところ、MTI18N_Pluginの作者さんが、MT4.2用にプラグインを書き直されているようで、そのI18N Helper Pluginを使ってみました。→やっぱり文字化けしちゃう。。。うーん、こまった。で、さらに調べるそしたら、上記URLのコメント欄や、下記URLのコメント欄にも同じような現象がある方がいらっしゃる様子。http://www.gravity-works.jp/gravica/web/css/002017.html#morehttp://communities.movabletype.jp/2010/04/mt5-19.htmlなになに。。。MTEncodeTextタグ内の to="Shift_JIS" の「Shift_JIS」の文字が、大文字・小文字の区別をするとな?で、いろんなパターンを試してみました。shift_jis、shift-jis、shift_JISShift_JIS・・・全部だめやん!!!しょうがないので、次の策。とりあえず、全ブログを文字コード変換しちゃうけど、TransEncodingは動いてくれるのかな?→おお!動いた!でも、PCサイトまでShift_JISになっちゃうよね。。。そして、最後にいきついたのが、CharsetEncoder→おお!動いたぁぁぁああ!!!というわけで、CharsetEncoderのプラグインを利用させてもらうことにしました。PCサイトと携帯サイトをMT上で同時に構築したい場合、の参考に~。

フェードイン&アニメーション

フェードインしながら、上からボックスが落ちてくる処理をかいてみたので記載。

$(document).ready(function(){if(jQuery.support.opacity){$(".panel").css("opacity", 0).animate({"opacity": "1"},{queue: false, duration: 1300, easing: "easeInQuint", complete: function(){}});$("#main").css("opacity", 0).animate({"opacity": "1"},{queue: false, duration: 600, easing: "easeInQuint", complete: function(){}});$("#main").css("top", "-80px").animate({"top": "+=80px"}, "slow");}});
.panel と #main のフェードイン完了までの時間をずらしてる。
でも、IE6-8は未対応。opacityが対応してないので。

WEB制作のお役立ちソフト紹介

WEB制作?する時に役に立つソフトを記載。少なくとも私は多用してますw

FileInfoList
指定したファイル・フォルダーのリストを HTML/CSV/TXT 形式で出力してくれるソフト。とっても柔軟性があってぐー。
Devas
ファイル内検索ソフト。
WinMarge
ファイルやフォルダの比較ができてマージもできるソフト。
Ginnie
テキストエディタソフト。多言語対応しているところが好きで私は使っています。(でも、私の周りで使っている人見たことないw)
IT Tester
おなじみかもしれませんが、Internet Explorerの各バージョンでの表示をチェックできるソフト。ちょっと動きが不安定なんですよね。。。他に、入れてよかったーって思うものはXAMPPとSubvertionでしょうか。
XAMPP
ローカルにWEBサーバー(Apache)を作れる。PHPの動作確認で重宝します。
Subvertion
バージョン管理ソフト。Subvertion(SVN)は、ローカルに入れているのですが、ソースコードの修正履歴が取れたり、バージョン管理ができたりと便利です。複数人数で開発しているわけじゃないのですが、一人で利用するにも十分便利になったと思うソフトです。XAMPPとSVNのインストールは、いろんなサイトさんを参考にしながらいれました。時間があったら、後日記事にでもしようかな。

JQueryライブラリ紹介:テーブルソート検索機能 - JQuery DataTables

JQuery DataTables


テーブルのデータを検索したり、列でソートしたりする(複数でソートもできる)。すげぇ!!!
DataTablesに関しては、ちょっとばかしひねったことをやったので、メモメモしておく。

テーブル(table id="data_tables")の項目・・・「料理種別」「料理名」「料理した日」※あくまで例ですよ、ほんとはちがうよ。
で、テーブルを作成して、GET値で検索フィルタをかけて結果を表示する。ってことをやた。

JSのソースはこれ。
/* 料理種別 配列つくる*/var results_column = new Array();results_column[0] = '日本料理';results_column[1] = '中華料理';results_column[2] = 'フランス料理';results_column[3] = 'イタリア料理';results_column[4] = 'トルコ料理';results_column[5] = 'インド料理';/* GET値取得操作 */$.extend({getUrlVars: function(){var vars = [], hash;var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');for(var i = 0; i < hashes.length; i++){hash = hashes[i].split('=');vars.push(hash[0]);vars[hash[0]] = hash[1];}return vars;},getUrlVar: function(name){return $.getUrlVars()[name];}});/* GET値 */var get_param = $.getUrlVar('list');/* datatables.js SETUP */$(document).ready(function() {/* datatables.jp setting */$('#data_tables').dataTable( {"bAutoWidth": false,"iDisplayLength": 10,"aaSorting": [[0,'desc'], [0,'desc']],"oLanguage": {"sLengthMenu": "表示件数 _MENU_ 件","sSearch": "検索:","sInfo": "検索結果 全_TOTAL_ 件 (_START_~_END_件表示中)","sInfoFiltered": " - 全_MAX_件から検索条件でフィルタ中"}} );/* Initialise datatables */var oTable = $('#data_tables').dataTable();/* セレクトボックスと検索ボックスの連携 */$('select#engines').change( function() {oTable.fnFilter( $(this).val() );} );/* GET値で検索フィルタ */var fillter_word ='';for (var i = 0; i < results_column.length; i++){if(get_param == i){fillter_word = results_column[i];break;}}oTable.fnFilter(fillter_word);$("#engines").val(fillter_word);} );
GET値取得操作で参考にしたサイト
http://jquery-howto.blogspot.com/2009/09/get-url-parameters-values-with-jquery.html

なんか、後で見直してみると、どうしてこういう記述になったのかさっぱり思い出せない。(汗)
2011/11/12 追記
いいサイトさんがあったのでメモ
http://baalzephon.dyndns.org/tech/index.php?JavaScript/jQuery/DataTables

EC-CUBEリンクメモ

リンクのメモみたいな感じ。

EC-CUBE Trac
EC-CUBEコミュニティサイト
EC-CUBEマニュアルサイト
EC-CUBEオーナーズストア
この4つは、制作する上でにらめっこしないといけなさそう。お勉強サイトもみつけた、勉強せなーhttp://www.eccube-school.jp/

JQueryライブラリ紹介:フォームの入力チェック-jQuery Validate Plugin

Movable Typeのメールフォームプラグインを利用した際、入力ページから確認ページに遷移するときにチェックが入らなかったもので、Javascriptで対応することにしました。

で、調べていたのですが、よいJQueryプラグインがあったので紹介。

jQuery Validate Plugin


私が説明するまでも。。。とっても親切に解説をしてくださっているサイトさんがあったのでご紹介します。そちらをみてくださいね。

参考サイト
http://d.hatena.ne.jp/kudakurage/20091211/1260521031

こちらもいいな、すごい
http://5509.me/log/exvalidation

追記。

フォームの検証が有効な場合と無効な場合で、CSSを処理しなければいけない作業がでたので、ちょっとソースコードをめもっておきます。
$(document).ready(function(){$("#formName").validate({rules: {mail_author:       "required",mail_author_kana:  "required",mail_tel: {required: false,telnum: true},mail_privacy:   "required"},messages: {mail_author:       "※お名前を入力してください",mail_author_kana : "※お名前(フリガナ)を入力してください",mail_tel:  {telnum:    "半角英数字で正しい形式で電話番号を入力してください"},mail_privacy:     "※個人情報保護方針に同意してください"}});// ▼フォームチェックが通らなかったときの処理$("#submit_button").click(function() {if($("#formName").validate().form()==false){$(".container").css("top",0);}});});
form()というメソッドを使うのがコツみたい。
フォームを検証して、チェックが通ったらtrueを返して、そじゃないときはfalseを返すっぽい。

参考にしたサイト
http://micelle.org/trash/jquery-validation-plugin
http://docs.jquery.com/Plugins/Validation

ディレクトリだけ、またはファイルだけのパーミッション変更

EC-CUBEを旧バージョンから最新版にアップデートするため、とりあえず最新版を入れて動かしてみよーと、サーバーにEC-CUBE最新版のインストールを行っておりました。

EC-CUBEのインストールで、毎回面倒だなーと思うのがパーミッション変更。
ディレクトリ一式、777とか757とか755に変更するわけですが、これをなんとかカンタンにできないものか。

例えるなら、お風呂の追い炊きのように。
はたまた、例えるなら、pixivのコミケブース検索のように!

・・・んで、調べた結果、ありましたありました。

SSHの使用が可能な場合

SSHの使用が可能であれば、コマンドたたいて変更できるっぽいです。
※自己責任で行ってください!

ディレクトリのみ777にパーミッション変更する
find /filepath/ -type d -exec chmod 777 {} \;
※/filepath/のところは、任意で書き換えてください。

ファイルのみ666にパーミッション変更する
find /filepath/ -type f -exec chmod 666 {} \;
※/filepath/のところは、任意で書き換えてください。

ただ、ちょっと気になるのは、当方WinSCPを使っておりまして、これをコマンドから実行してみたのですが、エラーがでてきちゃいました。でもパーミッションは問題なく変更されてる。なぜだー?

参考にさせてもらったサイトさん
http://ja.wikipedia.org/wiki/Chmod
http://hamamuratakuo.blog61.fc2.com/blog-entry-491.html
http://q.hatena.ne.jp/1155524072
http://www.atmarkit.co.jp/flinux/rensai/linuxtips/039expsearch.html


FTPの場合

当方、しばらくFileZillaというFTPソフトしか使っていなかったので、他のFTPソフトでできるかとかそれはわかりませーん。なので、FileZillaでのやり方を記載します。
  1. サーバーにつなぐ
  2. リモートサイト上の「data」と「html」ディレクトリを右クリックで選択。
  3. 「ファイルの属性を変更する」というダイアログボックスが表示されるので、パーミッションを指定して、下の方の「サブディレクトリの中の再帰」で、該当するものを選択

と、これでOK。

なんか、FTPの方が簡単か?!
でも、当方テスト環境への接続がSSHでしか認められてないので、コマンド一生懸命調べました。

Movable Type5 サイト構築のこととかプラグインの紹介とか

仕事でCMSを扱うのは2回目。(始めてさわったのはEC-CUBE)ブログツールMovable Typeですが、ブログのCMSをやるのは初めて。ざっくりとした感想。一言でいうと、これすごいね。なんでもできちゃうじゃん!あれ、こんなことできないのかな?という機能もあったのですが、大抵そういう機能は、誰かがプラグインを出していたりするので、おおっすげーって感じです。

今回入れて重宝したMovable Typeプラグインたち

PageBute
Movable Typeにページング機能を組み込むことができるプラグイン
QuickRebuild
複数のブログを一括で再構築するプラグイン
MailFormV2.2
Movable Typeにメールフォームを組み込むことができるプラグイン
GetQueryParam
MailFormプラグインで、ラジオボタンを組み組む際に必要。
PreviousNextInCategory
ブログ記事に同一カテゴリーのブログ記事の前後リンクを表示することを可能にするプラグイン
CustomDefaultFields
フィールド(タイトル・本文等)のカスタマイズを可能にするプラグイン
NumericCustomFields
数値型のカスタムフィールドを追加するプラグイン
Templatize
エントリーやウェブページ内でMTタグが使えるプラグイン

つかえそうだなと思ったけど、まだ使っていないプラグインたち

SuperSort
カテゴリや記事を任意で並び替えできるらしい。
ScriptInjection
エントリー編集画面に対して任意のJavaScriptを挿入するらしい。って感じ。今回、2本中1本のサーバーの文字コードEUC-JPで、かなり文字化けに悩まされました。そこで役に立ったプラグインをかいておいてみます。

文字コード系で、すげー役にたったプラグイン

TransEncoding
出力ファイルの文字コードを変換するプラグイン
MTI18N_Plugin
文字コード変換、MTタグでかこった部分をエンコードする。藤本様のサイトを拝見してわかったことなのですが、MTI18N_Pluginを利用する際、EUC-JPの文字コードを扱う場合は、MT本体の一部ファイルを修正しないといけないみたい。このファイル。MT_DIR/lib/MT/I18N/default.pm藤本様の解説ページhttp://www.h-fj.com/blog/archives/2010/10/18-092650.php

SSLではまったこと

SSLページの作成で、はまったことを一つ記述。ソースコードを散々確認したのに、「セキュリティで保護されていないページ?情報を表示しますか?」とか、そういう表示がでる。何が原因だーと調べていたら、CSSJavascriptだったか?)から、Googleサイトにfont face情報を読みにいってる。。。JQueryライブラリを多用していたサイトなので、このライブラリから、Googleサイトにfont face情報を読みにいっていました。うーん、気をつけないとねー。