2013-04-25

CKEditorに画像アップロード機能を追加する

CKFinderというのを追加したら可能だそうだが、いろいろ見たところ、有料らしく。
で、KCFinderというのが無料であるらしいので、それを導入。
参考：CKFinder からKCFinderに乗り換え
kcfinderプロジェクトページ：http://sourceforge.jp/projects/sfnet_kcfinder/

（１）KCFinderをダウンロード
　　　　以下サイトより。
　　　　http://kcfinder.sunhater.com/download

（２）解凍してサーバーにアップロード
　　　　CKEditorと同ディレクトリにうぷ。
　　　　※CKEditorが「js/ckeditor」なら、「js/kcfinder」へ。

（３）アップロード用ディレクトリを作成
　　　　適当に「upload」とか
　　　　パーミッションを適宜設定。とりあえず777で。
　　　　※デフォでKCFinderフォルダ内にuploadフォルダあるんだけど、それ使ってもいいみたい。

（４）CKEditorのconfig.jsを編集

config.language = 'ja';
config.filebrowserBrowseUrl = 'フルパス/js/kcfinder/browse.php?type=files';
config.filebrowserImageBrowseUrl = 'フルパス/js/kcfinder/browse.php?type=images';
config.filebrowserFlashBrowseUrl = 'フルパス/js/kcfinder/browse.php?type=flash';
config.filebrowserUploadUrl = '/js/kcfinder/upload.php?type=files';
config.filebrowserImageUploadUrl = '/js/kcfinder/upload.php?type=images';
config.filebrowserFlashUploadUrl = '/js/kcfinder/upload.php?type=flash';

を追記
これは最初なんかうまく行かなくてゴニョゴニョといじくってこうなった（爆）
browse.phpとupload.phpで違う参照の仕方をさせる結果に。ええんかな？

（５）KCFinderのconfig.phpを少し編集

//$_CONFIGの配列で、

'disabled' => true, //ここをfalseに
'uploadURL' => "upload" //トップディレクトリに作ったフォルダに "/upload/"
'uploadDir' => ""  //こちらは本ファイルからの相対パスじゃないとうまくいかなかった。　"../../upload/"
'_sessionDomain' => //これはよく分からんけど、とりあえず".mydomein.com"としておいた（爆）

（６）でもって動作確認をしたところ、「サーバーを閲覧する権限がありません」ときたもんだ。
ということで、KCFinder内のPHPファイルを755にしまくりんぐ。で解決。
具体的には、KCFinder直下のファイル、coreフォルダ内、core>types内、そんなもんでしょ。

以上で正常に機能するようになったけど、とんだ素人仕事になったもんで。
まあ、勝てば官軍。だよね。

2013-04-16

遂に。レスポンシブなウェブデザインに手を付けた

今まで避けていたレスポンシブなウェブデザインに手を付けてみた。

モデルはテスト用に作っていたワンカラムのサンプル。
まあ、このサンプル見てるうちに、レスポンシブに向いてそうなデザインだと思ったのが切欠です。

今のところ数時間いじってみての所感をば。

　　・思ったより悪くない。クライアントの要望によって、レスポンシブか否か、是々非々という感じかな。
　　・viewportについて。切り分けの横幅は極力シンプルにすべきか。PC版のカラム数によって考えるか？
　　・メディアクエリに対応していないIE8以下の糞ブラウザに関して。
　　　・IE6〜8ユーザーでも、さすがに横幅768px以下で見ることは無いんちゃうか？
　　　・一般に流通しているスマホでもIE6〜8を搭載している機種って無いんちゃう？
　　　・ということで、768px幅未満についてはIEを切り捨てる。
　　・そのために、PC表示（今回は768px以上）用のCSSをデフォで読み込むようにして、スマホ用をメディアクエリで記述。これでうまくいった。問題は、設計から丁寧にやる場合に「モバイルファースト」で考えると、設計と構築の順序が入れ替わること。
　　・CSSのいろんなセレクタについて、メディアクエリを後に記述してプロパティを上書きするが、プロパティを初期化したいケースも多いので、以外と勉強になった。
　　・２カラムまでのサイトだったら、768px以下（ワンカラム）、768以上（2カラムでタブ・PC共通）の二通りのみで分けるのがシンプルで良いという仮説を立ててみた。
　　・3カラムのサイトの場合でも、3つまでに抑えるべき。

そんなところかな。レスポンシブありきで設計するのをやってみたら印象変わるかもしんないけど。

とりあえず、以上。

2013-04-12

排他的論理和「xor」って知らんかった

