まえやってたやつの１章やってる間にこっちだと全部できちゃう。

Gitとか余計な内容がないのと、Rubyの話とか少なくて、Railsの話の割合が高くて良い感じ。

最初からこっちやっとくべきでした。

もし今までやってた外人の日本語訳のサイトやるなら、こっちやってからの方が良い気がします。

2019年6月23日2019年6月28日

Chrome addon を作ってみようぜ！

1 関連サイト

公式サイト: https://developer.chrome.com/extensions
Manual: https://developer.chrome.com/extensions/getstarted

2 サンプル

2.1 テスト00 最小構成、スクリプト無しタイプ

2.1.1 この操作を行っている動画

2.1.2 manifest.json

chromeアドオンの設定関係を記述するファイル。
最小構成だと、これだけになる。
https://developer.chrome.com/extensions/examples/tutorials/get_started/manifest.json を修正したもの
全体を{}でくるむ
keyとvalueを　: で区切る
ここでは、name, version, manifest_version, descriptionを記述しています。

{
  "name" : "helloworld",
  "version" : "0.0.1",
  "manifest_version" : 2,
  "description" : "Hello World Chrome Extension"
}

2.1.3 ファイル階層

chrome_addon_{000フォルダに入れてます}。

chrome_addon_000
└── js
    └── manifest.json

1 directory, 1 file

2.1.4 作成したChromeアドオンをChromeにインストールする方法

Chromeを立ち上げ
Chromeのメニューの（メニューを開くところは画面の右上にあります。縦に３つ点が並んでいるところクリック）「その他ツール」「拡張機能」を選択して、拡張機能画面を出す。
拡張機能画面の右上にある「デベロッパーモード」の横のところをクリックして有効にします。これをすると、「パッケージ化されていない拡張機能を読み込む」「拡張機能をパッケージ化」「更新」という３つのボタンが上部に現れます。
「パッケージ化されていない拡張機能を読み込む」をクリックして、読み込みたい拡張機能のmanifest.jsonがあるディレクトリを選択して「開く」を押します。
操作に成功すると、helloworld 0.0.1 という新しいChromeアドオンが追加されます。

2.2 テスト01 指定のサイト(私のブログhttps://blog.123abcsoft.com/)を開くとログが出力されて、ポップアップウインドウが表示される

2.2.1 この操作を行っている動画

2.2.2 manifest.json

テスト00に加えて、content_{scriptsが追加されています}。
content_{scriptsのmatchesで}、js要素にかかれている　helloworld.js を起動する動作となります。
FirefoxのGreasemonkey, ChromeのTampermonkey的な動作となります。

{
  "name" : "helloworld",
  "version" : "0.0.1",
  "manifest_version" : 2,
  "description" : "Hello World Chrome Extension",
  "content_scripts" : [{
    "matches" : ["https://blog.123abcsoft.com/*"],
    "js" : [
      "helloworld.js"
    ]
  }]
}

2.2.3 helloworld.js

1行目がデベロッパーツールのconsoleに文字列を表示する命令になっています。
2行目がポップアップを出す命令になってます。

console.log("Hello World");
alert("Hello World");

2.2.4 ファイル階層

chrome_addon_{001フォルダに入れてます}。

2.2.5 ファイル階層

chrome_addon₀₀₁_helloworld フォルダに入れてます。

chrome_addon_001_helloworld/
└── js
    ├── helloworld.js
    └── manifest.json

1 directory, 2 files

2.2.6 作成したChromeアドオンをChromeにインストールする方法

test01の最小構成のChromeアドオンと同じように追加できます。上を参照してください。

2.2.7 動作について

私のブログhttps://blog.123abcsoft.com/ をアドオンインストール後に訪問すると、ポップアップが出て、デベロッパーツールのConsoleにも表示がで出ます。

2.3 テスト02 テスト01にアイコンを追加

2.3.1 この操作を行っている動画

動画はまだ作成していないので、作成したら追加します

2.3.2 manifest.json

chromeアドオンの設定関係を記述するファイル。
最小構成だと、これだけになる。
https://developer.chrome.com/extensions/examples/tutorials/get_started/manifest.json を修正したもの
全体を{}でくるむ
keyとvalueを　: で区切る
ここでは、name, version, manifest_version, descriptionを記述しています。

{
  "name" : "helloworld",
  "version" : "0.0.2",
  "manifest_version" : 2,
  "description" : "Hello World Chrome Extension",
  "content_scripts" : [{
    "matches" : ["https://blog.123abcsoft.com/*"],
    "js" : [
      "helloworld.js"
    ]
  }],
  "icons" : {
    "128" : "images/fractal128.png"
  }
}

2.3.3 helloworld.js

テスト01のhelloworld.jsと同じ

2.3.4 fractal128.png

128×128のpngファイルであれば何でもOK
私はImageMagickの convert コマンドで生成しました。生成コマンドは以下のとおり

convert -size 128x128  plasma:fractal fractal128.png

2.3.5 ファイル階層

chrome_addon₀₀₂_add_icon/ フォルダに入れてます。

chrome_addon_002_add_icon/
└── js
    ├── helloworld.js
    ├── images
    │   └── fractal128.png
    └── manifest.json

2 directories, 3 files

2.4 テスト03 テスト02を、表示文字をstorageの変数からもってくるように改造

2.4.1 この操作を行っている動画

動画はまだ作成していないので、作成したら追加します

2.4.2 manifest.json

chromeアドオンの設定関係を記述するファイル。
前のテスト02から permissions(storage関連)、background追加
permissionsの設定で、storageへのアクセスを許可して、表示する文字列を保存してます。
background.jsがパッケージインストール時に実行されるように設定

{
  "name" : "helloworld",
  "version" : "0.0.3",
  "manifest_version" : 2,
  "description" : "Hello World Chrome Extension",
  "permissions": ["storage"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts" : [{
    "matches" : ["https://blog.123abcsoft.com/*"],
    "js" : [
      "helloworld.js"
    ]
  }],
  "icons" : {
    "128" : "images/fractal128.png"
  }
}

