OmniAICreator/Qiita-1.07M huggingface dataset:
markdown コンテンツを javascriptで表示する

Qiita初投稿です。
これまで、ちまちまとhtmlべた書きのホームページを公開していたのですが書くのが面倒になってきて、markdownを直接表示できるようにしてみました。

こんな感じです。
![markdown-view.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602379/142dc509-3a78-854a-7b5d-cdeccd78304e.png)

```markdown:markdownで書いたもの
# WebブラウザのレンダリングとAngular の change detection
WebフレームワークとHTML 描画の仕組みの関係を研究する。

## react.js と仮想DOM
### 仮想DOM
- [仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう](https://employment.en-japan.com/engineerhub/entry/2020/02/18/103000)
- [ブラウザの仕組み: 最新ウェブブラウザの内部構造](https://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/)

```



## ソースコード
jquery + marked.js でできました。

```html:html
<!DOCTYPE html>
<html lang="ja">
    <head>
       <meta charset="UTF-8">
       <link href="../../lib/marked/0.3.5/markdown7.css" rel="stylesheet"></link>
   </head>
    <body>
        <div id="container">
        </div>
        <script src="../../lib/jquery/3.0.0-alpha1/jquery.min.js"></script>
        <script src="../../lib/marked/0.3.5/marked.min.js"></script>
        <script src="../../script/showmarkdown.js"></script>
    </body>
</html>
```

```javascript:showmarkdown.js
function loadFile(fileName, callback){
    httpObj = new XMLHttpRequest();
    httpObj.open('GET', fileName+"?"+(new Date()).getTime(),true);
    // ?以降はキャッシュされたファイルではなく、毎回読み込むためのもの
    httpObj.send(null);
    httpObj.onreadystatechange = function(){
       if ( (httpObj.readyState == 4) && (httpObj.status == 200) ){
           callback(httpObj.responseText);
       }
    }
 }
 
 var list = [];
 loadFile('tech_study_of_web_framework.md', function(resultText) {
     var md = marked(resultText);
     $("#container").append(md);
 });
```

### サーバ上のファイルの読み込み

httpObjで読み込みます。
ちなみにこのコードではローカルのファイルはCORSに阻まれて読めないため、サーバにアップロードしないと動作確認できません。

```javascript
function loadFile(fileName, callback){
   httpObj = new XMLHttpRequest();
   httpObj.open('GET', fileName+"?"+(new Date()).getTime(),true);
   // ?以降はキャッシュされたファイルではなく、毎回読み込むためのもの
   httpObj.send(null);
   httpObj.onreadystatechange = function(){
      if ( (httpObj.readyState == 4) && (httpObj.status == 200) ){
          callback(httpObj.responseText);
      }
   }
}
```


### markdown を表示

先ほどの `loadfile` を呼び出したものを marked に渡して表示してあげます。callbackになります。

```javascript
var list = [];
loadFile('tech_study_of_web_framework.md', function(resultText) {
    var md = marked(resultText);
    $("#container").append(md);
});
```

これで、markdownで編集するだけで素敵に整形されて表示されるようになりました。
Android端末でLinuxコマンドを使う

##はじめに
スマホを弄ってて、ふと、スマホでLinuxコマンド使えたらなぁ〜っと思って調べてみたら、
あったんですよ…Linuxコマンドが使える便利なアプリが…
「Termux」というアプリで無料でPlayストアにて配信されてます。

おなじみのaptコマンドでパッケージ管理も出来ます。

###使ってみる
今回は試しにapache2を入れてhtmlファイルを作り、ブラウザで「はろーわーるど」を表示してみる。
![Screenshot_20200313-212241.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/584794/6ef18957-f72e-bfd9-134f-6598e7049f58.jpeg)

とりあえずいつもの

```
apt update
apt upgrade
```
で、apache2を入れる。ついでにvimも

```
apt install apache2
apt install vim
```
で、htmlファイルを作るディレクトリは
`/data/data/com.termux/files/usr/shere/apache2/default-site/htdocs/`
ファイル名はindex.htmlにでもしておいて、こんな感じに書いてみる。

![Screenshot_20200313-220505.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/584794/6599d1c4-9b70-86d2-0ad6-a6e741a74523.jpeg)

そしてブラウザで`http://localhost:8080/index.html`と検索してみたら
![Screenshot_20200313-221044.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/584794/e41b2d3a-be99-6819-21dd-96835e183015.jpeg)

表示出来た。

###まとめ
Termuxすごい(小並感)
SSH接続も可能なので割となんでもできちゃう？
Bluetoothのキーボードが欲しくなる…
【Rails】 5分でApexChart.jsを導入する方法

# はじめに
Apexchart を Rails に導入してみたのですが、かなり使いやすいわりに日本語記事がなく浸透していないと感じたため普及活動として広めていけたらいいなと思います。

<img width="400" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308256/d548a520-f8a4-4b3f-72b2-979eb0110906.png">

# ApexChart.js とは
グラフ描画のライブラリです。同じようなライブラリの１つにchart.jsなどがあります。

* https://apexcharts.com/javascript-chart-demos/

## コマンド

```terminal
// Rails アプリケーション作成
$ rails _5.2.4_ new five_min_apexchart
$ cd five_min_apexchart

// scaffold で Event モデルを作成
$ rails g scaffold chart
$ rails db:migrate RAILS_ENV=development
```

## GemFile

```ruby:GemFile
# 今回紹介する apexchart の gem
gem 'apexcharts'
# apexchart とは直接関係はないが、Ruby -> Javascript にデータを渡すときにとても便利な gem
gem 'gon'
```

```terminal
$ bundle install
```

## Javascript
以下を追記。

```javascript:app/assets/javascripts/application.js
//= require apexcharts
```


## View に apexchart を描画する方法

apexchart を Rails に適用する方法は2つあります。
用途にあったものを使ってみてください。

* View に直接書き込む方法(反映する方法１)
* Javascript にて描画する方法(反映する方法2)

### View に直接書き込む方法(反映する方法１)

HTML上にデータを渡すと読み込んで、グラフを描画してくれます。
今回は参考までに円グラフを描画しましたが、他にも棒グラフ、散布図など、たくさんありますのでドキュメントを確認してみてください。
※index.html.erbに描画したのも参考までですので、お好きなところに描画させてください。

```erb:app/view/charts/index.html.erb
<%= pie_chart([
  {name: "Series A", data: 25},
  {name: "Series B", data: 100},
  {name: "Series C", data: 200},
  {name: "Series D", data: 125}
], legend: "left") %>
```

### Javascript にて描画する方法(反映する方法2)

HTMLにidをつけたdiv要素を用意します。

```erb:app/view/charts/index.html.erb
<div id='chart'></div>
```

Javascript にデータを渡し、どのidに描画するかを指定する。
options にて細かい条件を指定するとかなりリッチなグラフを描画してくれます。

```javascript:app/assets/javascripts/application.js
var options = {
  chart: {
    type: 'pie'
  },
  series: [25, 100, 200, 125],
  labels: ['Series A', 'Series B', 'Series C', 'Series D'],
  legend: {
    position: 'left'
  }
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()
```


* apexchart (pie chart のドキュメント)
    * https://apexcharts.com/javascript-chart-demos/pie-charts/simple-pie-chart/

# まとめ

View に apexchart を描画する方法として2つの方法を載せましたが、個人的には下記のように使い分けをしています。
gon という gem もありますので、 Ruby -> Javascript にデータを渡すのにほとんど苦労しないので、反映する方法2を使うことをお勧めします。

* View に直接書き込む方法(反映する方法１)
    * プロトタイプを作る時など、短時間で作成したい場合。
* Javascript にて描画する方法(反映する方法2)
    * 細かな仕様などを決めて時間をかけて作り込みたい場合。



# 参考
* ApexCharts (Github)
    * https://github.com/apexcharts
* apexcharts.rb (Github)
    * https://github.com/styd/apexcharts.rb

---
### 会社紹介

**株式会社 Mosaica**  
最先端テクノロジーで社会課題を解決し、持続可能な未来を創造する IT カンパニー。
AI ソリューション、クラウド統合、DX 推進、経営コンサルティングなど包括的なサービスでビジネス変革を支援しています。  

