とっても役にたったのでメモ。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_JIS、Shift_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-pluginhttp://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/Chmodhttp://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でのやり方を記載します。- サーバーにつなぐ
- リモートサイト上の「data」と「html」ディレクトリを右クリックで選択。
- 「ファイルの属性を変更する」というダイアログボックスが表示されるので、パーミッションを指定して、下の方の「サブディレクトリの中の再帰」で、該当するものを選択
と、これでOK。
なんか、FTPの方が簡単か?!
でも、当方テスト環境への接続がSSHでしか認められてないので、コマンド一生懸命調べました。
Movable Type5 サイト構築のこととかプラグインの紹介とか
仕事でCMSを扱うのは2回目。(始めてさわったのはEC-CUBE)ブログツールのMovable Typeですが、ブログのCMSをやるのは初めて。ざっくりとした感想。一言でいうと、これすごいね。なんでもできちゃうじゃん!あれ、こんなことできないのかな?という機能もあったのですが、大抵そういう機能は、誰かがプラグインを出していたりするので、おおっすげーって感じです。