2.4.3 background.js

今回追加
変数に表示する文字列を初期設定してます。
chrome.runtime.onInstalled.addListener(function() { … }) で　… がアドオンインストール時に実行されるようにイベント登録
chrome.storage.sync.set({helloworldtext : ‘Hello World!’}, function() { … }); で　storage の　helloworldtext の変数セット
chrome.storage.sync.get(‘helloworldtext’ , function(data) { … }); で　storage の　helloworldtext の変数をゲット。data.helloworldtext でその値にアクセス。

chrome.runtime.onInstalled.addListener(function() {
  chrome.storage.sync.set({helloworldtext : 'Hello World!'}, function() {
    chrome.storage.sync.get('helloworldtext', function(data) {
      console.log("storage variale helloworldtext is '"+data.helloworldtext+"'");
    });
  });
});

2.4.4 helloworld.js

storageにいれてある変数を利用して表示するように改造
chrome.storage.sync.get(‘helloworldtext’ , function(data) { … }); で　storage の　helloworldtext の変数をゲット。data.helloworldtext でその値にアクセス。

chrome.storage.sync.get('helloworldtext', function(data) {
  console.log(data.helloworldtext);
  alert(data.helloworldtext);
});

2.4.5 fractal128.png

テスト02と同じものを利用しました。
私はImageMagickの convert コマンドで生成しました。生成コマンドは以下のとおり

convert -size 128x128  plasma:fractal fractal128.png

2.4.6 ファイル階層

chrome_addon₀₀₃_add_backgroud.js/ フォルダに入れてます。

chrome_addon_003_add_backgroud.js/
└── js
    ├── background.js
    ├── helloworld.js
    ├── images
    │   └── fractal128.png
    └── manifest.json

2 directories, 4 files

2.5 テスト04 テスト03をoption設定可能に

2.5.1 この操作を行っている動画

動画はまだ作成していないので、作成したら追加します

2.5.2 manifest.json

chromeアドオンの設定関係を記述するファイル。
前のテスト03にoptions_page追加

