2019-04-30

【JavaScript】jQurey を使わずに 404 Not found のページを変更する方法

はてなブログ技術 javascript

404 Not found とは

ざっくりな説明だと、ページが見つからないときのエラーのことです。

詳しくはこちらです。

HTTP 404 - Wikipedia

はてなブログでは、エラーが起きた時の専用ページが用意されています。

記事が見つからないときにメッセージが表示されます。

ブログの記事が増えてくると、記事を整理することがあります。

例えば、

記事を統合して、新しい記事にする
記事を変更して、カスタムURLに変更する
記事を削除してしまう

こんなとき、Yahoo! や Google の検索結果やほかの記事に貼られたリンクは、整理前の記事を指しています ↷( ó╻ò)

はてなブログが準備してくれている、標準のメッセージでは、
どうやって記事を探してよいかはわかりません。
_{（ブログによって方法が違うので、仕方ないです）}

また、2行のメッセージなので、ほとんど真っ白のページになってしまいます。

やること

わかりやすいメッセージにする

目的の記事を見つけやすくする

やったこと

ブログ管理画面から、
デザイン > カスタマイズ > ヘッダ > タイトル下のところに、コードを書きました。

ペタリと貼っても使えます。

<script>
  document.addEventListener('DOMContentLoaded', function() {
    if(document.querySelector('#main-inner').getElementsByClassName('no-entry').length === 0){
      return;
    }
    var ec = document.querySelector('.entry-content');
    if(!ec){
      return;
    }
    var h1s = ec.getElementsByTagName('h1');
    var ps = ec.getElementsByTagName('p');
    h1 = h1s && h1s[0];
    p = ps && ps[0];
    if(!(h1 && p)){
      return;
    }

    h1.innerText = 'Not Found  ↷( ó╻ò)\nお探しの記事を見つけられませんでした';
    p.innerText = '一時的にアクセスできない状況にあるか、\n移動、または、削除された可能性があります。\n\nおすすめ記事 または トップページからお探しください。\nサイドバーの検索も利用できます。';

    var h2 = document.createElement('h2');
    h2.appendChild(document.createTextNode("おすすめ記事"));
    ec.appendChild(h2);

    var hatena_module = document.createElement('div');
    hatena_module.setAttribute('class', 'hatena-module hatena-module-entries-access-ranking');
    hatena_module.setAttribute('data-count', '10');
    hatena_module.setAttribute('data-display_entry_category', '1');
    hatena_module.setAttribute('data-display_entry_image', '1');
    hatena_module.setAttribute('data-display_entry_image_size_width', '160');
    hatena_module.setAttribute('data-display_entry_image_size_height', '160');
    hatena_module.setAttribute('data-display_entry_body_length', '0');
    hatena_module.setAttribute('data-display_entry_date', '1');
    hatena_module.setAttribute('data-display_bookmark_count', '1');
    hatena_module.setAttribute('data-source', 'access');

    var hatena_module_body = document.createElement('div');
    hatena_module_body.setAttribute('class', 'hatena-module-body');
    hatena_module.appendChild(hatena_module_body);

    ec.appendChild(hatena_module);
    
    var footer = document.createElement('p');
    footer.appendChild(document.createTextNode("ありがとうございました(｡>ㅅ<｡)"));
    ec.appendChild(footer);
  });
</script>

文字やパラメータを変更すれば、
自分のブログに合わせてカスタマイズもできます ٩(•ᴗ• ٩)

成果物はこちら

存在しないurlなら何でも大丈夫ですが、せっかくなので、404を。

https://h-s-hige.hateblo.jp/404

f:id:herrscherinnen:20190430125558p:plain

平成もまもなく終わりですね、残された平成を楽しみます！

令和の前に、ブログをメンテナンスできてよかった ( ˙꒳˙ )

今日もありがとうございました ٩(ˊᗜˋ*)و

2019-04-29