詳しくは [公式サイト](https://mosaica.co.jp/) までお気軽にご相談ください。
公式サイト： https://mosaica.co.jp/
この機能は不明な 'ms-vscode.csharp' 拡張機能に依存しています。 を解決する

## この問題の原因
- VSCodeの拡張機能のC#のアップデートでpublisherが変更された
- C#に依存する拡張機能で、この変更にまだ対応していないもので問題が発生(参照先が古い)
- (Debugger for Unityとかで起こってる問題。アプデあんまされてない拡張機能なこともあり)

## 解決法
解決法は2つある。C#に依存する拡張機能をいじって参照先を新しくするか、C#の古いバージョンを持ってくるかである。
あんまりアップデートされない拡張機能なら前者の方法が良いと思う。

### C#に依存する拡張機能をいじる方法
1. [VSCodeのMarketPlace](https://marketplace.visualstudio.com/vscode)でエラーの出る拡張機能のページへ
2. 右のほうの「Resources」欄に「Download Extension」があるのでクリックしてダウンロード。
3. 「(拡張機能名).vsix」または「Microsoft.VisualStudio.Services.vsix」がダウンロードされる。
4. これの拡張子を「.zip」にして解凍する。(7-zipとかのアーカイバで拡張子そのまま解凍できるが)
5. 解凍されたフォルダをVSCodeで開く。
6. VSCodeの検索機能で「ms-vscode.csharp」を「ms-dotnettools.csharp」に置き換え。
7. 保存して再び圧縮。拡張子を元に戻す**(フォルダ自体を圧縮して二重にならないように注意)**
8. VSCodeの拡張機能で右上の「…」ボタンからメニューを開いて「VSIXからのインストール」

(インストールするときに「zip ファイルの中に extension/package.json が見つかりません。」というエラーが出るときはフォルダ自体を圧縮して二重になっている。「extension」フォルダがある階層で圧縮する。)

### C#の古いバージョンを持ってくる方法
1. [ここから古いバージョンのC#のVSIXファイルをダウンロード](https://marketplace.visualstudio.com/_apis/public/gallery/publishers/ms-dotnettools/vsextensions/csharp/1.21.12/vspackage)(VSCodeのMarketPlace公式です)
2. VSCodeの拡張機能で右上の「…」ボタンからメニューを開いて「VSIXからのインストール」

(これはVSCodeのMarketPlaceでDownload ExtensionをクリックしたときにリクエストされるURLをpublisherが変更される前のバージョンのものに一部変更しただけ)


## 個人的感想
そもそもVSIXというパッケージなのを知らなかった。というかこれアーカイブファイルくさいなとおもって試しにzipにしてみたらうまくいってビビった。(最初バイナリレベルで参照先書き換えようとしてたけど)
ググってばっかいないで自分で試すのも大事だったという話。(ググっても出ないものは出ない)


…自分向けメモのまま散文ですいません
ファイルやフォルダのパーミッションやアクセス権限を設定する「chmod」コマンド（設定値編）

#はじめに
前回「[ファイルやフォルダのパーミッションやアクセス権限を設定する「chmod」コマンド](https://qiita.com/yukachin0414/items/bc73b9ecef36d0269db6)」でchmodコマンドについて学びました。
そのときは「すべてのユーザーに実行権限を与える」の権限付与を「$chmod a+x (ファイル名) 」とやりましたが、今回別のコマンドで権限付与する方法を学んでいきます。

#chmodを設定値で表現する
設定値は所有者、グループ、その他の順にそれぞれ０から7の整数で表わされます。
それぞれの数字は、以下の設定値を加算して求めます。
（2進法での表現となります。）
読み込みができる＝4
書き込み、変更ができる＝２
実行ができる＝１

#ファイルの権限の変更してみよう
※今回はもともと「所有者の権限=読み込み書き込み実行ができる、グループの権限=読み込みができる、その他のユーザーの権限=読み込みができる」の「711」であった前提で話を進めます。

**・その他のユーザーの読み込み権限を削除する**

```command:command
$chmod 710 (ファイル名) 

```

**・すべてのユーザーに読み込み書き込み実行権限を与える**

```command:command
$chmod 777 (ファイル名) 

```

##おわりに
chmodについてはここまで学べばひとまずは十分かなと思います。
ionicアプリケーションに広告、解析プラグインを入れる

ionicでアプリ開発を初めて行った際に、Google関連のプラグインを入れるのに手間取ったため、備忘録として残しておく

コードの実装部分に関してはマニュアルと同じなので割愛

#分析系（Android）
ブラウザアプリ用にGoogleAnalytics、スマホアプリ用にFirebaseをインストールする

```
ionic cordova plugin add cordova-plugin-firebase-analytics
npm install @ionic-native/firebase-analytics

ionic cordova plugin add cordova-plugin-google-analytics
npm install @ionic-native/google-analytics
```

この段階で、firebaseがコンフリクトを起こしていたので、以下のプラグインをインストール

```
cordova plugin add cordova-android-play-services-gradle-release  --variable PLAY_SERVICES_VERSION=+
cordova plugin add cordova-android-firebase-gradle-release  --variable FIREBASE_VERSION=+
cordova plugin add cordova-android-support-gradle-release --variable FIREBASE_VERSION=+
```

現在はAndroidXのプラグインも必要な仕様となっているため、以下プラグインを追加

```
ionic cordova plugin add cordova-plugin-androidx
ionic cordova plugin add cordova-plugin-androidx-adapter
```
ここまでで、GoogleAnalyticsもFirebaseAnalyticsも動作していることを確認

#広告(Android)

マニュアル通りに以下のコマンドを実行

```
ionic cordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID="ADMOB_APP_ID"
npm install @ionic-native/admob-free
```

しかし、これを行うとアプリが起動時にすぐクラッシュしてしまった。
Android StudioでAndroidManifest.xmlを確認したところ、""ADMOB_APP_ID""となっていた。

つまり、上記コマンドはダブルクォートをつけてはダメだったので、プラグインを取り除いた後、再度以下のコマンドを実行

```
ionic cordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID=ADMOB_APP_ID
npm install @ionic-native/admob-free
```

これで問題なく広告が表示された。

#IOS

ビルド時にエラーが発生しており、cocoapodsが必要とされていたので、インストール

```
npm install -g ios-deploy
gem install cocoapods
pod repo update
```

次に、config.xmlファイルを編集

```
<platform name="ios">
        <resource-file src="GoogleService-Info.plist" />
        <edit-config file="*-Info.plist" mode="merge" target="GADIsAdManagerApp">
            <true />
        </edit-config>
        <edit-config file="*-Info.plist" mode="merge" target="GADApplicationIdentifier">
            <string>ADMOB_APP_ID</string>
        </edit-config>
```

ここまで行うことで、無事に分析プラグイン、広告プラグインが動作するようになった。
なかなかマニュアルには載ってないものも多く、Githubアカウントを見に行ったり、StackOverflowを見回ったりなど、OSSを使うにあたっては英語を活用とした検索スキルが必要であることを痛感した。
Webpackでフォルダ内の一括requireを行っていたら

Webpackで使うJavaScriptを全列挙するのが面倒になって、一括して読み込む方法をとっていたのですが、それに伴う代償もあることに気づいてきました。

## これまでの経過

実は、以前にもこの「一括読み込み」をテーマにした記事を2本ほど書いています。

* [Webpackでフォルダ内の全ファイルを一気にrequireする](https://qiita.com/jkr_2255/items/d23e66323857d3189a00) - `require.context`を用いた手法
* [Webpackでの一括読み込み（その2）](https://qiita.com/jkr_2255/items/e4165756fadbaba30bca) - `import-glob-loader`を使った手法

自分自身、一括読み込みを便利に使っていたのですが、いくつか問題が発生してきました。

## `require`という足かせ

もともとJavaScriptにモジュール化の仕組みはなく、Node.jsとともにCommonJSが普及していたのですが、ES6ではネイティブのモジュール（`import`/`export`）が導入されました。そして次第にJavaScriptの周辺ツールも、RollupなどES Moduleに対してネイティブに動くものが増えていっています。

WebpackでもES Moduleを直接処理できるのですが、個人的に衝撃だったのが`ModuleConcatenationPlugin`でした（[過去記事](https://qiita.com/jkr_2255/items/83de78d8bf621d9fb03e)）。可能な限りモジュールをフラットに開いてTree Shakingなどが行えるということで、モジュール化が文法要素であるがゆえの強力さを体感したわけです。

一方で、`require()`は（JavaScriptの文法で言えば）単なる関数であって、どこにでも書けます。そのため、`ModuleConcatenationPlugin`も`require()`で呼んだ先についてはモジュールを切り出す、という形で対応することとなります。結果、`require.context`で呼び出したものは、Tree Shakingなどが無効となってしまうのです。

ということで、`require.context`を使い続けるのはやめて、指定されたフォルダ以下について`import`を生成するようなローダーを手で書いて対応していたりしました。

## リロードで払わされる負債

ところが、今度は「よく吟味せずに、全部を一括読込できる」という発想そのものがデメリットとなる事態に見舞われました。

Webpackの開発サーバには「Hot Module Replacement」といって、JavaScriptが更新された場合に、可能であれば一部だけコードを入れ替えて、リロードなしに反映させる仕組みがあります。これを実行するには、入れ替え可能なモジュールで`module.hot.accept()`のように宣言する必要があります。

あるモジュールAで`module.hot.accept()`を適用していて、モジュールBがモジュールAからしか使われていない場合、モジュールBを更新した影響はモジュールAの入れ替えで終わる、ということになります。

…が、全部一気に読み込んでいると、モジュールBの更新は「全部読み込んだバンドル」の更新に相当することになり、結果ブラウザのフルリロードに至ってしまいます。もちろん「マウントなど、`accept`するところだけを一括読み込みの対象にする」など工夫すれば対応は可能なのですが、何も考えずに全部読み込むというサボりのツケを一気に払わされた、そんな印象です。
AtCoder 茶色の壁

# はじめに
なんとか茶色になりました。
もっと精進したいと思っております。

# 最近の傾向
<img width="680" alt="20200313A.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538241/3546fac6-b319-1802-d12e-04e3315acb7d.png">
~~頭打ち~~ 安定して茶パフォが出せるようになりました。
これを、*[AtCoder Problems](https://kenkoooo.com/atcoder/#/table/)* で確認しますと、
<img width="670" alt="20200313B.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538241/588f6c01-1464-c862-1d2c-45965e6458ae.png">
丁度、茶色は解けるけれども、次は解けないことが分かりました。
時間を確認しますと、
<img width="560" alt="20200313C.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538241/73b4f36b-68fe-5337-5f5b-2a6a948cd84b.png">
C通過時点で1時間ほど余している状態です。

# まとめ
今後の目標として、

+ もう一問ACさせる
+ その為に *AtCoder Problems* の緑色を復習する
+ 特に苦手のグラフ問題に取り組む

**Perl** で申しますと、ワンライナーの解答例を参考にできないものかと思っています。
ワンライナーを自動で平文に変換するようなモジュールがありましたらご教示のほどよろしくお願いいたします。
getElementByIdとgetElementByClassNameの違い

どうも、Shota(@Mii4a_Shota )です。
自作Webアプリの開発中、id取得と同じようにgetElementByClassNameを用いて作成した変数に処理を加えようとした際、

**Uncaught TypeError: document.getElementByClassName is not a function**

といったエラーが出てきてしまったので、`getElementById`と`getElementByClassName`では出力に違いがあることに気が付けたので、調べたことを書き記しておこうと思います。


`getElementById`の返り値</h3>
------

```javascript:
<p id="hoge">hoge</p>

var hoge = document.getElementById('hoge');
console.log(hoge); // =>　<p id="hoge">hoge</p>
```
このように、`getElementById`は引数に合致するidを持つタグと属性、タグに囲まれたテキストを返します。

`getElementByClassName`の返り値</h3>
---

```javascript:
<p class="hoge">hoge</p>
<p class="hoge">hoge</p>
<p class="hoge">hoge</p>

var hoge = document.getElementByClassName('hoge');
console.log(hoge);
// => HTMLCollection [ p.hoge, p.hoge, p.hoge ]
```

このように、`getElementByClassName`は`HTMLCollection`という配列風のオブジェクトを返します。**配列風**といっても実際の配列のように、添字での取得やfor構文で用いることができるようです。

詳しくはMDNをご参照ください
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName

最後に</h3>
---
両者の処理方法について、同様の処理をすると勘違いをしていたので気が付けてよかったです。
ご覧いただきありがとうございました。
AWS運用課題解決メモ


#EC2からRDS(SQLserverExpress)に接続できない
##原因はセキュリティグループでポートが開放できていなかったから。
EC2とRDS(SQLserverExpress)を同じセキュリティグループに変更し、SQLserverのポートを開放することで解決。下記サイトを参考にさせて頂きました。
https://hacknote.jp/archives/39927/

#RDS(SQLserverExpress)に作成したDBが削除できない
RDS(SQLserverExpress)ではオンプレのようにsysdba権限が付与できないようで、作成したDB自体の削除ができませんでした。下記の権限を付与することでDB削除可能になったのでメモ。
####権限の変更でDBも削除可能に
サーバのプロパティ - 権限 - サーバーロールの変更 に「許可」のチェックを入れるとDBも削除可能となった。
![2020-03-06_19h23_49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359386/ca7fb874-05b6-0182-a385-a92061da1307.png)


#sqlcmd(Oracleで言うところのsqlplus)が使えない
####原因はSSMSインストール時に、sqlcmdユーティリティがインストールされないよう仕様が変わっていたから。こちらのサイトを参考に、sqlcmdユーティリティをインストールし、使用できる状態となりました。
https://gawatari.com/sqlcmd-ssms/

#定期的にDBのフルバックアップを取りたい
####下記のバッチをEC2からキックしてS3にバックアップできることも確認済み。
####※事前にIAMユーザーに権限が付与されていることが必要
DB_BACKUP_ALL_RDS.bat

```bat
echo off

rem **********************
rem 初期化処理
rem **********************

SET COMPUTERNAME=エンドポイント名
SET UID=ユーザID
SET PASS=パスワード
SET DATABASE=データベース名
SET BASEDIR=%~dp0
SET LOG=%BASEDIR%log\DB_BACKUP_ALL_%date:~0,4%%date:~5,2%%date:~8,2%.log

sqlcmd -S %COMPUTERNAME% -U %UID% -P %PASS% -d %DATABASE% -Q "EXEC [dbo].[USP_DB_BACKUP_ALL];"

Rem SQL実行結果判定
IF %ERRORLEVEL% NEQ 0 GOTO ERROR

REM 正常終了
goto NORMAL

Rem **********************
Rem 正常終了
Rem **********************
:NORMAL
ECHO バッチを正常終了します >> %LOG%
ECHO 終了時刻：%DATE%%TIME% >> %LOG%
ECHO エラーコード：%ERRORLEVEL% >> %LOG%
ECHO ********************** >> %LOG%
EXIT /B

Rem **********************
Rem 異常終了
Rem **********************
:ERROR
ECHO バッチを異常終了します >> %LOG%
ECHO 終了時刻：%DATE%%TIME% >> %LOG%
ECHO エラーコード：%ERRORLEVEL% >> %LOG%
ECHO ********************** >> %LOG%
EXIT /B

echo on
```


#社内からRDSに接続できない(DirectConnect接続済み)
DirectConnectで社内とAWSを接続したが、社内からRDSに接続できない。
RDSのエンドポイントに対してtracertを行ってみると、グローバルIPでRDSに接続を行っており、セキュリティグループの設定で弾かれていることが判明。

####RDSのパブリックアクセスをOFFに変更してみる
RDSはエンドポイントの指定しかできない為、ローカルIPからRDSにアクセスする方法が不明であったが、RDSのパブリックアクセスをOFFに変更したところ、ローカルIPで接続するようになった。
内部の動作が不明だが、ローカルIPでエンドポイントに接続するにはRDSのパブリックアクセスがOFFになっている必要がある様子。

以上
Faild to install Visual Studio Code update.　VSCode更新失敗ログ解決法

![error1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505621/ee927434-4cd2-b355-abab-0ea4f25b0168.png)

VS Codeを閉じたとき、上のようなボックスが表示されるようになりました。
その原因/調査過程/解決方法をメモっておきます。

**忙しい方のための、結論　＝＞　「VSCodeを再インストールしてください」**

-----

####◆背景（原因）
・同デバイス内に２つ目のアカウントを作成し、そちらでVSCodeをしようしていた
・１つ目アカウントでインストールしていたものをそのまま流用していた

要は、"インストールした本人アカウント"でないのに使用していたことが問題だったようです。
使えたので使っていたのですが、やはり正攻法ではなかったみたいですね。

####◆調査
画像内下部に記載されているログをクリックして開いてみると、以下のような文が記載されていました。
※個人情報(?)保護のため、一部をNNNNに変更しています。

> Mar 13 21:42:14.858 INFO Starting: C:\Users\NNNN\AppData\Local\Programs\Microsoft VS Code\Code.exe, true
Mar 13 21:42:14.862 ERRO Bad arguments: Code path doesn't seem to exist: C:\Users\NNNN\AppData\Local\Programs\Microsoft VS Code\Code.exe

どうやら、Code.exeが見つからなかった模様。
覗きに行ってみると、確かに見当たりませんでした。

ちなみにこのCode.exe、インストーラーでVSCodeをインストールしている最中に、メーター上部に一瞬だけ名前が表示がされます。
一瞬だったので、スクショは取り損ねました...
インストールの際ぜひ見てみて下さい。


####◆解決

なんてことはない、インストールをするだけです。
調べていると、人によってはアンインストールしてから再インストールされている方もいらっしゃるようようです。
私の場合は、上書きするようにそのままインストールしたら解決しました。






分かればなんてことはないトラブルだったなと思いました(◦ˉ ˘ ˉ◦)
Gmailの本文から一部を抽出してスプレッドシートに書き出す

#はじめに
とある事情でGmailで受信しているメール本文から
一部を抽出してスプレッドシートに書き出したいということがあり
GoogleAppsScriptで対応した際の備忘録です。
#環境
Windows 10
#手順
- スプレッドシート開く
- ツール＞スクリプトエディタをクリック
- 以下スクリプトを記述

```javascript

function myFunction(){
  var mailQuery = 'from:(xxx@oooo.jp) 【hogehoge】';
  var threads = GmailApp.search(mailQuery);
  var messages = GmailApp.getMessagesForThreads(threads);
  var sheet = SpreadsheetApp.getActiveSheet();
  for(var i=0; i<messages.length; i++){
    var plainBody = messages[i][0].getPlainBody();
    sheet.appendRow([plainBody.match(/日付.*/)[0].replace('日付', ''), plainBody.match(/ID.*? /)[0].replace('ID', ''),])
  }
}
```
### 補足ポイント
- mailQueryで対象のメール条件を定義
- 本文内にある日付、IDを正規表現を使って抽出しています

#参考リンク
https://liginc.co.jp/418649
https://blog.8basetech.com/google-apps-script/gmail_extraction/

#さいごに
今回受信した対象メールが結構多く、時間に余裕もなかったこともあって
GoogleAppsScriptを使って抽出することにしました。
参考リンクの記事のおかげでGoogleAppsScriptを初めて使ったのですが、
小一時間で目的を果たすことができました。
技術書典応援祭で出てる本の言語別ヒット数

# 技術書典応援祭で出てる本の言語別ヒット数
2020/03/07 から１ヶ月、[技術書典応援祭](https://techbookfest.org/market)がオンラインで開催されている。主に IT 関係の技術書が山のように出品されているので、どの言語の本が多いか検索してみた (3/13 21時ごろ)。単純に言語名で検索して、ヒットした書籍を数えた。手作業で。いや目作業か。もう私は IT 老人なので、検索すべきものが他にあったらぜひ教えてほしい。

|言語|ヒット数|
|:--------|---:|
|HTML5 | 664|
|C++ | 519|
|GO | 216|
|Python | 199|
|Javascript | 186|
|Java|130|
|Ruby|117|
|BASIC|86|
|Swift|62|
|Kotlin|50|
|Typescript|44|
|Perl|36|
|アセンブラ|29|
|アセンブリ|27|
|TeX|22|
|Scala|21|
|ecmascript|16|
|Julia|14|
|Matlab|8|
|Mathematica|7|
|FORTRAN|7|
|COBOL|5|
|日本語|222|
|博多弁|18|

まさか Julia が TeX より少ないとは... Scala すらも... というより、TeX が健在と言うべきか。
GO とか Basic とかは、ヒットしてるのが言語名だけとは限らないような気もする。たまたまだろうけども stand for FORmula TRANslation な FORTRAN が Mathematica や MATLAB とほぼ同じなのは面白い。個人的には、アセンブラは要するにコンパイラ、アセンブリが言語名だと思っている。R は検索結果が多すぎるので数えなかった。

「博多弁」で検索して[私が書いた計算尺の本](https://techbookfest.org/product/5976396572655616)が出てくるのは、嬉しいのだが全然理解できない (少なくとも本文中には博多弁という語は出てこない)。博多弁で書いた覚えはもちろんないが、知らないうちに文章に博多弁が出ていたのだろうか。はたまた著者の出身地をどうにかして判定しているのだろうか。とにかくすごいぞ技術書典。
いまQiitaでプロフィール画像を更新すると綺麗になる

ぼやけることに定評があったQiitaのプロフィール画像ですが、久しぶりに画像をアップロードし直してみたら綺麗に更新されました！
いつの間に修正が入ったのか謎ですが、きちんと改善されているのは嬉しいですね。

## これが

<img width="281" alt="スクリーンショット 2020-03-13 22.13.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16060/840b26dd-c3c8-886b-5004-00f76a4b9413.png">

## こう！

<img width="285" alt="スクリーンショット 2020-03-13 22.13.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16060/9bf8eb36-58d5-00d6-1c2f-76c906aa927e.png">

## See Also

Qiita | マイページでプロフィール画像がぼやける理由 - Qiita
https://qiita.com/YumaInaura/items/0fa97d5f19d2b1665a8d

Qiitaのアイコン画像を高画質(クッキリ)にする方法 - Qiita
https://qiita.com/gooddoog/items/dda5a1137ae423027d34
Codeforces Round #627 Div3. B. Yet Another Palindrome Problem

https://codeforces.com/contest/1324/problem/B

# 題意
- 文字列sがある。
- この中から好きな文字をいくらでも削除して、3文字以上の回文を作れるか述べよ。

# こう考えた
- 3文字以上ということは、axaで、xはaでもいい。ただし、aaは役に立たない。
- ある文字が２つ存在するとき、その間に文字を含んでいればよい。例えば、acodeforcedaとaの間に文字があっても、文字は削れるのでafaとしてしまえば回文が作れる
※例ではアルファベットだが、実際は数字である

# 実装
ある数字を受け取ったら、今の場所とそれを最後に見つけた場所を引く。1以上なら、間に文字があるので回文が成立する。1だった場合、ある文字の見つけた場所は更新せずに、次の文字に移る。
これを繰り返して、１つでも上記が見つかれば勝ち。辞書を使って、最初に見つけた位置を覚える。

```Python
qq = int(input())
for _ in range(qq):
    n = int(input())
    dat = list(map(int, input().split()))
    f = False
    d = dict()
    for i in range(n):
        if dat[i] in d:
            if i - d[dat[i]] != 1:
                f = True
        else:
            d[dat[i]] = i
    print("YES" if f else "NO")
```
https://codeforces.com/contest/1324/submission/73031202
RaspberryPiZeroWHをWifiの中継機にする（2020年3月版）

#　RaspberryPiZeroWHをWifiの中継機に使いたかったので、やってみました。簡単な道案内です。

## 1. 用意するもの

・RaspberryPiZeroWH (RaspberryPiZeroWでも可）
・マイクロSDカード（8GBか16GB推奨）
・マイクロUSB-USBケーブル
・ラップトップorデスクトップPC１台(Windows, macOS or Ubuntuを推奨）

## 2. SDカードにラズパイのイメージを焼く

(1) RaspberryPiと検索して、公式HPへアクセスする。

(2) Downloadsのタブを開く。

![Screenshot from 2020-03-13 21-32-53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489195/ed2d5b75-7ed8-2221-c320-1df3f3c4cdce.png)

(3) インストーラをダウンロードし、起動する。

![Screenshot from 2020-03-13 21-33-37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489195/0e7e621e-252a-2c59-50a2-536942dde8f5.png)

(4) インストーラはこのようになります。

![Screenshot from 2020-03-13 21-34-12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489195/df040e80-19b2-025f-416f-2ce6629dda32.png)

(5) Raspbian Liteを選択する。

![Screenshot from 2020-03-13 21-34-36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489195/0c58878d-658e-10a5-1c5b-e60a8ef8566a.png)

(6) 「SDカード」をクリックし、マイクロSDカードを選択する。

![Screenshot from 2020-03-13 21-35-40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489195/e5c9c206-4fbb-1a2a-78d4-6a2f7af229f6.png)


(7) イメージを焼いています。少し時間がかかりますので、この間にスコッチを一杯やりましょう。注意として、スコッチを飲みすぎると次のステップに進めなくなりますので飲み過ぎを控えましょう。余談ですが、筆者は最近アイラ系にはまっています。Islay stormが好きですが、好き嫌いが別れるお酒です。ですので、スコッチを飲みなれてない読者の方には、入門としてGlenmorangieをおすすめします。sy

(8) イメージが焼き終わったら、一旦sdカードを取り外します。

(9) もう一度sdカードをPCに挿します。そこで、ターミナル または PowerShellを開き、sdカードの/bootの中に入ります。（以下ではubuntuで行っています。）

```
cd /media/[ここにユーザー名が入ります]/boot
```
(10)[こちら](https://qiita.com/otsuka512/items/856032a730ce9d1ec2ae)を参考に、usbケーブルでラズパイにアクセスできるようにSDカードのboot中のcmdline.txt、config.txtを編集し、sshという空ファイルを追加します。

(11) usbケーブルでRaspberryPiZeroWHの内側のmicroUSBとPCを接続する。

```
ssh pi@raspberrypi.local
```
で、USB経由でsshでRaspberryPiZeroWHにリモートログインします。

(12) [こちら](https://blog.thewalr.us/2017/09/26/raspberry-pi-zero-w-simultaneous-ap-and-managed-mode-wifi/)を参考に、設定ファイルを編集する。

(13) 再起動して完了
```
sudo reboot
```
go-redisでIncr

```golang
package main


import (
        "fmt"
        "strconv"
        "time"
        "github.com/go-redis/redis"
)

func getRedisClient() (*redis.Client) {
        client := redis.NewClient(&redis.Options{
                Addr:     "localhost:6379",
                Password: "", // no password set
                DB:       0,  // use default DB
        })  
        return client
}

func check(key string) {
        rc := getRedisClient()
        v := rc.Incr(key)
        fmt.Printf("key:%v,v(%d):%v,%v\n", key, v.Val(), v.Err(), v.Val())

        if v.Err() != nil {
                fmt.Print("error is not nil\n")
        }   
        if v.Err() == redis.Nil {
                fmt.Print("redis.Nil is coming\n")
        }   
}

func main() {
        ts := strconv.Itoa(int(time.Now().Unix()))
        key := "thekey:"+ts
        check(key)
        check(key)
}
```

```
$ go run main.go
key:thekey:1584105149,v(1):<nil>,1
key:thekey:1584105149,v(2):<nil>,2
```
Raspberry Pi (buster) へOpenCVをインストールする

# この記事は
自分用のメモ。

ラズパイへOpenCVをインストールする記事です。
```pip3 insall opencv-python```では足りないんですよーー！
めっちゃつまづいたーーーー！！

ポイントは
- 必要ライブラリのインストール
- OpenCVのバージョンを確認する
です

# OSのバージョンを調べる
ラズパイのOSであるRaspbianのOSバージョンを調べておきます。
ターミナルを開いて下記のコマンドを入力します。

```bash
lsb_release -a
```

私の環境では、下記のようなログになりました。

```bash
# lsb_release -a
# -> Raspbian buster だった

pi@raspberrypi:~ $ lsb_release -a
No LSB modules are available.
Distributor ID:	Raspbian
Description:	Raspbian GNU/Linux 10 (buster)
Release:	10
Codename:	buster
```

# aptのupdate
最新のライブラリをインストールするために、
下記を実行してaptを更新します。

```bash
sudo apt update
sudo apt upgrade
```

# 必要なライブラリをインストールする
OpenCVは様々なライブラリを使って動いています。
```pip3 install opencv-python```はあくまでPythonパッケージのインストールなので、OpenCVとして必要な全てのライブラリを用意してくれるわけではありません。

```bash
sudo apt install libhdf5-dev libqt4-test libqtgui4 libjasper1 libatlas-base-dev 
```

また上記が、どの環境においても必要にして十分なすべて、というわけではありません。
エラーが出たら、その都度ググりながら行きましょう。生きましょう。

# OpenCVのインストール

```sudo pip3 install opencv-python```で、
最新のOpenCVをインストールしてくれるわけですが、
たまたまインストールされた ***version 4.1.1.26*** は、
```import cv2```しただけでエラーがでました。

涙を拭いてバージョン下げましょう。

```bash
sudo pip3 install opencv-python==4.1.0.25
```
こっちもやっておきましょう。

```bash
sudo pip3 install opencv-contrib-python==4.1.0.25
```

# 確認
ここでは簡単に確認します。

```python
import cv2
```
これでエラーなければOKです。きっと動きます。
FuelPHP+PostgreSQLのmigrationでエラー（Uncaught exception PDOException: 55000 - SQLSTATE[55000]: Object not in prerequisite state:）

FuelPHP+PostgreSQLで`php oil refine migrate`したときにエラーぶっこいたので、その対処メモ。

## 環境
* FuelPHP 1.8.1
* PostgreSQL 11.7


## 起こったエラー
migrationコマンドを起動したら、こんなエラーが。

```bash
$ php oil refine migrate
Uncaught exception PDOException: 55000 - 
SQLSTATE[55000]: Object not in prerequisite state: 7 
ERROR:  本セッションでlastvalはまだ定義されていません 
in /fuel/core/classes/database/pdo/connection.php on line 271
```

いろいろ調べたんだけど、よくわからない。とりあえずmigrationデーブルを作るときにダメらしい。

先にテーブルさえ作っておけばOKなようなので作る。

## テーブル作成
SQLは下記の感じで。

```sql
-- CREATE TABLE
CREATE TABLE IF NOT EXISTS migration
(
  id         serial         NOT NULL,
  type       varchar(25)    NOT NULL,
  name       varchar(50)    NOT NULL,
  migration  varchar(100)   DEFAULT ''::character varying NOT NULL 
);

-- ALTER TABLE
ALTER TABLE migration OWNER TO postgres;

-- GRANT 
GRANT REFERENCES, INSERT, TRIGGER, UPDATE, DELETE, SELECT, TRUNCATE 
ON migration TO postgres;
```

このあと、migrateコマンドを叩いたところ、エラーなくとおりました。

めでたしめでたし。


### 余談
こちらの記事（https://qiita.com/sawamur@github/items/6e61b893f571853ca453 ）を参考にして、`fuel/core/classes/database/pdo/connection.php`をいじったら、migrationテーブルがなくてもエラーは解消されました。

ただ、作られたテーブル構成が違ってました。`id`がないんですよね。

```sql
postgres=# \d migration
    列     |           型            | Null 値を許容 |      デフォルト       
-----------+------------------------+---------------+-----------------------
 type      | character varying(25)  | not null      | 
 name      | character varying(50)  | not null      | 
 migration | character varying(100) | not null      | ''::character varying
```

悩んだ結果、一番最初にmigrationテーブルさえ作れば問題ないのでそんなに手間でもないですし、手作業を許容することにしました。
【Ruby】ハッシュ（Hash)について

今回はRubyでよく使うHashについて書き残しておきます。

#ハッシュ（Hash)とは？
ハッシュは文字列やシンボル等をキーにしてオブジェクトに格納するコンテナのこと。
以下のように｛シンボル：値｝で定義して出力することができます。

```ruby:hash.rb
address = {name: "鈴木", furigana: "suzuki", tel:"123456"}

p address[:name]

p address[:furigana]

p address[:tel]

p address
```

実行結果


```
"鈴木"
"suzuki"
"123456"
{:name=>"鈴木", :furigana=>"suzuki", :tel=>"123456"}
```

#シンボルとは？
シンボル（Symnbol）とは文字列に似たオブジェクトで、Rubyがメソッドなどの名前を識別するためのラベルをオブジェクトにしたもの。シンボルには、先頭に「：」をつけて表現する。
ハッシュは文字列でも使えるが、シンボルを使った方が効率がいいらしい。

####シンボルと文字列の違いは？
シンボルは文字列に「：」がついただけに見えるが、数値で処理されるため、文字列より早く処理できる。

#eachを使用したハッシュの取り出し方
eachメソッドを使用して、ハッシュaddressが持っている項目名とその値を表示していきます。

```ruby:hash.rb

address.each do |key, value|
    puts "#{key}: #{value}"
end

```

実行結果


```
name: 鈴木
furigana: suzuki
tel: 123456
```

#ハッシュのキー検索の仕方
key?メソッドで検索できます。引数には検索したいシンボルを入力します。

```ruby:hash.rb

address = {name: "鈴木", furigana: "suzuki", tel:"123456"}

p address.key?(:name)
p address.key?(:suzuki)
```

実行結果

```
true
false
```

#ハッシュの値検索の仕方
value?メソッドで検索できます。引数には検索したい文字列を入力します。

```ruby:hash.rb

address = {name: "鈴木", furigana: "suzuki", tel:"123456"}

p address.value?("name")
p address.value?("suzuki")
```

実行結果

```
false
true
```

以上、ハッシュの使い方まとめでした！
AscendingやDescendingを加味したDICOMからPNG変換

#目的

- DICOMからPNGに変換
- ただし、被験者によっては撮像の順番(Ascending, Descending)がばらばら
- PNGのファイル名は、Decendingを基準として番号をふる

詳細は、[こちら](https://www.aiprogrammers.net/entry/2020/03/13/212634)に記載しております。
[AscendingやDescendingを加味したDICOMからPNG変換](https://www.aiprogrammers.net/entry/2020/03/13/212634)
よかったらご覧ください。
mongoでcouldn't connect to serverなったとき MAC

```shell
% mongo --version
MongoDB shell version v4.2.3
git version: 6874650b362138df74be53d366bbefc321ea32d4
allocator: system
modules: none
build environment:
    distarch: x86_64
    target_arch: x86_64
```
## ディレクトリ作って起動させるだけ

```shell
$ sudo mkdir /var/lib/mongodb
$ sudo touch /var/log/mongodb.log
$ sudo mongod --dbpath /var/lib/mongodb --logpath /var/log/mongodb.log
```

## 参考

[HomebrewでMacにMongoDBをインストールした時のメモ](https://qiita.com/FrogWoman/items/f8a70286c7f1c4d5fc02)
Hinemos ジョブの保留設定

#要件
とある時間帯、Hinemosのジョブを止めたい。

#結論
Hinemosのジョブ保留機能を検討してみた。

しかし、ジョブ保留機能は特定条件下に限定されるので使いにくい。
この要件であればジョブスケジュールを停止させた方が楽。

#保留機能とは
ジョブの保留設定を行う場合、保留にしたいジョブの設定画面で保留設定を有効化できる。

しかし、例外として、そのジョブがスケジュールされている親ジョブの場合、保留設定は無視されてしまう。
（いわゆる最上位ジョブネットとか、最上位のジョブの場合）
 
#パターンA
- 0時起動の親ジョブ
    - 子ジョブA（保留設定ON）
    - 子ジョブB

子ジョブAは保留状態

#パターンB（例外）
- 0時に起動の親ジョブ（保留設定ON）
    - 子ジョブA

親ジョブは保留されない。

#結論
パターンAの場合を求められているなら実現可能
パターンBの場合は実現できない。
KINX … ロゴ作った話と BDD 用テスティングフレームワークの話

# ロゴを作ってみた

## はじめに

**「見た目は JavaScript、頭脳(中身)は Ruby、（安定感は AC/DC）」**でお送りするスクリプト言語 Kinx。改めて Ruby っぽさの定義って何だろう、と思案中。これだ、という意見があればぜひご教授ください。

* [スクリプト言語 KINX（https://github.com/Kray-G/kinx）](https://github.com/Kray-G/kinx) 
    * 宜しければ★をポチっと。

見た目がゴージャスになって嬉しいのでご報告。

## Kinx

オリジナルのロゴを作ってみました。Ruby のかっこいいロゴとか、Python や JS、Bootstrap みたいなのもみんなロゴがあるし、欲しいなーと。

<div align="center">
<img height="112px" src="https://raw.githubusercontent.com/Kray-G/kinx/master/doc/kinxlogo.png"></img>
</div>

* https://github.com/Kray-G/kinx

ロゴがあると「公式感」が出てちょっとステージ上がった感じがするよね（別に何も上がってはいないのだが）。たまに裏でアイコン職人として活動しているので、（出来の良さは置いておくとして）こういうの作るのは割と好きなタイプ。ちなみにアイコン職人への仕事の依頼は...積極的に受け付けていませんが何かあればコメントください。

まぁいいんじゃない？、と思ったら★を押してくれると嬉しいな（常に★を欲しがる男...でも欲しいよね）。

**Kinx** は「有益なライブラリのプラットフォームになる」と息まいているので、歯車をモチーフにデザインしました。色々なものを有機的につなげていくイメージ。

## SpecTest

ついでに **SpecTest** と名付けたテスティング・フレームワークのロゴも作った。

<div align="center">
<img height="128px" src="https://raw.githubusercontent.com/Kray-G/kinx/master/doc/spectest.png"></img>
</div>

* https://github.com/Kray-G/kinx/tree/master/doc/spec/spectest

コンセプトは「Writing a specification means writing a test, and examples are becoming test codes as is.」。

これは自分で言っててナンだが結構うまく機能していてちょっとモチベーション上がっている。Kinx に内蔵しているが、別に Kinx 固有のシステムではなく汎用的に作ってあるので、Kinx で開発した製品以外のテストにもそのまま使える（フレームワーク自体は Kinx で動くのだが）。

そのうち説明する機会を設けようと思うのだが、基本的なアイデア・コンセプトは **テストは書かない**、より正確には **テストを書くのではなく仕様を書くと自動的にテストになる** というもの。

そもそも、**テスト書くのって大事だけど大変だよね**。あぁ、あと **ドキュメントも書かないと使えるものにならない** しナー、という面倒くささダブルパンチでやってくる憂鬱をどのように乗り越えるか、という観点で生まれた可愛いわが子です。

そう、書くのは仕様なのです。Markdown で仕様書を書くのです。仕様書の中には **サンプル（例）** が書かれているのです。例は **そのまま実行できる** のです。素晴らしい。

まじめなコンセプトとしては、BDD (**Behavior Driven Development**) の **Specification By Example** というコンセプトをベースにしています。「例」によって「仕様」を決める（そしてそれがテストコードになる）。


他の BDD 向けテスティングフレームワークを見ててもみんな　**プログラムで表現する** っていう感じなんだよね。違ったらすみませんだけど、RSpec とか JSSpec とか PySpec とか NSpec とか。。。仕様を書いているのかもしれないが、実際にそれを表現するのはプラグラム・コード上だったりする。いや、そうじゃないんだ。仕様書（そんなたいそうなモンじゃないが簡単な例とかを散りばめた説明用の文書）が書きたいんだ。書きたいのはテストじゃないんだ、どっちも書くのは面倒なんだ、という気持ちの表明でもあります。

実行例も載っているので、興味あれば見てやってください。

* https://github.com/Kray-G/kinx/tree/master/doc/spec/spectest

# おわりに

みんなテスト書こうね。

いや、私はテストは書かない。仕様を書く。そしてひたすら例を書く。いつのまにかテストできてる（理想）。これを実現してくれる **SpecTest**。どうぞよろしくお願いします。

そしていつもの以下の定型フォーマットです。

* 最初の動機は [スクリプト言語 KINX（ご紹介）](https://qiita.com/Kray-G/items/ca08b6fb40d15dd0ec76) を参照してください（もし宜しければ**「~~いいね~~ LGTM」**ボタンをポチっと）。
* リポジトリは [ここ（https://github.com/Kray-G/kinx）](https://github.com/Kray-G/kinx) です。こちらももし宜しければ★をポチっと。
GitHubへpushした後、テーブルを統合して不要になった方のモデルを「rails d(estroy) model」で削除してはいけません。

## はじめに
チームでアプリケーション開発をしていて、データベースを設計をしていくと
GitHubにpushしたマイグレーションファイルの取り扱いについていろいろと~~振り回され~~
学ぶことが多いと思います。
そのときに参考にさせていただいたのが、こちらの記事でした。
[GitHubにpushしたmigrationファイルは安易に修正してはいけません](https://qiita.com/jnchito/items/3525fd22973477b88411)

本記事は、テーブルを統合することによって不要になったモデルファイルを消すときのお話です。

## 2つのテーブルを１つに統合することになった

開発を進めていくと、２つのテーブルを１つに統合することがありますよね。

AとBの２つをAに統合して、Bが不要になったとします。

Bテーブルを削除するには、新たにdropするマイグレーションファイルを追加するとして、
Bモデルを削除するには、消し漏れを防ごうとして、「rails d(estroy) model B」を実行したくなりますが、**やってはいけません。**

## なぜ？
**Bモデルのファイルと一緒に、Bテーブルをcreateするマイグレーションファイルも
削除されるため、マイグレーション履歴が壊れてしまう**からです。

## 実際にやらかしてみた
※ここからは、Aテーブルを「hoge」、Bテーブルを「test」で表現します。

testモデルを消したいので、「rails d model」コマンドで削除したら、こんな事になりました。

```console:terminal
% cd アプリケーションのパス
% rails d model test

Running via Spring preloader in process 36020
      invoke  active_record
      remove    db/migrate/20200227115950_create_tests.rb
      remove    app/models/test.rb
      invoke    rspec
      remove      spec/models/test_spec.rb
      invoke      factory_bot
      remove        spec/factories/tests.rb
```

３行目のremoveに注目すると、__testテーブルをcreateするマイグレーションファイルが
削除されている__ことが分かります。

この状態でマイグレーションの履歴をみるとこうなります。

```console:terminal
% rails db:migrate:status

database: hogehoge_development

 Status   Migration ID    Migration Name
--------------------------------------------------
   up     20200210112600  Create hoges
   up     20200210115950  ********** NO FILE **********
   up     20200211120823  Create fugas
   up     20200211133456  Add Column hoges
   up     20200211135601  Drop tests

```

Migration ID 「20200210115950」の名前が見事になくなっています。
このIDは、「test」テーブルを作成するマイグレーションファイルに当たります。
モデルを消したいだけなのに、必要なファイルまでもが消えてしまいました。

こうなってしまうと、後から参加するメンバーが git clone しても
マイグレーションの実行で失敗してしまい、データベースが構築できなくなってしまいます。

もちろん、マイグレーションの履歴を見た瞬間に**あばばばば**となりました。


## さあ、復旧しよう

削除したファイルが**ゴミ箱に残されていた**のが幸いでした。
「20200227115950_create_tests.rb」を元の場所に戻すことで復旧ができました。
とにかく良かった(^^;

## ではどうすれば良かったのか

「rails d model」コマンドでは消さずに**手作業**で対象となるファイルを消します。
今回は、モデルとRSpecテストの各ファイルを削除しましょう。

```console:terminal
#モデルファイルを消す。
% cd アプリケーションのパス
% cd app/models
% rm test.rb

#RSPecファイルを消す。
% cd ../../spec/factories
% rm tests.rb
% cd ../models
% rm test.rb
```

ターミナルで消すのは面倒だという人は、VS Codeのエクスプローラーから削除するとラクです。
僕もこの方法で消しました。

## まとめ

今のところは、不要になったモデル(とテストに関連する)ファイルは、手作業でしか消せません。
効果的な方法がありましたらコメントをいただけると助かります。
[MAMP]MySQL Serverが起動しないときの対処方法[Windows10]

#MySQLが起動しない

MySQLを手軽に扱えるMAMPを使用してSQLデータベースとPythonで業務システムを構築中に、MAMPから**MySQLが起動しなくなり**対処に困ったのでメモ。

Windows 10 Pro 64bit
MAMP Version 4.1.0


↓↓　通常は下記のようにMySQL Serverに**緑ランプが点灯**するはずですが、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530814/291ee13e-176b-2bb8-7c77-8d98ee136623.png)


↓↓　Startしても**ランプが点灯せず**、MySQL Serverだけが起動しない。Stop Startを繰り返したり、Windows再起動するも変わらず。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530814/eef71a62-8b0c-9f21-223c-9e1228fe9d42.png)

#MAMPインストールフォルダにアクセス
**MAMP -> db -> mysql**
上記のようにmysqlフォルダにアクセスします。
フォルダ内にはbinファイルがいくつかあります。
このbinファイルを**全て削除**しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530814/2148ad13-941d-3a19-7426-7f2081b4e5e6.png)


削除を終えてから、MAMPを再起動すればMySQLが無事に起動します。

ネット上にあまり情報がなく対処に難渋しましたが、これで必ずMySQLがきちんと起動するようになりました。
[sh]コマンドの実行結果を変数に格納する方法

シェル内で、コマンドを実行し、結果を分割して、変数に格納したくなった時に利用しています。

```
$ set $(echo "1 2 3" | awk -F" " '{print $1, $2, $3}' )
$ echo $1
1
$ echo $2
2
$ echo $3
3
```

psコマンドと組み合わせて、PPID＝1になっているゾンビプロセスを
退治するのに使っています。

```
cmd="ゾンビプロセス名"   # バグにより生まれるゾンビプロセス
ppid=1                  # PPID=1

ps all | while read F UID PID
do
    set $(ps o pid,ppid,cmd -p $PID | tail -n1 | awk -F" " '{print $1, $2, $3}'
    if [ $ppid = $2 ] && [ $cmd = $3 ] ; then
        sudo kill -9 $PID
    fi
done
```
django pycharmを使った　 環境構築

ターミナルで　
sudo xcode-select --install　入力

Homebrewのインストール

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

その次に
export PATH=/usr/local/bin:$PATH

python3をインストール
brew install python3

pythonのバージョンを確認
python3 --version

Djangoのインストール
pip install django

※上にある▼を押してedit Configurationを選択して
python interpreterで３.６が選択されているか確認する

ターミナルで
django-admin startproject (開発ファイル名）

入力するとdjangoのファイルが出来る

cd　(開発ファイル名）
でファイルに移動できる

No python interpreter と出てきたのでpythonのバージョンを設定しました
【MS ACCESS】自分自身のFormにフォーカスする。

メモとして残します。


#■やり方
```vb
Function hoge()
    Me.Form.SetFocus 'または Me.SetFocus でも可
End Function

```
#■さいごに
基本的にはこんなことやる機会はないとは思いますが、
私の場合は、ローディング画面のようなフォームを処理中に表示することがあるため、
ロード完了時に閉じたときにフォームにフォーカスを戻してキー入力をシームレスに続けることが目的だったため、仕方なく。。。
Migration[5.2]でrails db:migrateでエラーになるのを解決する方法

結論としては、マイグレーションのバージョンをMigration[5.2]からMigration[5.0]に変更して、rails db:migrateがエラーを起こさず実行できました。

既にMigration[5.1]以降でデーターベースにテーブルを作ってしまってる場合は、一旦、テーブルを削除してしまった方がいいです。
【Aftereffects】エクスプレッションでマスクのパスのポイント位置の取得

レイヤー位置は固定で特定のマスクのパスを他のオブジェクトに追従させたいときとかに以下のように取得。

.maskPath.points()[i][p]

i : ポイントのインデックス(何個目か)
p : 位置のインデックス(0=x, 1=y)

```js
myPath = thisComp.layer("hoge").mask("マスク 1").maskPath.points()[i];
```


テキストにするにはこんな感じ。
![74d408445b745b8b8b95cb8a77fd3a61.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102588/88421458-2cf4-445b-bf5b-4a78fe51a399.png)


円形マスクのセンター取得は↓

```js
myPath = thisComp.layer("Mask").mask("マスク 1").maskPath.points();
myPath[0][0],myPath[1][1]
```

※AE CC2014ではまだ実装されてなかった…
OnValidate関数を使ってUnityEventの登録をスクリプトから行いたい

備忘録

# OnValidate関数知らない人用

Unityで元々用意されている関数です。
UnityEditorで手動でやっていること(コンポーネントのアタッチとか)を自動化できます。
今回はイベントの登録をスクリプト側からやってもらいます。

公式の説明
https://docs.unity3d.com/jp/460/ScriptReference/MonoBehaviour.OnValidate.html
# コード

```TestCode.cs
using UnityEngine;

public class TestCode : MonoBehaviour
{
    public UnityEngine.Events.UnityEvent hogehogeEvent;

    private void OnValidate()
    {
#if UNITY_EDITOR
        // 既にボタンにイベントを登録していたら削除する.
        UnityEditor.Events.UnityEventTools.RemovePersistentListener(hogehogeEvent, TestCallback);
        // ボタンにイベントを登録する.
        UnityEditor.Events.UnityEventTools.AddPersistentListener(hogehogeEvent, TestCallback);
#endif
    }

    private void Start()
    {
        // イベントの呼び出し
        hogehogeEvent.Invoke();
    }

    private void TestCallback()
    {
        Debug.Log("イベントが呼ばれました");
    }
}
```

# 結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119898/6e596dcf-3c38-2dd7-3936-329761819a49.png)

ボタンの場合

```sample.cs

using System;
using UnityEngine;
using UnityEngine.UI;

    [RequireComponent(typeof(Button))]
    public class TestCode: MonoBehaviour
    {
        [SerializeField]
        private Button button;

        private void OnValidate()
        {
#if UNITY_EDITOR
            if (button)
            {
                return;
            }

            button = GetComponent<Button>();
            UnityEditor.Events.UnityEventTools.RemovePersistentListener(button.onClick, OnPressedButton);
            UnityEditor.Events.UnityEventTools.AddPersistentListener(button.onClick, OnPressedButton);
#endif
        }

        private void OnPressedButton()
        {
          
        }
    }
}
```

呼び出し先のメソッドをprivateにできるのも好きです
nodeの実行バージョンをプロジェクトごとに自動切換え

# 背景
nodeを使用した開発においてプロジェクトごとにnodeのバージョンを分けなければいけないことがある。こういった状況において人が管理するとあっさり記憶をなくして管理にあれこれ無駄の時間を浪費してしまう。本問題を解決するために表題の解決策を実施する。なお、本文章は文末にある参考ページを参照したうえで一つの文書としてまとめたものである。参考ページそれぞれの文章も非常によくまとまっているため閲覧するとより理解が深まる。


# 環境
本記事では以下の開発環境で構築を行い、正常に動作することを確認している。

* Windows 10 64bit + WSL Ubuntu 18.04 LTS
* Bash 4.4.20 (WSL Ubuntu)



WSLとはWindows Subsystem for Linuxの略称であり、Windows上でLinuxカーネルを一つのプロセスと扱えるものである。Linux系システムで動作するアプリケーションを開発をするときは開発ツール類はLinux準拠のものを使用したほうが開発しやすいためWSLを導入することをおすすめする。今回の文章で紹介するnvm(nodeバージョン管理ツール)もLinuxおよびMac環境では提供されているがwindows環境では提供されていない。互換性を意識したnvm-windowsが提供されているが完全互換ではない。
WSL未導入の人は以下のページを参考に導入しましょう。
[WSL 2 を使用して node.js 開発環境を設定する](https://docs.microsoft.com/ja-jp/windows/nodejs/setup-on-wsl2)

# nodeのバージョン管理ツールを導入
node自体のバージョン管理を行うツールとしてnvmがある。まずはこちらをインストールする。

## Ubuntu起動
Windowsの検索ウィンドウからUbuntuと入力して起動する。以降の操作はUbuntuのbash上で以下のコマンドを実行する。

## nvmインストール
nvmをインストールする。nvmはnodeのバージョン管理を可能にするツール。手動で複数のnodeをバージョン管理するならばnvmを導入するだけでOK。


```
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
source ~/.bashrc
```

## Node.jsダウンロード・インストール
nvmを使用してnodeをダウンロードとインストールを一括で行う。はじめて開発する人は安定版の最新を入れるだけでよいでしょう。

* 安定版の最新

```
nvm install --lts
```

* バージョン指定

nodeのバージョンを指定して開発したい場合はバージョン番号を指定してインストールする。

```
nvm install 10.17.0
```

## インストール済みNode.js表示
nvmを使用してインストールしたnodeを表示するにはnvmコマンドに対してlsオプションを指定する。

```
nvm ls
```

## Node.jsバージョン切り替え
使用するnodeを切り替えたい場合は「nvm use バージョン番号」を指定する。

```
nvm use 10.17.0
node -v # node -vを実行した結果、利用するnodeが10.17.0になっていることを確認できる。
```

# nodeの実行バージョンを自動切換え
プロジェクトフォルダごとにnodeバージョンを切り替えたい場合はdirenvとよばれるディレクトリごとに環境変数を定義するツールを導入する。

## direnv の導入
WSL Ubuntu にはデフォルトで入っていないのでインストール。はじめてWSL Ubuntuを使用するときはaptが参照する情報を最新にしておく。aptをupdateしないとdirenvをaptコマンドからインストールできない。

```
sudo apt update #aptが参照するリポジトリを更新
sudo apt install direnv #direnvのインストール
```

~/.bashrcの末尾に以下を追記する。

```
export EDITOR=vi #環境ファイルを編集するeditorの設定
eval "$(direnv hook bash)"
```

設定ファイルの再読み込み

```
source ~/.bashrc
```

# direnvとnvmコマンドに実行してもらいたいコマンドを事前に定義
nodeのバージョンを自動で切り替えてほしいディレクトリで.nvmrcと.envrcを作成する。
.nvmrcはnvmに利用したいnodeのバージョンを通知するファイル。
.envrcはdirenvに実行してほしいコマンドを記載したファイル。
上記の２つのファイルを作成することで特定のディレクトリに移動したときに自動でnodeのバージョンを切り替えるようにする。
本記事ではユーザーがprojfolderに移動した時、自動で利用するnodeのバージョンを10.17.0に切り替えることを想定する。

# .nvmrcファイルの作成
projfolderではnodeのバージョンを10.17.0に切り替えたい。その場合、projfolder配下の.nvmrcに切り替えたいnodeのバージョン番号を登録する。

```
echo "10.17.0" > ~/projfolder/.nvmrc
```

# .envrcファイルの作成
.envrcファイルにはディレクトリ切り替え時に先程の.nvmrcをnvmに読み込ませて実行するスクリプトを登録する。

```
cd ~/projfolder #projfolderに移動
direnv edit . #.envrcの編集
```
envrcファイルに以下を記入する

```
source $NVM_DIR/nvm.sh
nvm use #バージョン指定なしで実行すると.nvmrcファイルに記載されているバージョンを使用する
```

projfolder配下でdirenvを実行するための許可コマンドを実行する

```
direnv allow
```

上記にてprojfolderへユーザーが移動するとnvm useコマンドが実行されるので、自動でnodeのバージョンを切り替えることができるようになった。




# 参考ページ
https://riotz.works/articles/lulzneko/2019/06/17/automatically-swich-environment-variables-to-working-directory-of-shell/
https://askubuntu.com/questions/1072845/unable-to-locate-package-error-in-ubuntu-18-04-on-windows-10
https://tadtadya.com/nvm-manage-nodejs-version-for-each-user-and-directory/
https://docs.microsoft.com/ja-jp/windows/nodejs/setup-on-wsl2
TypeScript入門 Tips


### 環境
```
npm list -g typescript
/Users/yuta/.nodebrew/node/v10.17.0/lib
└── typescript@3.8.3 
```

```
tsc --version
Version 3.8.3
```



### 怒られた
- コード

```
function waite(duration: number) {
    return new Promise(resolve => {
        setTimeout(()=> resolve(`${duration} ms passed`), duration)
    })
}
waite(100).then((result) => {}) //resは{}
```

- 愛のメッセージ

```
'Promise' only refers to a type, but is being used as a value here. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later
```


参考: https://qiita.com/k_hoso/items/a8b9de1f5f6b2b93b4f7#%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E3%81%99%E3%82%8B%E3%81%A8ts2580%E3%81%8C%E5%87%BA%E3%82%8Bdo-you-need-to-install-type-definitions-for-node



### 直した
```
npm list -g typescript
/Users/yuta/.nodebrew/node/v10.17.0/lib
└── typescript@3.8.3 
```


### 直った！！！
[7zip]日本語版Windowsで圧縮されたzipファイルを文字化けせずに解凍する方法

# やりたいこと
* Windows英語環境を使用している
* Windows日本語環境で圧縮されたzipファイルを回答すると、日本語ファイル名が文字化けする
    * 文字化けしてしまったファイル名を修復するソフトもあるが、解凍時点で正しく解凍したい
    * 会社支給PCの環境でありなるべく新しくソフトをインストールしたくない
* 日本同士でもWindowsーMac, Linuxでも同じ現象が起こる様子
    * Mac, Linuxでの解決方法は情報豊富
* また、一部の情報では7zipが自動的にエンコードを判別してくれるとのこと
    * しかし、私のWindows英語環境ではうまく機能せず
    * 他にWindows英語環境でできる方法を探してみたものの、日本語情報がなかったので記事化

# 環境
* Windows10 (英語環境)
* 7zipコマンドライン版(7-Zip Extra 19.00)

# 原因
* 日本語版Windowsでは圧縮時にShift-JISを用いているが、英語版で解凍する場合はShift-JISで解凍してくれない
* インストール版7zip(19.00)の解凍メニューからは解凍エンコードを選べなかった

# やること
* 7zipコマンドライン版exeを叩く
* 通常通りの解凍コマンドに加えて、エンコード引数（-mcp）を加える

```
[ディレクトリパス]/7za.exe x -mcp=932 [解凍ファイル]
```

* "932"はcode page number
* 7zipのHelpには、エンコード指定引数は**"-scs"**とあるものの、なぜかこちらは機能せず

# 参考
* https://sourceforge.net/p/sevenzip/discussion/45797/thread/2bb0be71/
* https://proengineer.internous.co.jp/content/columnfeature/6276
プログラムはなぜ動くのか？を読んでみてまとめることで知識の定着を図る投稿#6

[プログラムはなぜ動くのか第２版](amazon.co.jp/プログラムはなぜ動くのか-第２版-知っておきたいプログラムの基礎知識-矢沢久雄/dp/4822283151/ref=sr_1_1?adgrpid=53631245656&gclid=Cj0KCQjw0pfzBRCOARIsANi0g0tajATNcn3H7Ogokqrdst5O2JctSzMRb6A0XyW5GegcPbJwaEvZO84aAlK8EALw_wcB&hvadid=338517958683&hvdev=c&hvlocphy=2392&hvnetw=g&hvqmt=e&hvrand=9776556383623440456&hvtargid=kwd-334563073858&hydadcr=27265_11561134&jp-ad-ap=0&keywords=プログラムはなぜ動くのか&qid=1583760691&sr=8-1)

を僕が師匠と読んでいる方に進めていただき、読んでみようと思いました。
そこで、僕的にはかなり難しいこともあり、この本をまとめながら読み進めていくことによって理解度を高めようと思いました。

こちらはあくまでも推奨する記事ではなく、僕がこうした方が定着しやすいかもと思い、記録に残すことにしました。


##ベースとインデックスで配列を実現する

ベース・レジスタとインデックス・レジスタの役割を説明しておくと

この二つをペアで使うことで、メイン・メモリー上の特定のメモリー領域を区切って配列のように使うことができます。
（へぇ〜）

実際のアドレスは
10000000

だけどこれを

ベース・レジスタとインデックス・レジスタ
に分けると
ベース・レジスタは

10000000で固定

インデックス・レジスタは

00000000で変数にする

すると16進数だと
00000000~1000FFFFみたいにできるらしい。

ここの機能はあんまりよくわかんない。

ただ実際はベース・レジスタとインデックス・レジスタの配列でアドレスが決まるっぽい

##CPUにできることは、いたって単純

| 種類       |機能|
|:----------------|:------------------|
| データ転送命令     |レジスタとメモリー、メモリーとメモリー、レジスタと周辺装置の間でデータを読み書きする|
| 演算命令|アキュムレータで算術演算、論理演算、比較演算、シフト演算を行う|
| ジャンプ命令          |条件分岐、繰り返し、無条件のジャンプを行う|
| コール/リターン命令        |関数を呼び出す/呼び出し元に戻る|

##この章のまとめ

コンピュータのCPUは案外複雑なことを処理しているようにも思えるが、実際蓋を開けると処理自体は単純にしているみたい。
この苦手意識は少しでもなくなったので、よしとするか。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253981/d431d5c9-55b6-250e-1353-6c21543af834.png)
括弧の中にある数字(string)を抽出してintに変換する

備忘録

# コード
``` TestCode.cs
using UnityEngine;

public class TestCode : MonoBehaviour
{
    private void Start()
    {
        Debug.Log(GetNameIndex(gameObject.name));
    }

    public int GetNameIndex(string n)
    {
        int startBrackets = n.IndexOf("(");
        int endBrackets = n.IndexOf(")");

        try
        {
            return int.Parse(n.Substring(startBrackets + 1, (endBrackets - endBrackets) + 1));
        }
        catch
        {
            throw new System.NullReferenceException("数字が見つけられません　数字を丸括弧で囲んでください");
        }
    }
}

```

# 結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119898/1ceaed1f-cd65-1b65-c76a-d0e9ce2fa1de.png)
Raspberry Pi, Jetson Nano向けオーディオ入出力ボードの作成(AK4558ENチューンアップ編)

[前回](https://qiita.com/kmitsu76/items/134f01220f43b86c0416)作成したAK4558ENコーデックボードをチューニングし、音楽リスニング用途にも幅広く使えるようにしたい。
##改造のポイント
低雑音LDOへの変更。現在のNCP1117から自作デジタルオーディオ業界で評判のいいLT3042に変更してみる。

RMS Output Noise (f = 10 Hz to 10 kHz) 0.003 V
↓
RMS Noise: 0.8µVRMS (10Hz to 100kHz)
スペック上は上記になるが、どこまで変化があるかは自己満足の世界か。
回路図を変更する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387653/a7a5279d-8d23-a608-4bf0-5aa26966b28a.png)

ここで改めて、無改造、買ってきたばかりのJetson Nanoへ搭載してみる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387653/61de23a5-6547-29e4-e46e-9b799fb77441.png)
問題なく動作した。
これをしばらくはメインとして使っていきたい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387653/160710a5-045c-d892-6aad-8744a77c6944.png)

Raspberry piでも動作させることができた。
OmniMarkupPreviewer 404 Not Found 解決法

## Error: 404 Not Found

Sublime Text3 愛好家、ならびに Markdown 愛好家です。 OmniMarkupPreview の Preview Current Markup in Browser 機能は最高ですが Error: 404 Not Found が出ることがあります。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270842/f070202a-36b8-9d02-cf68-1846c9f3a806.png)

```plaintext
Error: 404 Not Found
Sorry, the requested URL 'http://127.0.0.1:51004/view/27' caused an error:

'buffer_id(27) is not valid (closed or unsupported file format)'

**NOTE:** If you run multiple instances of Sublime Text, you may want to adjust
the `server_port` option in order to get this plugin work again.
```

## 解決法

OmniMarkupPreviewer.sublime-settings に markdown ライブラリのエクステンションを書き込みます。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270842/e2175804-fa9c-e3cd-82e9-69755d2cbe8f.png)

```json:OmniMarkupPreviewer.sublime-settings
{
    "renderer_options-MarkdownRenderer": {
        "extensions": [
            "markdown.extensions.tables",
            "markdown.extensions.fenced_code",
            "markdown.extensions.codehilite"
        ]
    }
}
```

↓ Work しました。

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270842/b8b8f411-15a3-9eed-74c1-18d652ec3589.png)

### 昔の解決法

これはもう使えません。

```json
{
    "renderer_options-MarkdownRenderer": {
        "extensions": ["tables", "fenced_code", "codehilite"]
    }
}
```

## そも OmniMarkupPreviewer とは

Sublime Text3 で Markdown を書きながら、ブラウザでリアルタイムでプレビューを見ることができるパッケージです。すべての Markdown 愛好家に届け!