{
  "name" : "helloworld",
  "version" : "0.0.4",
  "manifest_version" : 2,
  "description" : "Hello World Chrome Extension",
  "permissions": ["storage"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts" : [{
    "matches" : ["https://blog.123abcsoft.com/*"],
    "js" : [
      "helloworld.js"
    ]
  }],
  "options_page": "options.html",
  "icons" : {
    "128" : "images/fractal128.png"
  }
}

2.5.3 options.html

オプション設定画面

<!DOCTYPE html>
<html>
  <head>
    <style>
    </style>
  </head>
  <body>
    <script src="./jquery-3.4.1.min.js"></script>
    <div id="textInput">
      <input id="mytext"></input>
    </div>
    <div>
      <p>text for log and alart</p>
    </div>
  </body>
  <script src="options.js"></script>
</html>

2.5.4 options.js

input#mytext の内容が変化したらその値をstorageにセット
options.htmlを開いたら、input#mytext に現在のstorageの値をセットして表示

$('#mytext').change(function() {
  chrome.storage.sync.set({helloworldtext : $(this).val()}, function(data) {
    chrome.storage.sync.get('helloworldtext', function(data) {
      console.log("storage variale helloworldtext is '"+data.helloworldtext+"'");
    });
  });
});
chrome.storage.sync.get('helloworldtext', function(data) {
  console.log(data.helloworldtext);
  $('#mytext').val(data.helloworldtext);
});

2.5.5 jquery-3.4.1.min.js

https://code.jquery.com/jquery-3.4.1.min.js からダウンロード

2.5.6 background.js

テスト03と同じ

2.5.7 helloworld.js

テスト03と同じ

2.5.8 fractal128.png

テスト03と同じ

2.5.9 ファイル階層

chrome_addon₀₀₄_add_options/ フォルダに入れてます。

chrome_addon_004_add_options/
└── js
    ├── background.js
    ├── helloworld.js
    ├── images
    │   └── fractal128.png
    ├── jquery-3.4.1.min.js
    ├── manifest.json
    ├── options.html
    └── options.js

2 directories, 7 files

3 続きを追記してきます。

著者: NM Max

Created: 2019-06-28 金 12:51

Validate

2019年6月18日2019年10月25日

Google Chrome用のアドオン作ってみました。

非常に簡単なgoogleアドオン作ってみました。

動画とブログに文書あげます。ちかいうちに

2019年6月17日2019年10月25日

JavaScript、JQueryの導入動画もついでに作った

タイトルと、文字列で対戦相手の方のユーザー名がはいってしまってるのを、デベロッパーツールのインスペクタと、コンソールからのコマンド入力で変更している動画になってます。

以下が動画で実行した時のコマンドや、それに対するレスポンス

document.title
"将棋ウォーズ棋譜(XXXXX 1級対NM_Max_game29級)"
document.title="将棋ウォーズ棋譜(OOOOOOO 1級対NM_Max_game29級)"
"将棋ウォーズ棋譜(OOOOOOO 1級対NM_Max_game29級)"
$('#area_sente > a').text()
"XXXXXXX1級"
$('#area_sente > a').text("JJJJJJJJJ 1級")
init [a, prevObject: init(1), context: document, selector: "#area_sente > a"]
$('#area_sente > a').text("ZZZZZZZZZ 1級")
init [a, prevObject: init(1), context: document, selector: "#area_sente > a"]

2019年6月17日2019年6月17日

将棋ウォーズでID変更後初敗戦の動画をアップロードしました。

相手が１級で実力差がありすぎました！

でも最後まで頑張ったよ！

2019年6月17日2019年6月25日

emacs org 概要

emacs org の紹介

1 emacs org

公式サイト: https://orgmode.org/ja/
Manual: https://orgmode.org/org.html
The compact Org-mode Guide: https://orgmode.org/guide/
The compact Org-mode Guide: https://orgmode.org/worg/org-tutorials/
API Documentation: https://cesiumjs.org/refdoc/

2 特徴

簡単な書式に従って文書を作成すると、色々な形式で出力可能（私はHTML生成に良くorgを利用してます。）
色々な外部プログラムを実行させて、その結果を埋め込む事が可能。（グラフとか計算結果とか）
数式処理ソフトや統計が得意なR言語とも連携が簡単にできます。