はてなブログにグローバルナビゲーションを導入する方法

はてなブログ技術 javascript

f:id:herrscherinnen:20190429174057p:plain

前回、グロナビを作りました。

記事はこちら。

h-s-hige.hateblo.jp

今回は、グロナビをつけてみたい人のための紹介です。

手順

HTMLを貼りつけます
HTMLをカスタマイズします
CSSを貼りつけます
CSSをカスタマイズします

項目ごとに説明します。

念のため、元に戻せるように、
コピー先のHTMLとCSSを保存しておいてください。

HTMLを貼りつけます

ブログ管理画面から、
デザイン > カスタマイズ > ヘッダ > タイトル下のところに貼りつけます。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<ul id="gnav">
<li><a href="https://url/example"><i class="fas fa-paw"></i><span>にゃんこ</span></a></li>
<li><a href="https://url/example"><i class="fas fa-paw"></i><span>にゃんこ</span></a></li>
<a href="https://url/example" style="position: relative; top: -40px;"><img src="https://url/example.png" style="height: 96px;" /></a>
<li><a href="https://url/example"><i class="fas fa-paw"></i><span>にゃんこ</span></a></li>
<li><a href="https://url/example"><i class="fas fa-paw"></i><span>にゃんこ</span></a></li>
</ul>

HTMLをカスタマイズします

貼り付けたHTMLを、ブログに合わせて変更します。

span タグは表示する文字にしてください。
- 「にゃんこ」のところです。

i タグは font-awesome のアイコンから選んで、置き換えてください。
- <i class="fas fa-paw"></i> のところです。
- PRO のマークのあるアイコンは有償なので注意してください。

a タグの href 属性を移り先のURL にしてください。
- https://url/exampleのところです。

img タグの src 属性を画像のURL にしてください。
- https://url/example.png のところです。

CSS を貼りつけます

ブログ管理画面から、
デザイン > カスタマイズ > デザインCSS のところに貼りつけます。

#gnav {
  display: flex;
  font-family: "quicksand";
  font-weight: bold;
  justify-content: space-between;
  list-style:none;
  max-width: 1000px;
  margin:0 auto;
  padding: 0;
}

#gnav > a:hover {
  transform: scale(1.1, 1.1);
}

#gnav li {
  background-color: #ffffff;
  margin: 0 auto;
  text-align: center;
  width: 25%;
}

#gnav li i {
  font-size: 24px;
}

#gnav span {
  padding-left: 16px;
}

#gnav > li > a {
  border-bottom: 2px solid #dddddd;
  color: #eb6ea5;
  display: block;
  line-height: 40px;
  margin: 8px 0;
  text-decoration: none;
  vertical-align: baseline;
}

#gnav > li > a:hover {
  border-bottom: 2px solid #69B8D2;
  color: #69B8D2;
}

@media (max-width: 767px) {
  #gnav span {
    display: none;
  }
}

CSSをカスタマイズします

ブログに合わせて、文字や下線の色や大きさを変更します。

プレビューで確認して、変更を保存したら、完成です。

ありがとうございました ٩(ˊᗜˋ*)و

2019-04-29

【ブログ】( ๑╹ω╹๑ ) グローバルナビゲーションを導入しました

はてなブログ技術

グローバルナビゲーションとは

基本的にすべての画面に表示されます。
サイト内を移動するのに、利用頻度の高いリンクがまとめられています。

ざっくりは、そんなメニューのことのようです。

詳しくはこちら。

グローバルナビゲーションとは何？ Weblio辞書

やること

グロナビを作って、導入する。

やったこと

成果がこちらです。
（画面の上のほうにも、同じものが表示されています。）

f:id:herrscherinnen:20190429174057p:plain

真ん中に、ねこさんを配置しました。
- ポチると、トップページに移ります。

左右に、 2つずつのメニューを配置しました。
- ポチると、そのカテゴリのページに移ります。

