月: 2018年8月

Surface Goが届いたのでセットアップ

もうおとといの話になるけど、注文してあった Surface Go が届いたのでセットアップをした。
セットアップといっても Windows のそれは、画面の案内に沿ってやっていくだけなのでサクッと終了。どういうわけかホスト名を指定するところがなかったので、スタートメニューから[設定]→[システム]→[バージョン情報]と辿って、「このPCの名前を変更」ボタンを押して変更した。名前は flambay にした。

Surface Go の Windows は Sモードといって、Microsoft Store のアプリしか使えないようになている（その代わり安全でパフォーマンスも悪くならないらしい）ので、これを解除して普通の Windwos 10 Home にする。このページから Microsoft Store を開くとSモードを解除するページに飛んだので（今試したら出てこなかったけど）、「インストール」を押して解除。なんだかすぐに終わったので大丈夫か？と思ったけど、大丈夫らしい。後に書くどちゃんと Microsoft Store 以外のアプリもインストールできるようになったのでOKのようだ。
アプリのインストールには Chocolatey という、Windows 用のパッケージマネージャーを使った。

　cf. Chocolatey

要するに Ubuntu の apt や Mac の homebrew みたいなもの。インストールするには、PowerShell を管理者モードで開いて、インストールページにあるコマンドをコピペして実行する。インストール出来たら、いろんなアプリをコマンドだけでインストールできるようになる。とりあえずは次のアプリをインストールした。

  • Chocolatey GUI
  • Ruby
  • Go
  • GIt
  • Google Chrome
  • Sublime Text3
  • Dropbox
  • 秀丸エディタ

Gauche はパッケージがなかったので公式サイトから msi インストーラをダウンロードして普通にインストールした。
あと、Python をインストールしたいんだけど、今回は Jupyter notebook も使ってみたいので、どうしようか考えている。

とりあえずこんなところでいったん終了。

Ubuntu:ホスト名を変更

hostnamectl コマンドを使う。
引数無しで使うと、現在の情報を表示してくれる。

takatoh@envelopes $ hostnamectl
   Static hostname: envelopes
         Icon name: computer-desktop
           Chassis: desktop
        Machine ID: 51e97893a0e54d888a7bc435e3cb10be
           Boot ID: 528cc17f21ef4185b0697228e4d092b5
  Operating System: Ubuntu 16.04.5 LTS
            Kernel: Linux 4.4.0-133-generic
      Architecture: x86-64

hostnamectl set-hostname コマンドでホスト名変更。

takatoh@envelopes $ sudo hostnamectl set-hostname apostrophe
[sudo] takatoh のパスワード:

確認。

takatoh@envelopes $ hostnamectl
   Static hostname: apostrophe
         Icon name: computer-desktop
           Chassis: desktop
        Machine ID: 51e97893a0e54d888a7bc435e3cb10be
           Boot ID: 528cc17f21ef4185b0697228e4d092b5
  Operating System: Ubuntu 16.04.5 LTS
            Kernel: Linux 4.4.0-133-generic
      Architecture: x86-64

ちゃんと変わっている。

/etc/hosts ファイルを編集。

127.0.0.1 localhost
127.0.1.1 apostrophe # ←ここを修正した。

192.168.1.21 muffinman
192.168.1.15 montana
192.168.1.6 wplj
（以下略）

ネットワークの再起動。

takatoh@envelopes $ sudo service networking restart

これでOK。プロンプトのホスト名が変わっていないけど、これは端末を起動し直すと直る。

HTMLとJavaScriptで画像をリサイズ

HTML + JavaScript ツール第3弾。
HTML5 の canvas 要素で画像のリサイズができるというので、やってみた。

　cf. 画像のリサイズ

Size を指定しておいて、リサイズしたい画像を選ぶとリサイズされた画像が画面に並ぶようになっている。画像をクリックすればダウンロードもできる。

参考にしたページはいくつかあるけど、↓ここを挙げておこう。

　cf. クライアント側でcanvasを使って画像をリサイズする – Qiita

以下、ソース。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Resize image</title>
    <script type="text/javascript">
      function resizeImage(base64image, callback) {
        const MAX_SIZE = Number(document.getElementById("size").value);
        let canvas = document.createElement("canvas");
        let ctx = canvas.getContext("2d");
        let image = new Image();
        image.crossOrigin = "Anonymous";
        image.onload = function(evt) {
          let dstWidth, dstHeight;
          if (this.width > this.height) {
            dstWidth = MAX_SIZE;
            dstHeight = this.height * MAX_SIZE / this.width;
          } else {
            dstHeight = MAX_SIZE;
            dstWidth = this.width * MAX_SIZE / this.height;
          }
          canvas.width = dstWidth;
          canvas.height = dstHeight;
          ctx.drawImage(this, 0, 0, this.width, this.height, 0, 0, dstWidth, dstHeight);
          callback(canvas.toDataURL("image/png"));
        };
        image.src = base64image;
      }

      function buildFilename(origname) {
        let re = /(.*)(?:\.([^.]+$))/;
        let basename = origname.match(re)[1];
        return "resized_" + basename + ".png";
      }

      function handleFileSelect(evt) {
        let files = evt.target.files;
        for (let i = 0, f; f = files[i]; i++) {
          let reader = new FileReader();
          reader.onload = (function(theFile) {
            return function(e) {
            resizeImage(e.target.result, function(imgUrl) {
              let dest = document.getElementById("list");
              let fig = document.createElement("figure");
              fig.style = "float: left;";
              let a = document.createElement("a");
              a.href = imgUrl;
              a.download = buildFilename(theFile.name);
              let image = document.createElement("img");
              image.src = imgUrl;
              let caption = document.createElement("figcaption")
              caption.innerHTML = theFile.name + " resized.";
              a.appendChild(image);
              fig.appendChild(a);
              fig.appendChild(caption);
              dest.appendChild(fig);
            });
          }})(f);
          reader.readAsDataURL(f);
        }
      }
 
      document.addEventListener("DOMContentLoaded", function() {
      document.getElementById("files").addEventListener("change", handleFileSelect, false);
      }, false);
    </script>
  </head>
  <body>
    <h1>Resize image</h1>
    <p>下のSizeで指定したサイズの正方形におさまるようにリサイズします。</p>
    <p>画像をクリックすればダウンロードできます。</p>
    Size: <input id="size" type="text" value="400"> pixel<br />
    <input id="files" multiple="multiple" name="files[]" type="file"><br />
    <div id="list"></div>
  </body>