PHP

ショック。知らなかった。
例えば、二つの条件のどちらか片方だけがtrueの場合は

if (( $a || $b ) && !( $a && $b )){
 　//処理
}

とかやってた。アホ。しね。

if ( $a xor $b ){
　//処理
}

これで済む。

2013-04-12

ヒアドキュメントの書き方をいつまでたっても間違える（呆）

だからね、最初の「<<<」を「>>>」と書いてみたり、「<<

echo <<<EOS
ここはそのまんま出力されるよ。
だぶるクォーテーションもそのまま出力されるよ。
変数は展開されるので、それがいやなら$をエスケープするよ。
EOS;

なお、これと似たものでNowdocってのがあって、

$str = <<<'EOS'
変数は展開されまへん。
だので、$が適切にエスケープされたヒアドキュメントみたいなもんだそうな。
constに指定出来たりするらしい。
NowdocはPHP5.3以降。
EOS;

ってことです。

2013-04-12

可変変数は分かるっちゃ分かるんだけど使いこなせない件

可変変数
例えば

$var=1;
$str='var';
echo $$str;
//まず$strにvarが代入され、次に$varに1が代入される。
//つまり、${$str}　ってことだよね。

したがって、resultは 1となる。

2013-04-06

IE9.jsでのIE7の透過PNG対応について

つまり、IE9.jsを使うとIE7でも透過PNGを適用できるんだけど、そのPNGファイル名は末尾に「-trans」を付けて「hogehoge-trans.png」とすることが条件なので、そりゃあ面倒くさいね、って話。

えー、で、面倒臭くなくする方法を見つけたのでメモ。
見つけたサイトはここ。感謝。
http://www.torounit.com/blog/2011/06/07/793/

IE9.jsのファイル自体はミニマイズされてるので、ファイル内検索で「IE7_PNG_SUFFIX」を探して、

(bY(N.IE7_PNG_SUFFIX||"-trans.png")

ってところの「-trans」を削除してやる。

そんだけ。でも、まだ自分では確認してないのでなんとも言えんけど。

それにしてもこれ入れると重くなるってのはガチっぽいな･･･どーしよ・・・

2013-04-06

ソーシャルボタンをオリジナル画像で設置するのでハマるの巻

もうね、ハマッた。なんか軽く考えすぎてた。
ぐーぐる先生の紹介で沢山見本を見たけど、なかなか気にいるスクリプトも無く。

というわけで自分用カンペ。

<ul class="clearfix">
    <li>
        <a href="http://www.facebook.com/share.php?u=【URL】" onclick="window.open(this.href, ‘facebookwindow’, ‘width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1′); return false;">
        <img src="img/facebook.png" alt="このページをシェアする">
        </a>
    </li>
    <li>
        <a href="http://twitter.com/share?count=horizontal&amp;original_referer=【URL】&amp;text=【テストサイト】&amp;url=【URL】" onclick="window.open(this.href, ‘tweetwindow’, ‘width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1′); return false;">
        <img src="img/twitter.png" alt="ツイートする">
        </a>
    </li>
    <li>
        <a href="http://b.hatena.ne.jp/entry/【URL】" class="hatena-bookmark-button" data-hatena-bookmark-title="テスト" data-hatena-bookmark-layout="simple" title="このサイトをはてなブックマークに追加">
        <img src="img/hatena.png" alt="このエントリーをはてなブックマークに追加">
        </a>
    </li>
    <li>
        <a href="#" onclick="Evernote.doClip({providerName:'【テストサイト】',url:'【URL】'}); return false;">
        <img src="img/evernote.png" alt="Clip to Evernote">
        </a>
    </li>
</ul>
<!-- はてなとevernoteはJS読み込ませる -->
<script src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
<script src="http://static.evernote.com/noteit.js"></script>

で、cssはこんな感じで適当に。
グローバルナビゲーションのULの末端のLI内にULで記述してる構造なので、親要素にかかってるスタイルの関係で（ｒｙ

#sns{
	margin-left:20px;
	margin-top:13px;
	float:left;
	width:200px;
}
#sns img{
	width:32px;
	height:32px;
	border:none;
}
#sns li{
	margin-right: 10px;
	float:left;
}
#sns img:hover{  background-color: #000; }

FacebookはOGP対策を考えた方がいいのかな。
あと、JS二つも読み込ませるのもあり、結構重くなった印象もあるようなないような。
あとあと、facebookとTwitterはwindow.open()してるけど、ポップアップブロックしてたらかな、新しいタブで開く。

そんなとこ。