ヘッダの画像をグラデーションにしました。
- 境界をぼかして、ねこさんが自然に突き抜けるようにしました。

次回のおはなし

次は切株おやじさんに教えていただいた、 404 ページのカスタマイズをやってみたいと思います (๑˃̵ᴗ˂̵๑)

親切な切株おやじのブログはこちらです。
きれいな写真とルンバの動画が印象的です ⁺⸜( •̥௰•̥ )⸝⁺

www.happablog.com

今日もありがとうございました ٩(ˊᗜˋ*)و

【追記】グロナビの導入の仕方はこちら

h-s-hige.hateblo.jp

2019-04-27

【頭のすみっこ】テキストファイルを結合する方法

windows cmd 技術

おはようございます。

今日はたくさんのテキストドキュメントを１つに結合して、
まとめてしまう方法を紹介します。
_{テキストドキュメントは拡張子が txt のファイルです。}

ファイルが 2つや 3つのときは困りませんが、
ファイルが 100 や 1,000 になると、
1つ1つ手作業でまとめるのは大変 ↷( ó╻ò)

簡単な方法があることだけ、頭のすみっこにあると、
どこかで役に立つかもしれません ( ˙꒳˙ )

手順

コマンドプロンプトまたは PowerShell を開きます。
コマンドを実行します。

手順ごとに、やり方を説明していきます。

コマンドプロンプトまたは PowerShell を開きます。

スタートメニューから起動することもできますが、
ここでは、指定のフォルダで簡単に起動できる方法を紹介します。

フォルダを開きます。
- まとめるテキストドキュメントのあるフォルダを開いてください。
Shiftキーを押しながら、右クリックします。
- 右クリックメニューが開きます。
Windows 8.1以前の方
- 「コマンドウィンドウをここで開く」を選択します。
Windows 10 の方
- 「PowerShell ウィンドウをここで開く」を選択します。

コマンドを実行します。

開いたウィンドウで、次のコマンドを実行します。

type *.txt > result.txt

このコマンドでは、
フォルダにあるすべてのテキストドキュメントを 1つに結合して、
result.txt に保存しています。

ほかの種類のファイルにも使えます。

txtファイルでの紹介でしたが、ほかの種類でも応用できます。

たとえば…

csvファイルをまとめる
- type *.csv > result.csv
tsvファイルをまとめる
- type *.tsv > result.tsv
logファイルをまとめる
- type *.log > result.log

たくさんのファイルを扱うようになったら、
思い出してみてください (∩･∀･∩)

さらっとできれば、きっとカッコイイです。

その頃、遊んでもらえるのを待つシアンさん。

コタツがお気に入り、いつまでも片付けられない ↷( ó╻ò)

f:id:herrscherinnen:20190427093541j:plain

今日もありがとうございました ٩(ˊᗜˋ*)و

2019-04-26

【HTML/JavaScript】よくある canvas要素に画像を表示する対応【テンプレート付】

javascript 技術

おつかれさまです。

記事の前に、まずはにゃんこ成分を充電します ( ˙꒳˙ )

f:id:herrscherinnen:20190426001013j:plain

いい寝顔で疲れが癒されるぅ(๑˃̵ᴗ˂̵๑)

前回の記事はこちら

h-s-hige.hateblo.jp

canvasでは、画像やアニメーションが魅力的です。

○や□といった図形や、文字もかけますが、ぱっと見栄えがよくなりそうなことをやるほうが楽しいです (｡･-･｡)

そこで今回は、canvas に画像を描画します。

canvas に画像を表示するには、大まかに次の手順が必要です。

Image オブジェクトを作る
Image オブジェクトに onload で実行されるイベントハンドラを登録する
Image オブジェクトに src プロパティを設定する

onload に登録する処理は、画像を描画する処理です。
src プロパティを設定すると、画像の読み込みが始まります。

そのため、srcプロパティよりも先に、onloadの登録が必要です。
_{逆にすると、onload が呼ばれないことがあります。}