</html>

HTMLとJavaScriptでMD5ハッシュ値の計算

先週、華氏度と摂氏度の換算をする WEB ページを作ってみて、HTML と JavaScript だけでページを作れば、サーバなしで簡単なツールを作れることが分かった。
そこで、いくつか同じように WEB ページで動くツールを作ってみている。今日は、ローカルファイルの MD5 ハッシュ値を計算するツール（ページ）を紹介しよう。

　cf. MD5ハッシュ値の計算

ページを作るにあたっては、次のページとそこからリンクされているページを参考にした。

　cf. ローカルバイナリファイルからMD5ハッシュ値を計算する

特にローカルファイルの扱い方が参考になった。また、MD5 ハッシュ値の計算は、次のページで公開されている JavaScript のライブラリをそのまま使わせてもらった。

　cf. 高度な JavaScript 技集

最後に HTML のソースを載せておく。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>MD5 calculator</title>
    <script type="text/javascript" src="js/md5.js"></script>
    <script type="text/javascript">
      const handleFileSelect = (evt) => {
        const files = evt.target.files;
        const output = document.getElementById("list");
        output.innerHTML = "<ul>";
        for (let i = 0, f; f = files[i]; i++) {
          const reader = new FileReader();
          reader.onload = ((theFile) => {
            return (e) => {
              const hexdigest = MD5_hexhash(e.target.result);
              output.innerHTML += "<li>" + hexdigest + "  " + theFile.name + "</li>";
            }
          })(f);
          reader.readAsBinaryString(f);
        }
        output.innerHTML += "</ul>"
      }
      document.addEventListener("DOMContentLoaded", () => {
        document.getElementById("files").addEventListener("change", handleFileSelect, false);
      }, false);
    </script>
  </head>
  <body>
    <h1>MD5 calculator</h1>
    <input type="file" id="files" name="files[]" multiple /><br />
    <output id="list"></output>
  </body>
</html>

華氏度と摂氏度の換算

「Fahrenheit 451」のTシャツを買ったんだ。ブラッドベリの「華氏451度」。白。カッコイイ。

で、華氏451度って、摂氏でいうと何度なの？という当然の疑問が。まあ、ググればすぐにわかるんだけど、せっかくなのでそれで終わりにするんじゃなくて、華氏と摂氏の換算をするページを HTML と JavaScript で書いてみた。

　cf. 華氏度↔摂氏度の換算

ソースも載せておく。 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Fahrenheit / Celsius converter</title>
    <script type="text/javascript">
      const convert = () => {
        const deg = document.getElementById("degree").value;
        const dest = document.getElementById("answer");
        const elements = document.getElementsByName("temperature");
        let a;
        for (let i = 0; i < elements.length; i++) {
          if (elements[i].checked) {
            a = elements[i].value;
            break;
          }
        }
        if (a === "fahrenheit") {
          dest.innerHTML = f2c(Number(deg));
        } else {
          dest.innerHTML = c2f(Number(deg));
        }
        
      }

      const f2c = (deg) => {
        return (deg - 32) * 5 / 9;
      }

      const c2f = (deg) => {
        return deg * 9 / 5 + 32;
      }

      const clearVals = () => {
        document.getElementById("degree").value = "";
        document.getElementById("answer").innerHTML = "";
      }

      document.addEventListener("DOMContentLoaded", () => {
        document.getElementById("convertButton").addEventListener("click", convert, false);
        document.getElementById("clearButton").addEventListener("click", clearVals, false);
      }, false);
    </script>
  </head>
  <body>
    <h1>Fahrenheit / Celsius converter</h1>
    <input type="radio" name="temperature" value="fahrenheit" checked />
      Fahrenheit into Celsius<br />
    <input type="radio" name="temperature" value="celsius" />
      Celsius into Fahrenheit<br />
    <input type="text" id="degree" />
    <button type="button" id="convertButton">convert</button><br />
    <output id="answer"></output><br />
    <button type="button" id="clearButton">clear</button>
  </body>
</html>

で、結局、華氏451度が摂氏何度なのかというと、四捨五入して約233度。