3 続きを追記してきます。

著者: NM Max

Created: 2019-06-17 月 07:41

Validate

2019年6月17日2019年6月25日

Cesium JSの始め方

CesiumJSの始め方

1 CesiumJS

公式サイト: https://cesiumjs.org/
Demos: https://cesiumjs.org/demos/
文書: https://cesium.com/docs/
Getting Started: https://cesium.com/docs/tutorials/getting-started/
API Documentation: https://cesiumjs.org/refdoc/
Code Examples: https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/
Troubleshooting: https://cesiumjs.org/troubleshooting/

2 はじめの一歩

お勧めは Getting Startedからが良いと思います。
本家のgetting startと異なる部分
- 日本語モードにした
- ionに登録してなくても表示(keyの部分をコメントアウト)
- sytleをサイズ指定から、100%表示に
このファイルを適当な名前をつけて、httpサーバーで公開して、ブラウザでアクセス

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <script src="https://cesiumjs.org/releases/1.58/Build/Cesium/Cesium.js"></script>
  <link href="https://cesiumjs.org/releases/1.58/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer" style="width: 100%; height: 100%"></div>
  <script>
    <!-- Cesium.Ion.defaultAccessToken = 'your_access_token'; -->
    var viewer = new Cesium.Viewer('cesiumContainer');
  </script>
</body>
</html>

2.1 サーバーをrubyでやると楽かも

ruby -rwebrick -e 'WEBrick::HTTPServer.new(:DocumentRoot => "./", :Port => 8000).start'

3 ボタンを設置し、ボタンを押すと東京にカメラをflytoする

3.1 まずはブラウザでコマンドの確認

まず東京の上空までマウスなどの操作でもっていきます。
デベロッパーツールのconsoleで以下を入力すると現在位置を経度、緯度、高度で取得できます。

viewer.camera.positionCartographic

緯度経度がradianで表示されました

{longitude: 2.4438235206124967, latitude: 0.6225373613176627, height: 137921.4350234892}

Homeでflytoさせてみましょう。以下をブラウザのデベロッパーツールのConsoleに入力します。

viewer.camera.flyHome();

次に東京までflytoさせてみましょう。以下をブラウザのデベロッパーツールのConsoleに入力します。

viewer.camera.flyTo({destination : Cesium.Cartesian3.fromRadians(2.4438235206124967, 0.6225373613176627, 150000.0)})

3.2 確認した命令をボタン押したら実行するようにしてみましょう

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <script src="https://cesiumjs.org/releases/1.58/Build/Cesium/Cesium.js"></script>
  <link href="https://cesiumjs.org/releases/1.58/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer" style="width: 100%; height: 100%"></div>
  <script>
    <!-- Cesium.Ion.defaultAccessToken = 'your_access_token'; -->
    var viewer = new Cesium.Viewer('cesiumContainer');
  </script>
  <script>
    var flyto_tokyo=function() {
      viewer.camera.flyTo({destination : Cesium.Cartesian3.fromRadians(2.4438235206124967, 0.6225373613176627, 150000.0)})
    }
  </script>
  <button id="flyto_tokyo" onclick="flyto_tokyo()">東京へflyto</button>
</body>
</html>

3.3 また追記していきます。

著者: NM Max

Created: 2019-06-17 月 07:34

Validate

2019年6月13日2019年6月13日

今回の副業でGooglemap関連も使ってみる機会がありました。

Googlemap APIで、距離とか時間とか、経路の決め方のオプション与えてJavaScriptで組みました。

keyが必要になってしまうので、このブログで公開はできないんだけど、ライセンスのとり方で過大な請求来ない方法で公開できそうだったら、公開しちゃうかも

https://developers.google.com/maps/documentation/directions/start

にやり方書いてあります。オプションの与え方とか

ネット検索でソースコードと比較しながら、つかってみるとGoogle様の設計が良いので非常に使いやすいライブラリとなっていました。

色々な経路を計算するたびに費用がかかってくるケースもあるので、一度計算したルートを保存しとこうとしたんだけど、大阪駅と東京駅の経路だいたい5M弱もあって断念しました。

距離
時間
経路
スタート地点、目標地点の緯度経度、住所