ソースコードはこちらが、参考になりました。

developer.mozilla.org

わかりやすいですが、すぐに壁にあたります。

画像が複数のときはどうすればいいのか…↷( ó╻ò)

やること

複数の画像を canvas に描画する。
canvas への描画は、すべての画像を読み込んだあとに行う。

やったこと

ロードを待ち合わせて描画するロジック。

  // 画像のパス一覧
  // https://picsum.photos/
  var sources = [
    "https://picsum.photos/240/360",
    "https://picsum.photos/240/320",
    "https://picsum.photos/240/280",
    "https://picsum.photos/240/240",
  ];

  // 画像のロードを待つ
  var waiting_for_load = sources.length;
  var images = Array.apply(null, Array(sources.length)).map(() => new Image());
  images.map((image, i) => {
    image.onload = () => --waiting_for_load == 0 && draw(); // 画像のロードが終わったら draw を呼んで描画します
    image.onerror = () => console.log("failed to load.");
    image.src = sources[i];
  });

  context.textBaseline = 'middle';

  var draw = () => {
    // キャンバスに画像を描画する
    // http://www.html5.jp/canvas/ref/method/drawImage.html
    images.forEach((image, i) => context.drawImage(image, image.width * i, canvas.height / 2 - image.height / 2));
  };

前回のソースに組み込みます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Title</title>
<style>
html, body {
  height: 100%;
  margin: 0;
}

#canvas {
  position: relative;
  left: 50%;
  top: 50%;
  margin-left: -480px; // canvas の width/2
  margin-top: -360px; // canvas の height/2
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
  var canvas = document.getElementById('canvas');
  var styles = canvas.getAttribute('style') || '';
  var context = canvas.getContext('2d');

  // canvasが見えるように、色を付けます
  context.fillStyle = 'rgba(0,0,16, 0.66)';
  context.fillRect(0, 0, canvas.width, canvas.height);

  var onResize = canvas => {
    var scale = Math.min(window.innerWidth / canvas.width, window.innerHeight / canvas.height);
    var transform = 'scale(' + scale + ',' + scale + ');';

    canvas.setAttribute('style', styles + 
      '    -moz-transform: ' + transform + 
      '     -ms-transform: ' + transform + 
      '      -o-transform: ' + transform + 
      '         transform: ' + transform + 
      ' -webkit-transform-origin: center center;' +
      '    -moz-transform-origin: center center;' +
      '     -ms-transform-origin: center center;' +
      '      -o-transform-origin: center center;' +
      '         transform-origin: center center;'
    );
  }

  onResize(canvas);
  window.addEventListener('resize', () => onResize(canvas), false);


  // 画像のパス一覧
  // https://picsum.photos/
  var sources = [
    "https://picsum.photos/240/360",
    "https://picsum.photos/240/320",
    "https://picsum.photos/240/280",
    "https://picsum.photos/240/240",
  ];

  // 画像のロードを待つ
  var waiting_for_load = sources.length;
  var images = Array.apply(null, Array(sources.length)).map(() => new Image());
  images.map((image, i) => {
    image.onload = () => --waiting_for_load == 0 && draw(); // 画像のロードが終わったら draw を呼んで描画します
    image.onerror = () => console.log("failed to load.");
    image.src = sources[i];
  });

  context.textBaseline = 'middle';

  var draw = () => {
    // キャンバスに画像を描画する
    // http://www.html5.jp/canvas/ref/method/drawImage.html
    images.forEach((image, i) => context.drawImage(image, image.width * i, canvas.height / 2 - image.height / 2));
  };
});

</script>
</head>
<body>
  <canvas id="canvas" width=960 height=720 style="position: relative; left: 50%; margin-left: -480px; top: 50%; margin-top: -360px;">
  </canvas>
</body>
</html>

これで canvas を急に使うことになっても、ざっくり安心 ( ˙꒳˙ )

