グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

複数に分けて管理しているjsonファイルを読み込み、すべての読み込みが完了した時点で次の処理を行う、ということをやったので忘れないようにメモ。

.when() を使うことで複数のファイルを扱うことができます。

$.when(
  $.getJSON("data1.json"),
  $.getJSON("data2.json")
)
.done(function(data1, data2) {
  // すべての読み込みが成功した時の処理
})
.fail(function() {
  // 失敗したときの処理
});

ヘッダー固定のサイトでアンカーリンクを使用する際、そのままだとヘッダーの分だけコンテンツが隠れてしまいます。
同じページ内のアンカーリンクであればスムーズスクロールのJSに直接書き加えてしまったりするのですが、別ページへの遷移＋アンカーリンクの場合の対応を考えてみました。

以下のJSを遷移後のページに記述します。
要jQueryです。

$(function(){

    var headerH = 50; //ヘッダーの高さ

    $(window).on("load", function(){
      if(location.hash !== ""){
        var targetOffset = $(location.hash).offset().top;
        $(window).scrollTop(targetOffset - headerH);
      }
    });

});

ヘッダーの高さはサイトに合わせて変更してください。
これでヘッダー分下がった位置にスクロールされます。

ただこの手法、ページ内のすべての要素が読み込み終わってからの動作になるので、どうしても目当ての位置にスクロールされるまで時間がかかってしまい...。
どうにも気持ちの良くない感じになってしまうので、onloadを使わない手法に改善できないか考えてみたいと思います。

現在使っているzip圧縮ソフト「MacWinZipper（無料版）」（MacOSからzip圧縮してWindowsに送っても文字化けしない圧縮ソフト）は便利なのだが、無料版はパスワードが4文字までしか設定できない。

zipファイルに5文字以上のパスワードをかけるために、ターミナルを使うことになった。検索すれば該当記事がヒットするが、備忘のため。

パスワードなしのzipファイルを作っておく
↓
ターミナル立ち上げる
↓
zipcloak＜半角スペース＞＜ZIPファイル名＞
↓
※＜ZIPファイル名＞は生成されているzipファイルをターミナル上にドラグ&ドロップで転写できる
↓
パスワード入力（入力、確認と２回）
↓
完成

※タイトルからお察しかもしれませんが、最終的に実現はできませんでした。
が、何かの参考になるかもと思い記事に残しています。

ルートパスでのファイル指定はとても便利ですが、ローカル環境やテストディレクトリで確認することができません。
そこで以下のようにできないか調べてみました。

・ /hoge/ 配下でルートパス指定をしたときは /hoge/ をドキュメントルートとする
・ それ以外のルートパス指定では、通常通り　/　をドキュメントルートとする


■.htaccessでリダイレクト

「特定の階層下では/○○○/をドキュメントルートとみなす」のような簡潔な設定を何かでできるのではと考えていたのですが...
調べた限りそういうものはなさそうだったので、リダイレクトで似たようなことができないかと考えました。
つまり、/hoge/ 配下でのルートパス指定は全て、

/css/common.css　→　/hoge/css/common.css

のように /hoge/ 配下の同階層にリダイレクトさせられれば、/hoge/ がドキュメントルートになったような動作になるのでは、という感じです。


ということで、.htaccessに以下のように記述しドキュメントルートに設置しました。

------------

Options +SymLinksIfOwnerMatch
RewriteEngine on
RewriteBase /
RewriteCond %{HTTP_REFERER} /hoge/　　← 条件：リンク元のURLが /hoge/ 配下
RewriteCond %{REQUEST_URI} !/hoge/　　← 条件：リクエスト先のURIが /hoge/ 配下以外
RewriteRule ^(.*)$ hoge/$1 [L,R]

------------

上2つが条件で、両方を満たすときにリダイレクトがかかります。

これで、例えば　/css/common.css　にアクセスがあった際、それが /hoge/ 配下のページからのリクエストだった場合は　/hoge/css/common.css　にリダイレクトされるはずです。


■画像やCSSはできた

画像やCSSなどの読み込みは上手くいっているようです。
ルートパス指定をしたものは /hoge/ を基準にして参照してくれています。
aタグのリンクもルートパス指定で正しく動いているようでした。

が、SSIがダメでした。。。

SSIはリダイレクトが効かず、書かれた通りのパスを参照してしまいます。
（もしかしたら他にも効かないものがあるかもしれませんが）

in an SSI include, can the file being included be redirected in an .htaccess file

こちらで似たような内容のやりとりがされていますが、
SSIはApacheにリクエストを戻さないのでリダイレクトされない、ということのようです。

