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

制作物をチェックする際、以前は印刷で行っていたことの代わりとして、iPadにテキスト素材や修正指示等を表示し見比べることがあります。
その際、紙であればそのままペンでチェックを入れたりメモ書きできますが、iPadでそれをする良い方法を見つけられずにいます。
ファイル形式によってはそのまま書き込めたりするものの、できればファイル形式やアプリによらず、見ている画面にそのまま書き込みたい。

ということで、現時点で一番良さそうだと思ったのが以下の方法です。

Apple Pencilでスクリーンショットに書き込み



Apple Pencilで画面の左下からフリックすることで、表示画面をスクショすることができます。
また、そのまま書き込みできます。



上部のタブでフルページを選ぶと縦長のページすべてに書き込むことができます。（これはアプリによってはうまくいかないことがあります）

スクショなので当然ファイル形式を選ばないため、書き込みたいときにすぐ使うことができます。
書き込んだ後は保存するか、不要ならそのまま削除することもできます。

さらに良い方法が見つかれば追記したいと思います。

iOS 12までのiPadはユーザーエージェントに文字列"iPad"が含まれているかで判別できました。
しかしiOS 13以降のiPadのSafariには「デスクトップ用Webサイトを表示」という機能が実装されており、それがオンになっていると（デフォルト）ユーザーエージェントに"iPad"の文字が含まれなくなるようです。
そのためユーザーエージェントでの分岐に追加をする必要があります。

var ua = window.navigator.userAgent.toLowerCase();
if(ua.indexOf('ipad') > -1 
  || ua.indexOf('macintosh') > -1 && 'ontouchend' in document){
    // iPad用の処理
}else{
    // それ以外の端末用の処理
}

"macintosh"という文字列が含まれており、タッチ操作に対応している。という条件で判定します。

複数に分けて管理している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を使い初めた頃に困ってたことでもあるので、便利に使っていこうと思います。