1file で動かせるのでお手軽です。

今回使ったダミー画像はこちら。

picsum.photos

画像を表示する drawimage メソッドはこちら。

www.html5.jp

今日もありがとうございました ٩(ˊᗜˋ*)و

2019-04-24

【HTML/JavaScript】よくある canvas要素のフルスクリーン対応【テンプレート付】

javascript 技術

おつかれさまです。

記事の前に、まずはにゃんこ成分を充電します ( ˙꒳˙ )

f:id:herrscherinnen:20190424191332j:plain

すこし大人っぽく写ったかな?

canvas とは

canvas要素は、JavaScript で画像や図形を描画できる HTML要素です。

例えば、動画やカメラ映像を取り込んで加工したり、ゲームを作ったりできます。

詳しくはこちら。

ja.wikipedia.org

canvas要素では、画像やアニメーションが使えることがわかりました。

画像やアニメーションを使うときは、それを画面いっぱいに表示したいことがあります。

結構あります。

_{たとえば、動画を再生するプレーヤーは、ほぼフルスクリーンにする機能があります}

大きさを設定するには

canvas要素には、widthとheightという属性があり、HTML内での描画可能な領域になります。

width は要素の横幅、height は要素の高さを示してます。

_{canvas の大変さを説明するために、}

例えば、img要素を横幅いっぱいにするには、
width を 100% にすることで実現できます。

詳しくはこちら。

www.sejuku.net

簡単です。

ですが、canvas のサイズ( width と height )は、固定値しか使えず、
簡単に画面いっぱいに表示することはできません ↷( ó╻ò)

毎回こまるので、ここに記録します。

やること

canvas の縦横比を崩すことなく、canvas ができるだけ大きくなるよう拡大縮小します。
canvas の縦横比が画面と異なる場合、空き領域が上下または左右で同じになるように canvas を中央に配置します。

やったこと

これで canvas をフルスクリーンで表示できるようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Title</title>
<style>
html, body {
  height: 100%;
  margin: 0;
}

#canvas {
  position: relative;
  left: 50%;
  top: 50%;
  margin-left: -480px; // canvas の width/2
  margin-top: -360px; // canvas の height/2
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
  var canvas = document.getElementById('canvas');
  var styles = canvas.getAttribute('style') || '';
  var context = canvas.getContext('2d');

  // canvasが見えるように、色を付けます
  context.fillStyle = 'rgba(0,0,16, 0.66)';
  context.fillRect(0, 0, canvas.width, canvas.height);

  var onResize = canvas => {
    var scale = Math.min(window.innerWidth / canvas.width, window.innerHeight / canvas.height);
    var transform = 'scale(' + scale + ',' + scale + ');';

    canvas.setAttribute('style', styles + 
      '    -moz-transform: ' + transform + 
      '     -ms-transform: ' + transform + 
      '      -o-transform: ' + transform + 
      '         transform: ' + transform + 
      ' -webkit-transform-origin: center center;' +
      '    -moz-transform-origin: center center;' +
      '     -ms-transform-origin: center center;' +
      '      -o-transform-origin: center center;' +
      '         transform-origin: center center;'
    );
  }

  onResize(canvas);
  window.addEventListener('resize', () => onResize(canvas), false);
});
</script>
</head>
<body>
  <canvas id="canvas" width=960 height=720 style="position: relative; left: 50%; margin-left: -480px; top: 50%; margin-top: -360px;">
  </canvas>
</body>
</html>