なんとかSSIの読み込み先を変えられないか探してみましたが、.htaccessではどうにもならなそうで。。


ということで、
もともとSSIを使ったサイトをサブディレクトリでも確認できるようにするための施策だったので、この方法は一旦諦めることに。
もし良い方法が思いつきましたらまた記事にしたいと思います。

<input>や<textarea>をクリックした際、中に書かれているテキストを全選択するスクリプトです。要jQuery。
内容をコピーさせたいテキストボックスを作る場合に実装してあると便利です。

$("ID名など").focus(function(){
  $(this).select();
});

Finderで開くウィンドウサイズは、一つ前に開いていたウィンドウサイズで開くと思って使っていたMac OS Xが、いつ新規ウィンドウを作成してもデフォルトのサイズで開くようになってしまいました。不便だと感じつつアップデートを重ねていった中での仕様の変更だと、ずいぶん長い間そのまま使っていましたが、ふと、google検索してみたところ、同じお悩みの方がいらっしゃいました。そして解決している！そりゃそうか！

ユーザ＞Library＞Preferences＞com.apple.finder.plist

これが壊れていることが原因かもしれない、ということで、一旦デスクトップ取り出して確保しつつ再起動。治りました。

Microsoft Officeのエクセルなどの動作がとても重くなってしまう件もPreferencesファイルを再構築すると直るし、Macってこういうことがあるんですよね。

エクセルで画像を大量に配置して管理するような表を作った際、
ファイルサイズを軽くするために行ったことの覚書です。（Excel2007）

エクセルで貼り付けた画像は元のデータを保持しており、
縮小してもファイルサイズは小さくなりません。
そこで、縮小した状態の画像を一度 切り取り → 貼り付け することで
見た目サイズに合ったファイルサイズにすることができます。

1. 任意のサイズに変形した画像を切り取り


2. セルを右クリックし、「形式を選択して貼り付け」


3. 任意の形式を選択して「OK」


※今回は軽さ重視ということで、JPEGにしておけば問題ないと思います。


これで貼り付けられた画像は見た目にあったファイルサイズになります。

FlashでActionScriptを書く際によく使っていたものなのですが、インスタンスに変数などのデータを持たせることができます。
例えば複数のインスタンスの状態を管理するとき、配列などで管理しなくてもそれぞれのインスタンスに直接変数を持たせておけばよいので直感的にできます。

探してみたところJavaScriptにもあるようで、こちらはDOM要素にデータを持たせることができます。要jQueryです。


■格納
jQuery.data(elem, name, value)

（例）jQuery.data($("#target").get(0), "color", "red");


■取得
jQuery.data(elem, name)

（例）jQuery.data($("#target").get(0), "color");
　　// red


実はJavaScriptを使い初めた頃に困ってたことでもあるので、便利に使っていこうと思います。

viewport の基本はわかっていても、条件によって必要な設定が変わってくるのでなんだかんだ躓いてしまいます。
後で見返せるように条件とその時の設定をメモしておこうと思います。

今回はこんな感じです。

・PC版のデザインをそのままスマートデバイスで表示する
・ページの横幅は980px以下
・ただし、横に余裕を持たせるために1000pxで表示させたい
・ズームは可能だが、ページ表示時は全体が見えるように


PC版を見せるだけなら基本 viewport の設定はいらないのですが、
決まった幅で見せたいので width を設定しないといけません。

上手くいった設定は以下。幅だけ設定します。


<meta name="viewport" content="width=1000">


「initial-scale=1」を設定すると初期表示時にズームされてしまうので注意です。

使用Ver：MT6.2

以前「MT：ファイルの初期アップロード先を設定する」という記事で、MTで画像等のファイルをアップロードするときのデフォルト階層の設定方法を書きました。

MT6.2からは設定画面から簡単に行えるようになりましたので、改めて記事にしようと思います。

といってもやり方は本当に簡単で、ウェブサイトもしくはブログの

「設定」＞「全般」

のアップロードの項目からアップロード先を入力するだけです。
MTのテンプレートファイルをいじらなくて済むので管理的にもありがたいですし、下記のような便利な設定もあったりします。

・ブログ毎に設定できる
・ユーザーが変更できないように設定できる


MT6.2ではこの他にもアップロード関連の機能が強化されているので、
画像を多様する最近のサイトでも使いやすくなったな～という印象。

・マルチアップロード対応
・イメージエディタを搭載
・日本語ファイル名の自動変換をサポート


（今までほしかった機能たち笑）

上記が書かれているリリースノートはこちらです。
Movable Type 6.2 リリースノート