などを帰ってきた、情報から比較的簡単に抜き出すことが可能でした。

本当に使いやすいライブラリで、見た目も美しく、またGooglemapを使う案件やりたいな

2019年6月13日2019年6月13日

3Dマウス関係の副業もしたので、3Dマウス関係の記事とか、動画もつくってみたい。

3Dマウス副業の関係で購入しました。初めて使うので操作方法最初はわかりませんでした。

3DConnectionの　SpaceMouse Compact　っていうやつです。

https://www.3dconnexion.jp/spacemouse_compact/jp/

６軸＋２ボタンとして、Chromeで反応するので、イベント毎に処理を書いてやる感じで、Chrome用のJavaScript作れました。

良い値段するのと、デバイスドライバを入れないといけないなど、不便な面もあって、どこまで普及するのかわからないけど。

値段と機能を考えると、勝者にならない気がする。２万弱もしました。

2019年6月13日2019年6月13日

CesiumJS関係の動画とか記事書くかも

CesiumJSっていう素晴らしいソフトがあって、美しい地球儀みたいなもの

https://cesiumjs.org/

こんな感じでグリグリできて美しい。今回の仕事の知識でブログへの埋め込みにも成功しました。

やってみたら上手くいった！

宇宙旅行も可能みたいで、月とか太陽も訪問可能で、自分のデータも入れてカスタマイズ出来るみたいです。やり方まだわかってないけど、そこら。

https://cesium.com/docs/tutorials/getting-started/#your-first-app

を読んでもらえば、やり方わかると思います。

素晴らしいですね、数行でこんなのを埋め込んだページつくれちゃうって、本当にすごい！

カメラ操作も非常に簡単にできて、地球を色々なところ飛びまわるとか、WindowsのChromeならGamepad APIに対応していて、Gamepad で操作をカスタマイズも可能。

当然マウスやキーボード操作に対する反応もカスタマイズ可能です。

フライトの記録とかがあれば、それを再現も比較的低い難易度で出来るソフトです。

本当に素晴らしいソフト。

Chrome addon を作ってみようぜ！

目次

1 関連サイト

2 サンプル

2.1 テスト00 最小構成、スクリプト無しタイプ

2.1.1 この操作を行っている動画

2.1.2 manifest.json

2.1.3 ファイル階層

2.1.4 作成したChromeアドオンをChromeにインストールする方法

2.2 テスト01 指定のサイト(私のブログhttps://blog.123abcsoft.com/)を開くとログが出力されて、ポップアップウインドウが表示される

2.2.1 この操作を行っている動画

2.2.2 manifest.json

2.2.3 helloworld.js

2.2.4 ファイル階層

2.2.5 ファイル階層

2.2.6 作成したChromeアドオンをChromeにインストールする方法

2.2.7 動作について

2.3 テスト02 テスト01にアイコンを追加

2.3.1 この操作を行っている動画

2.3.2 manifest.json

2.3.3 helloworld.js

2.3.4 fractal128.png

2.3.5 ファイル階層

2.4 テスト03 テスト02を、表示文字をstorageの変数からもってくるように改造

2.4.1 この操作を行っている動画

2.4.2 manifest.json

2.4.3 background.js

2.4.4 helloworld.js

2.4.5 fractal128.png

2.4.6 ファイル階層

2.5 テスト04 テスト03をoption設定可能に

2.5.1 この操作を行っている動画

2.5.2 manifest.json

2.5.3 options.html

2.5.4 options.js

2.5.5 jquery-3.4.1.min.js

2.5.6 background.js

2.5.7 helloworld.js

2.5.8 fractal128.png

2.5.9 ファイル階層

3 続きを追記してきます。

emacs org の紹介

目次

1 emacs org

2 特徴

3 続きを追記してきます。

CesiumJSの始め方

目次

1 CesiumJS

2 はじめの一歩

2.1 サーバーをrubyでやると楽かも

3 ボタンを設置し、ボタンを押すと東京にカメラをflytoする

3.1 まずはブラウザでコマンドの確認

3.2 確認した命令をボタン押したら実行するようにしてみましょう

3.3 また追記していきます。