2016-09-09

ページ遷移後にスムーススクロールがしたかった

ページ遷移後に、任意IDの場所までスムーススクロールをさせたいという要望があり、調べたのでメモ

まず、要件をまとめます。 - 対象ブラウザは、IE8〜11、Chrome、Firefox、Safari - ページ遷移したあとで、任意の場所にスムーススクロールをさせたい - URLには、パラメータ（?◯◯）が付くので、ハッシュ（#◯◯）という形にして欲しい

同一ページ内のスムーススクロールならさほど難しくないが、ページ遷移を挟むとちょっと難しい。

調べてみると以下のページが見つかる。リンク先のページでスムーズスクロールさせる方法
 【jQuery】ページ遷移後のスムーススクロール簡易型？になったと思います。

うーん、悪くはないのですが、今回の要件は、#で遷移できるようになので、今回は見送ります。

こんな時は英語で検索。「jquery smooth scroll other page」で検索すると、Stack Overflowにいいのが見つかりました。

jquery page scroll to different page

デモはこんな感じ。
デモ

確かにページ遷移してもスムーススクロールが動作しています。

ここで使われているソースをちょっと修正したのが、以下のソースです。

// ページ遷移後にスムーススクロール
jQuery(function($) {
  // 関数jumpを定義
  var jump=function(e) {

  // #で始まるURLの場合
  if (e){
    e.preventDefault();
    var target = $(this).attr('href');
  }else{
    // targetに別ページにある#を代入
    var target = location.hash;
  }

  // 変数targetの位置までスクロール
  $('html, body').animate({
    scrollTop: $(target).offset().top
    },800,function() {
      // スクロールしたあとにハッシュを変更
      location.hash = target;
    });
  };

  // ハッシュがページを開いたときに動作しないように、htmlとbodyを削除
  $('html, body').hide();

  $(document).ready(function() {
    // #から始まるリンクをクリックした場合、関数jumpを実行
    $('a[href^=#]').bind('click', jump);

    // URLにハッシュがあれば以下を実行
    if (location.hash){
      // 0秒後に実行
      setTimeout(function(){
        // 一度、ページの一番上まで移動して、html、bodyを表示。その後関数jumpを実行
        $('html, body').scrollTop(0).show();
        jump();
      }, 0);
    }else{
      // #がURLにない場合、そのままhtml、bodyを表示
      $('html, body').show();
    }
  });
});

無事実装できました。
迷ったときは、がんばって英語のリソースを当たることも必要ですね。

2016-09-08

Visual Studio Code のDiffをちょっといじってみる

またまたVisual Studio Code (以後、VSCode) についてです。 Sublime TextではFileのDiffは FileDiffs を使ってたのですが、VSCodeでは何使おうかなと思っていていいのが見つかりました。

github.com

VSCodeではデフォルトでDiffが入ってた！

別に拡張機能を入れなくてもデフォルトで入ってました。 cmd + shift + pでコンソールを出して、compareとタイプすると比較するファイルを開く枠が出てくるので、そこで比較したいファイルを選んでやるだけでOKです。

でも、めんどくさくね？

とはいえ、Diffとるたびに cmd + shift + p押して、compareって入れて、ファイル選択して・・・ってはっきり言ってめんどくださいです。

ショートカットで一発でできたほうがいいに決まっています。でもデフォルトでは用意されてないっぽい・・・

ないなら作ってしまいましょう。

幸いにもkeybinding.jsonで設定できるようなので、設定してみましょう。

左上の「Code」から、「基本設定＞キーボードショートカット」をクリック。すると、既定のキーボードショートカットとユーザー設定のjsonファイルが2つ開きます。

既定のキーボードショートカットから compare で検索すると、コメントアウトされたworkbench.files.action.compareFileWithという項目が見つかります。どうやらこいつでキーボードショートカットを設定してやればよさそうです。

後は、なるべくかぶらなそうな組み合わせでキーボードショートカットを設定してやればいいです。

私は cmd + shift + control + d(Diffのd) で作りました。

[
  {
    "key": "ctrl+shift+cmd+d",
    "command": "workbench.files.action.compareFileWith"
  }
]

試してみよう

適当なファイルを開いて、おもむろにcmd + shift + control + dを押してみると・・・、一発で比較したいファイルの選択画面を開くことが出来ました。

デフォルト： cmd + shift + p ＞ compare ＞ファイル選択今回の変更： cmd + shift + control + d > ファイル選択

という感じで1手減らすことが出来ました。

たかが一手、されど一手です。

今回のことで他にも色々遊べそうだということがわかったので、これからもショートカット作ったり遊んでいきたいと思います！

2016-09-07

MacでVisual Studio Code の設定を同期してみる

qiitaの方にVisual Studio Code(以後、VSCode)の絶賛記事をかいたのですが、続報はこちらで。

qiita.com

設定を複数のMacで同期したい！！

Sublime TextやAtomを使っている人にとって当たり前にやりたいことだと思うので、VSCodeでもできるんじゃないかと思って調べたらできた。ちなみにWindowsの方はqiitaにあるけど、当方Macなので、その方法を紹介。

Visual Studio Code のユーザ設定を複数PCで使いまわす（Dropbox経由） - Qiita

VSCodeの設定ファイル

VSCodeでは設定ファイルは2つあるみたいです。

基本設定 > /Library/Application Support/Code/User/
拡張機能 > /Users/{ユーザー名}/.vscode

これを例に倣ってDropboxに置いてシンボリックリンクを貼ってやればOKです。

ここからターミナルでの作業

# Dropbox内の適当なディレクトリにファイルを移動
$ mv /Library/Application Support/Code/User /Users/{ユーザー名}/Dropbox/setting/vscode
$ mv /Users/{ユーザー名}/.vscode /Users/{ユーザー名}/Dropbox/setting/vscode

# シンボリックリンクを貼る
$ ln -s /Users/{ユーザー名}/Dropbox/setting/vscode/User /Library/Application Support/Code/
$ ln -s /Users/{ユーザー名}/Dropbox/setting/vscode/.vscode /Users/{ユーザー名}/

後は複数のMacでVSCodeを立ち上げてみて、設定が同期されていればOK。

簡単に出来ました。これで快適なコーディングライフが送れますね！！

2016-09-07

はじめまして、こんにちは

ブログを始めてみました。

最近、読んだ本の中で「アウトプットを意識した読書」というのがよく書かれていました。

それによると、アウトプットを意識すると・・・

本を読む目的がはっきりする
目的があると、本の中で必要な箇所がわかる
必要な箇所がわかれば、その部分を重点的に読むので、速読につなが-。
記憶が定着しやすい

などなど、いいことがいっぱいでした。

これはやるしかない、ということでブログを始めてみました。

これから書いていきたいこと。

これから、このブログで書いていきたいことは・・・

読書メモ
勉強したこと
いろいろ感じたこと

について書いていければと思っています。

いつも3日坊主な私ですが、少しでも続けていければと思っています。

それでは、「とにかくアウトプットするブログ」スタートです！