これで、毎回の調査から卒業 (´>∀<`*)

続きはこちら

h-s-hige.hateblo.jp

今日もありがとうございました ٩(ˊᗜˋ*)و

2019-04-21

【後日談】雇用契約書ジェネレータとはてなブログ上でのプログラムで困ったこと＆解決方法

はてなブログ技術

先日、愛猫や愛犬との雇用契約書を作れるページを作りました。

今日は、使わせていただいたものの紹介と困ったことについてです。

_{はてなブログ上で作ろうとして、たくさん躓きました…}

まずは、記事の前に、にゃんこ成分をチャージしてください (｡･-･｡)

f:id:herrscherinnen:20190421214036j:plain

書き終わるのを待つ、チョコさん ٩(•ᴗ• ٩)

背景

購読させていただいている green3lk さんのブログの記事を読んで、「やってみたい！」と思ったからです。

green3lk.hatenablog.com

green3lk さんと創作欲を引き出す魅力的な記事に感謝 (⁎˃ᴗ˂⁎)

_{追記：はてなブログでやろうと思ったのは、不自由が成長と創造性を...、いえ、違いました、なんとなくです ( ˙꒳˙ )}

使わせていただいたもの

html2canvas

JavaScriptのライブラリです。

説明を公式から引用。

The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.

きっと簡単にいえば、htmlをcanvasに変えられると書いてあります（白目）

html2canvas.hertzen.com

肉球のアイコン

モノトーンさんのアイコンです。
モノトーンさんは商用利用可能なアイコン素材をフリー(無料)でダウンロードできる素材配布サイトです。

icooon-mono.com

ふい字

かわいいフォントです。

hp.vector.co.jp

もじまる

水玉模様の画像が作れるジェネレーターです。

www.mojimaru.com

困ったこと＆どうやって解決したか

いつも使っている node の環境が使えない

どうにもなりませんでした…↷( ó╻ò)

記事単位でStyleタグが使えない

はてなブログでは、記事にstyleタグを書いても無視されているようでした…↷( ó╻ò)

共通では CSS が書けるのですが、この記事以外でも読み込んでしまうので、あまりよくありません。

今回は、HTMLのタグに直接style属性を書きました。

onclick属性、onchange属性が消される

はてなブログでは、HTMLの編集で onclick属性、onchange属性を書いても、記事には反映されませんでした。

プレビューして、記事の編集画面に戻ると、消されています...↷( ó╻ò)

今回は、jQueryでイベントをbindしました。
Javascript側では、制限されていないようで、無事に動かせました。

画像のドメインが違うため、CORSに引っかかる

はてなブログの画像は、はてなフォトライフにあるものを読み込むため、ドメインが異なります。

そのため、 canvas の toDataURLメソッドなどでは、CORSの制限に引っかかります...↷( ó╻ò)

今回は、画像を base64に変換して、直接埋め込みました。
_{imgタグのsrc属性、style属性内の background-image で使っています。}

おわりに

_{先人の素晴らしい成果物を組み合わせただけで、私が何もしていないのがばれてしまう記事でした(´>∀<`*)}

よかったら遊んでみてください ( ˙꒳˙ )

h-s-hige.hateblo.jp

今日も、ありがとうございました ٩(ˊᗜˋ*)و

404 Not found とは

やること

わかりやすいメッセージにする

おすすめ記事を載せる

やったこと

成果物はこちら

手順

HTMLを貼りつけます

HTMLをカスタマイズします

CSS を貼りつけます

CSSをカスタマイズします

グローバルナビゲーションとは

やること

やったこと

次回のおはなし

手順

コマンドプロンプト または PowerShell を開きます。

コマンドを実行します。

ほかの種類のファイルにも使えます。

前回の記事はこちら

やること

やったこと

今回使ったダミー画像はこちら。

画像を表示する drawimage メソッドはこちら。

canvas とは

大きさを設定するには

やること

やったこと

背景

使わせていただいたもの

html2canvas

肉球のアイコン

ふい字

もじまる

困ったこと ＆ どうやって解決したか

いつも使っている node の環境が使えない

記事単位でStyleタグが使えない

onclick属性、onchange属性が消される

画像のドメインが違うため、CORSに引っかかる

おわりに

コマンドプロンプトまたは PowerShell を開きます。

困ったこと＆どうやって解決したか