モーリーのメモ

アプリ開発等(プログラミング、CG作成)、興味を持ったことを実践してまとめるブログです。

モーリーのメモ

Node.jsをMacにインストール!(Homebrew→Nodebrew→Node.js順にインストール)

 <前置き>
 画像から文字を読み込むOCRについて調べていたら、Tessract.js(テッサラクト・ジェイエス)というライブラリを発見しました。
 なんと純粋なJavaScriptで書かれているとのこと。しかも60以上の言語を認識出来るらしいです。
 さっそく手順に従ってHTMLに組み込んでみましたが、ブラウザがローカルデータへのアクセスを制限されているため失敗しました。
 ブラウザにアクセス許可を与えるのは怖いなと思ったのですが、他に『Tesseract.jsをnpmでインストールして、requireして使う方法』が書いてありました。出てきた用語だいたいわかりません。
 npm?、require?、どういうこと?と思って調べると、まずはNode.jsを導入する必要があることがわかりました。
 Node.jsは、従来のHTMLに組み込むJavaScriptとは別物でしたが、調べるとBrowserifyという従来のJavaScriptと結びつける方法もあるようなので、中々おもしろそうです。
 ということで、名前は知っていたものの横目で見るだけだったNode.jsをこれを機に導入することにしました。
 <ここから本題>
 調べたところNode.jsを直接インストールするより、Homebrew→Nodebrew→Node.jsの順にインストールするのが後々を良いようです。
 その理由となるそれぞれの役割について、簡単にですがまとめました。
 また、YosemiteやEl Capitanで、Homebrew経由でインストールするとNodebrewがうまく動かないという記事がありましたが、私の環境(El Capitan)では問題は起きていません。
 実際にインストールした手順をまとめました。
 インストール後に、Node.jsで実際に、HelloWorldプログラムとTessract.jsを使った文字認識を実行しました。

続きを読む

翻訳サイトから翻訳結果を取ってくる!:Googleスプレッドシート

 私は英語の文章を読むときは、翻訳サイトにたよりまくりです。
 翻訳サイトの精度は以前より良くなっていると感じますが、それでも変な日本語になるケース少なくないです。
 なので、何個かの翻訳サイトの訳を見比べて、意味の通るように訳すことが多いです。
 この何個かの翻訳サイトの訳を集める作業が面倒くさいので、自動化します。
 
 こんな感じにします。
 ↓訳したい英文をスプレッドシートに貼り付けます。
f:id:mmorley:20161112231831p:plain:w450
 ↓翻訳サイトから翻訳結果を取得し、下図のように並べて表示します。
f:id:mmorley:20161113001036p:plain:w500 
 翻訳結果を参考にして、『訳』の行に自分の訳を書きます。
 
 ちなみに、翻訳サイトの仕様が変わると使えなくなります。
 あしからず。

続きを読む

年賀はがきの宛名印刷を作る!:Googleスプレッドシート

 Google スプレッドシートで宛名印刷を作ります。
 
 記事にあるApps Scriptのコードをコピペして実行すると、宛名印刷関連のメニューがスプレッドシートに追加されます。
 
 追加されたメニューにより、住所録シートのデータから、

    f:id:mmorley:20161103120155p:plain
 宛名印刷のデータを作成します。
    f:id:mmorley:20161103170735p:plain:w350
 
 なお実際に使うまでには、はがきに対する印刷位置の調整する必要があります。また、文字数の制限等の入力ルールがあります。
 そして、スプレッドシートの仕様でフォントが自由に選べないといった制約があります。
 
 ある程度、調整を楽しめる人向けの記事になります。

続きを読む

ピボットテーブルの使い方を調べる!:Googleスプレッドシート

 『ピボットテーブル』・・・私にとってExcelの分からない&使ったことがない機能ですが、ちょっと気になってました。
 
 先日、Googleスプレッドシートにも同様の機能があることを知り、良い機会なので使い方等を調べてみました。
  f:id:mmorley:20161027235918p:plain:w350

続きを読む

セルのデータをWebで検索する!(英単語の辞書引き):Googleスプレッドシート

 Googleスプレッドシートに、単語や熟語を入力してEnterキーを押すと、
f:id:mmorley:20161018105158p:plain
 辞書のリンクが出て、
f:id:mmorley:20161018105549p:plain
 辞書が引けるようにします。
f:id:mmorley:20161018165325p:plain:w500
 
 作り方を説明します。
 プログラムの部分はコピペで出来ます。

続きを読む

HTMLとCSSをEmmetで書いてみる!:Visual Studio Code

 Emmetとは、HTMLとCSS を省略記法で、効率よく書くためのプラグインです。
 Visual Studio Code(以下、VSCode)では、標準で使えます。
 例えば、

html:5

と入力して、Tabキー(*VSCodeの場合)を押すと

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

↑のようにコードが展開されます。
 もう一例、

table>tr>th+td

と入力して、Tabキーを押すと

<table>
    <tr>
        <th></th>
        <td></td>
    </tr>
</table>

となります。
 という風に、少ない文字数で書くことが出来ます。
 VSCodeの他にも、Atom等、プラグインを導入することでEmmetが使用できるコードエディタは多数あります。

続きを読む

『/(スラッシュ)』1つで切り替え可能なコメントの書き方

 『/(スラッシュ)』を1つ書いたり消したりするだけで、コメントアウト部分を切り替え可能なコメントの書き方です。

書き方

 早速ですが、これ↓です。

//*
    a = 1; 
/*/
    a = 2; // こっちがコメントアウト
//*/

 ↑の1行目の先頭の『/(スラッシュ)』を1つ消すと

/*
    a = 1; // こっちがコメントアウト
/*/
    a = 2;
//*/

 コメントアウトの部分が切り替わります。
 
 単行コメント『//』と複数行コメント『/* */』を上手く組み合わせています。

あとがき

 普通のコメントの書き方で事足りるのですが、ふと使いたくなる時があります。
 そんな時はいつもうろ覚えなので、メモとして記事にしました。
 
 JavaScripの他にも、コメントの書き方が同じ言語なら使えますね。
 尚、CSSは、複数行コメント『/* */』しかないという罠。