OmniAICreator/Qiita-1.07M huggingface dataset:
Java PowerPoint転送画像、PDF、XPS、SVGなどのフォーマットファイル

この文章は、Javaアプリケーションでは、PowerPointにおける画像、PDF、XPS、SVGなどのフォーマットに変換する方法を紹介します。
コンポーネントを使用： Free Spire.Presentation for Java
コンポーネント概要: Free Spire.Presentation for Java  1つの無料Java PowerPointのコンポーネントで、豊富なフォーマット変換をサポートして、例えばPPTとPPECのフォーマットを互いに回転して、PPT / PPECは画像、PDF、XPSとSVGなどを回転します。
以下のコードを使用する前に、Free Spire.Presentation for Java ダウンロードして解凍する必要があり、それからibフォルダからアプリケーションにjaをインポートします。

PowerPoint転送画像
これによりISlide.SaveAsImage()、PowerPointドキュメントや指定スライドを画像に変換することができます。

```java
import com.spire.presentation.Presentation;
import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
import java.io.File;
 
public class PPTToImage {
    public static void main(String[] args) throws Exception {
        // PPTをロードする
        Presentation ppt = new Presentation();
        ppt.loadFromFile("Input.pptx");
 
        //画像に保存
        for (int i = 0; i < ppt.getSlides().getCount(); i++) {
            BufferedImage image = ppt.getSlides().get(i).saveAsImage();
            String fileName = "output" + "/" + String.format("ToImage-%1$s.png", i);
            ImageIO.write(image, "PNG",new File(fileName));
        }
        ppt.dispose();
    }
}
```
PowerPoint回転PDF、XPSなど
通過するPresentation.saveToFile(string filepath, FileFormat fileformat)，PPT、Pptx 2007、Pptx 2013、Ppsx 2007、Ppsx 2010、Ppsx 2013、PPS、Opsx、XPS、PDF、HTML、TIFFなどのフォーマットを保存することができます。

PPT回転PDFを例：

```java
import com.spire.presentation.FileFormat;
import com.spire.presentation.Presentation;
 
public class PPTToPDF {
 
    public static void main(String[] args) throws Exception {
 
        // PPTをロードする
        Presentation ppt = new Presentation();
        ppt.loadFromFile("Input.ppt");
 
        // PDFに保存
        ppt.saveToFile("ToPDF.pdf", FileFormat.PDF);
    }
}
```
PowerPoint回転SVG
通過する Presentation.saveToSVG()，PowerPointドキュメントをSVGに変換することができます.

```java

import com.spire.presentation.Presentation;
import java.io.FileOutputStream;
import java.util.ArrayList;
 
public class PPTToSVG {
 
    public static void main(String[] args) throws Exception {
 
        // PPTをロードする
        Presentation ppt = new Presentation();
        ppt.loadFromFile("Input.ppt");
 
        // SVGに保存
        ArrayList<byte[]> svgBytes =(ArrayList<byte[]>) ppt.saveToSVG();
        int count = svgBytes.size();
        int len = svgBytes.size();
        for (int i = 0; i < len; i++)
        {
            byte[] bytes = svgBytes.get(i);
            FileOutputStream stream = new FileOutputStream(String.format("output" + "/" + "ToSVG-%d.svg", i));
            stream.write(bytes);
        }
         ppt.dispose();
    }
}
```
子ども用（パソコン未経験者）のパソコンの選び方

# 概要

小学校プログラミング教育がはじまる中、子どもにパソコンを
与える際の参考になればと思い投稿いたします。

私自身、IT業界でお仕事をさせて頂いております。

IT業界は2018年現在の肌感として学歴よりスキルが重要なので、
経済的な格差を挽回できる職業だと思い、今後の職業選択肢として
きっかけを作れたらと思っています。

## パソコン必要？

小学校プログラミング教育のための購入は<B>不要。</B>（おそらく、、、）

こんな場合に必要と考えています、、、
・将来、プログラマ、システムエンジニアを目指している
・ゲームを作りたい
・動画をつくりたいetc

子どもがパソコンを必要とする場合に、必要になると思います。

私の場合、中学１年生の時に家にパソコンがあり、
ゲームや調べ物をして、興味をもってIT業界にきたため、
家にパソコンがなかったら、、、この業界にいなかったかもしれません。

スポーツなどと同じで、パソコンに長く親しんでいると経験値になるというのは
あると思います。

## 子どもにパソコンを与えるのが不安

これは不安なポイントですね、、、こどもの自主性を育てるのも大事なポイントですが
windows10,iOSにはペアレントコントロール機能があるため不安な場合は
そちらを活用するのがよいと思います。

win10
https://www.microsoft.com/ja-jp/atlife/article/windows10-child/

mac ペアレントコントロール
https://support.apple.com/ja-jp/guide/mac-help/mtusr004/mac

またChrome bookなどでも可能です。
※古いパソコンのペアレントコントロールを考える別記事もあげようと思います。

## どんなパソコンを買えばよいの？

目的によって購入するパソコンは変わります。

まず２つのケースに分けたいと思います。
→経済的に余裕がある。（４万円、１０万円以上出資できる）
→経済的に余裕がない。

### 経済的に余裕がある

経済的に余裕があれば、目的にあったパソコンを目的を伝えて家電量販店などで
購入すれば良いと思います。

その際に値段が目的のポイントは下記のようなケースになると思います。

・VRを楽しみたい（コスト大 20数万円〜といった価格になると思います。）
→Oculusのようなハードを使用したい場合、ハイスペックなパソコンが必要になります。

・やりたいパソコンゲームがある（４万円〜）
→やりたいパソコンゲームによって必要になるスペックが違います。
→マインクラフトなどであればそこまでハイスペックでなくて大丈夫です。

・iPhoneアプリを作りたい（中古で７万円〜）
→このケースはMacを買うしかないので、今後、真剣にIT業界を考えているなら
 Macを買うのをおすすめします。（スペックについては店頭で相談ください。）

・動画編集したい
→それなりにスペックが必要です。

どれも10数万円以上のコストがかかると思うので、
子どもの意志とお財布と相談になります。

目的はないが、一旦パソコンを与えたい（４万円以上）
→「小学生の子ども用ノートパソコン」などで検索してよさそうなものを選択してください。

### 経済的に余裕がない

こちらのケースも、目的を明確にできればよいかと思います。

・インターネット、動画を楽しみたい
→この場合　タブレットなどで十分だと思います。

・プログラマなどを目指す場合

## 将来　IT業界を目指している場合

IT業界も幅広いので、ざっくりどんな方向を目指すのかと予算で判断になるかと思います。

1つめのラインは、
２つ目のAndroidアプリを開発したい、、、このあたりが最低でも必要ラインかと思います、、、

### １つ目のライン(予算目安 中古で１.５万円〜)
<B>目的 マインクラフトをスムーズに楽しみたい</B>

マインクラフトシステム要件
CPU : Intel Core i3 もしくは AMD Athlon II (K10)
RAM : 4GB
GPU : NVIDIA GeForce 200 シリーズ もしくは AMD Radeon HD 5000 シリーズ以上

マインクラフトシステム要件下記参照
https://minecraft-ja.gamepedia.com/%E3%83%8F%E3%83%BC%E3%83%89%E3%82%A6%E3%82%A7%E3%82%A2%E8%A6%81%E4%BB%B6

<スペックの目安>
CPU Intel Core i3以上
メモリ 4GB以上
が必要スペックのようです。

中古で状態によりますが1.5万程度で売っているイメージです。

### 2つめのライン(予算目安 中古で１万円〜)
<B>目的 iPhoneアプリが作れなくても、Androidアプリを作成したい。</B>
(カクついてもいいのでマイクラをプレイしたい。)

Androidアプリを作成できるアプリケーション　Android studioが起動できるかが
分岐点になります。

Android studioのシステム要件
Microsoft® Windows® 7/8/10（32 ビットまたは 64 ビット）
3 GB 以上の RAM、8 GB を推奨、さらに Android エミュレータ用に 1 GB
https://developer.android.com/studio/?hl=ja

CPUについてふれていませんが、下記スペックであれば、動作遅いかもしれませんが動くと思われます。
<スペックの目安>
CPU core2
メモリ4GB

中古で状態によりますが1万程度で売っているイメージです。

### 3つめのライン(予算目安 中古で5千円〜)
・webでプログラミングを勉強したい

スクラッチで論理的な思考を鍛える
https://scratch.mit.edu/studios/1168062/

プロゲートなどで学習するのであれば、
そこまでスペックがいりませんが２つめのライン程度のスペックがあると良いかと思います。

例えばの学習サイト
https://prog-8.com/

<スペックの目安>
CPU core2
メモリ2GB

## まとめ

お年玉や、誕生日プレゼント等で、家族、親戚の支援があれば
新しいパソコンを買うのがよいと思います。

しかし、経済的な問題で、チャンスがなくなってしまうのはもったいないこと
だと思うので予算１万円以下、５０００円のパソコンを提供しで、
最低限のプログラミングの技術を身につけられるような
支援ができたらと思います。
Pythonで定周期で実行する方法と検証

# はじめに
定周期で実行されるプログラムは色々なシステムで実装されるが、上手に実装しないと意図した時間通りに実行されない。最近Pythonでプログラムの実装をする機会が多いので、Pythonで実行する方法をまとめる。実装の方法次第だが、下記のとおりである。

- [NG] sleepで待つ
- [NG] threadingでタイマーを使う
- [OK] 処理時間を考慮してthreadingとsleepを使う
- [OK] シグナルハンドラを利用する

# 方法
以降で1秒周期でプログラムを実行する方法についてまとめていく。なお、ヒストグラム作成のために出力した時間（N数）は1000個である。

## [NG] sleepによる待機
下記のプログラムに示すように、一定時間待つようにする。

```python
import time

for i in range(1000):
    print(time.time())
    time.sleep(1)
```
この方法だと、sleepで1秒待つものの、１周するごとに他の処理の時間が加算され、実質1秒周期にならない。実際、出力した時間の差分をとっていくと、次のヒストグラムのようになる。

![sleep-test.png](https://qiita-image-store.s3.amazonaws.com/0/93354/7f07ef53-da52-2e49-4df1-773712f9da0e.png)


## [NG] threadingでタイマーを使う
シーケンシャルに実行するには限界がありそうなので、別スレッドを立てて実行することを考える。そのために、定周期の最初で次の定周期用タイマーを定義し、以降で通常の処理を行う。

```python
import time
import threading

def scheduler():
    t = threading.Timer(1, scheduler)
    t.start()
    print(time.time())

t = threading.Thread(target = scheduler)
t.start()

time.sleep(1000)
```
その結果が下記である。sleepしていたときと同様で、結局スレッドを作成してタイマーかけるまでの時間分だけ、定周期が伸びてしまう。

![thread-test.png](https://qiita-image-store.s3.amazonaws.com/0/93354/dcf43338-efd8-8a11-6685-657c81b5877f.png)

## [OK] 処理時間を考慮してthreadingとsleepを使う
別スレッドをどんどん立てて行くことについては共通だが、途中の処理時間を考慮して、その分の補正を行う。今回は[別の記事](https://qiita.com/kurogelee/items/0e5fd8b6a1d1f169179a)のコードを例として使用する。

```python
import time
import threading

def worker():
    print(time.time())
    time.sleep(8)

def scheduler(interval, f, wait = True):
    base_time = time.time()
    next_time = 0
    while True:
        t = threading.Thread(target = f)
        t.start()
        if wait:
            t.join()
        next_time = ((base_time - time.time()) % interval) or interval
        time.sleep(next_time)

scheduler(1, worker, False)
```

schedulerの最後の引数をTrueにすると、前のスレッドが生存している場合、次のスレッドが作れない。Falseにすることで、並列処理をガンガン行えるようになる。これを使って、周期を確認してみた結果が次のとおりである。多少のばらつきはあるが、平均1秒で実行できるように見える。

![thread-dev-test.png](https://qiita-image-store.s3.amazonaws.com/0/93354/79b45c32-5be2-2a65-b7d6-3e4543a2f107.png)

## [OK] シグナルハンドラを利用する
※これはUnix系環境限定である
ここまではプログラム内で時刻を修正する方向で考えていたが、そもそももっと低レイヤーからの信号を使うことを考える。例えば、マイコンでは割り込みピンなどを利用して物理信号をトリガにすることもあるが、そんなイメージである。そのコードが下記のとおりである。

```python
import signal
import time

    
def scheduler(arg1, args2):
    print(time.time())

signal.signal(signal.SIGALRM, scheduler)
signal.setitimer(signal.ITIMER_REAL, 1, 1)

time.sleep(1000)
```
実行結果は次のとおりである。先のthreading+sleepと横軸のスケールは揃えているが、明らかに良い精度で1秒で定周期実行できていることがわかる。

![signal-test.png](https://qiita-image-store.s3.amazonaws.com/0/93354/fab4ce41-4596-5092-fc3a-cb491cf58277.png)

# まとめ
定周期は単純なsleepでは実現できない。ベストはシグナルハンドラを利用することで、それができなければ、プログラム内で処理時間を考慮した上で、次回の実行を予約するようにする。
ポンチ絵ジェネレータ

# 概要

自然文から以下のようなポンチ絵を自動で作成するプログラムを作成しました。自然文の解析には、StanfordCoreNLPを使いましたが、あんまり精度がよくないですね。今後の技術の進展に期待です。

![特許請求の範囲のポンチ絵.png](https://qiita-image-store.s3.amazonaws.com/0/119732/7153f90c-0a93-0b22-5142-8041c4e8fe3c.png)

# StanfordCoreNLPの設定と使い方
ソースコードは[StanfordCoreNLP](https://stanfordnlp.github.io/CoreNLP/ "StanfordCoreNLP") の公式ホームページからとってきます。
Javaで実装されたバッシュからインタラクティブに実行するプログラムでしたが、Pythonのプログラムに組み込みたかったので、Pythonのバインディングである[py-corenlp](https://github.com/smilli/py-corenlp "py-corenlp")を利用しました。py-corenlpはpipでインストールすることができます。


# 主語、述語、目的語のトリオの抽出

# PlantUMLを利用した可視化
npm と仲良くなりたかったので、小さい node package をつくって、require したり babel で import したり

npm と仲良くなりたかったので、小さいの作って戯れてみました。

小さいパッケージ作成はこちらの記事をやっただけです。とても良い記事でした、ありがとうございます。
https://medium.freecodecamp.org/how-to-make-a-beautiful-tiny-npm-package-and-publish-it-2881d4307f78

# まずは最小のパッケージを作ります

まず、npm のアカウント持って無い人は作ります。正直これが一番時間かかります。アイコンどうしようってなります。Gravatar アカウントが無いので困ります。

Sign up
https://www.npmjs.com/signup

アカウントができたら、あとは２つのファイルを書いて、publish したら終わります。

```bash
$ touch package.json
$ touch index.js
```

```json:package.json
{
	"name": "@mochizukikotaro/tiny",
	"version": "2.0.0",
	"description": "Remove all spaces",
	"main": "index.js"
}
```

```js:index.js
module.exports = function tiny(string) {
  if (typeof string != "string") throw new TypeError("Tiny wants a string!");
  return string.replace(/\s/g, "");
}
```

文字列を引数に渡すと、全てのスペースを削除する function です。

```bash
$ npm adduser
// or 
$ npm login
$ npm publish --access=public
```

# つかってみる in node

```bash
$ npm i @mochizukikotaro/tiny
$ node
> const tiny = require("@mochizukikotaro/tiny")
undefined
> tiny("a b")
'ab'
```

無事動きました。

# import してみる

node では import が使えませんので以下のようになります。

```bash
$ node
> import tiny from "@mochizukikotaro/tiny"
import tiny from "@mochizukikotaro/tiny"
       ^^^^

SyntaxError: Unexpected identifier
```

babel を使ってみます。
https://babeljs.io/setup#installation

```bash
$ npm init
$ npm install --save-dev @babel/core @babel/cli
$ touch .babelrc
$ touch piyo.js
```
```json:.babelrc
{
  "presets": ["@babel/preset-env"]
}
```
```js:piyo.js
import tiny from "@mochizukikotaro/tiny"
console.log(tiny("a b"))
```

babel でトランスパイラすると下のようになります。

```bash
$ babel piyo.js
"use strict";

var _tiny = _interopRequireDefault(require("@mochizukikotaro/tiny"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

console.log((0, _tiny.default)("a b"));
```

```bash
// アウトプットファイルが欲しい場合
$ babel piyo.js -d output_dir
```

これで得られるトランスパイラされたコードはもちろん `node output_dir/piyo.js` などで動きます。

# npx babel-node してみる

`import` を含んだ `piyo.js` を 

```
$ node piyo.js
```
のように動かしてみたいと思います。

https://babeljs.io/docs/en/babel-node

```bash
$ npm i --save-dev @babel/node
$ npx babel-node piyo.js
ab
```

動きました。

少しずつ仲良くなっていきたいと思います。TypeScript からも呼んでみたいです。
Vue.jsの環境構築

# はじめに

Vue.jsを用いたWebアプリケーションの開発を始めるにあたり必要な手順を記載します。

# 対象

- Vue.jsに興味はあるが触れたことがない人
- フロントエンドの開発全般に知見があまりない人
 
# 環境
- MacOS Mojave 10.14.1

## Vue.jsをインストールする
まず、homebrewを利用してnode.jsのパッケージを管理するツールであるnodebrewをインストールします。
ホームディレクトリに`.nodebrew`ディレクトリができているのでパスを設定して有効化します。
すると、npmコマンドが使えるようになっているので、関連するモジュールをインストールします。
なお、`-g`オプションをつけると、インストールされたパッケージがどのディレクトリにいても有効化されます。

```
$ brew install nodebrew
$ echo "PATH=$HOME/.nodebrew/current/bin:$PATH" >> ~/.bashrc
$ source ~/.bashrc
$ npm install -g @vue/cli@3.0.1 @vue/cli-init@3.0.1 @vue/cli-service-global@3.0.1
```

また、上記ではvue.jsに関連するパッケージのバージョンを指定していますが、以下のように指定なしでも問題はありません。

```
$ npm install -g vue-cli
```

## サーバーを立ち上げる

vueコマンドでアプリケーションディレクトリを作り、ディレクトリに入ります。
その後、`npm run`コマンドでサーバーを立ち上げます。

```
$ vue init webpack your_app
$ cd your_app
$ npm run dev
```
最初のコマンドで指定している、`webpack`はVue.jsにおけるディレクトリのテンプレートを表しています。
`webpack`を指定すると様々なツールが自動的に生成されるので大抵の場合はこれを指定すれば問題ないでしょう。

起動すると、コマンドライン上に立ち上がったWebサーバーのURLが表示されます。(ほとんどの場合http://localhost:8080)
URLにアクセスして、Vue.jsの初期画面が表示されれば成功です。

# 利用するパッケージを追加する
必要なパッケージがあれば、適宜インストールします。
`-g`オプションをつけない場合は自分がいるアプリケーションディレクトリのみにパッケージがインストールされます。
アプリケーション特有のパッケージをインストールする場合は`-g`オプションなしでインストールすることを推奨します。

```
$ npm install --save axios vuex es6-promise
$ npm install --save-dev eslint-plugin-vue@4.7.1 @vue/test-utils@1.0.0-beta.24
```

## 終わりに
以上でVue.jsの環境構築は完了です。
Webアプリケーションの開発環境構築に関して知見がない状態で書いているので誤りがあればご指摘ください。
WP Pusher を使ってみる

とある Slack にて「wppusher を推したい」という声があって、何ぞそれと思って調べて使ってみる。

wordpress のインストールはここに書きません。

なお、この文章は、2019/01/02 前後で実際に作業した情報を元に書いています。gitlab は頻繁に機能追加をするので、翻訳が追いついていなかったり、設定画面が移動していたりしますので、ちょっとだけ注意してください。

- [From Git to WordPress -- WP Pusher](https://wppusher.com/)

## WP Pusher とは

wordpress のプラグインやテンプレートを作成/変更をした時に `git push` をしますが(するよね？)、 `git push` した時にインストールしている wordpress のサイトが自動更新をするプラグインです。

これ使えば ftp/sftp とか使わなくてもよくなるので、サーバ管理者としては ftp アカウントや ssh ログインできるアカウントを設定しなくても良いんじゃねと思ったのがこれを書くきっかけ。

料金プランはライセンス制であり、public repository *だけ* を使う分には無料、プライベートリポジトリを使った 5つまでのサイトを管理するなら \$99/y、プライベートリポジトリを使った20までのサイトを管理するなら \$199/y といった感じです。

こちらの試した構成は、リポジトリホスティングを Gitlab.com、動くテンプレートのソースコードをリポジトリに一度は push 済み、wordpress は自前で環境構築したところです。

## 前準備

1. リポジトリURLは `https://gitlab.com/at_yasu/worldpress-template` としてあり、すでにある程度出来上がっているソースがあるものとします。リポジトリの公開設定は `public repository` にしています。別に隠すものでもないし。

今回は public repository なので private token の設定はしません。

## インストールと設定

1. [wppusher](https://wppusher.com/#pricing) のページからプラグインファイルをダウンロードして、wordpress の plugin として、ダウンロードした zip ファイルをアップロードします。

	ユーザ登録などが無い理由はよくわからん。プライベートリポジトリを使ったらメール通知で来るんやろか。

### Install New Theme

1. 左のメニューから、`WP Pusher` → `Install Theme` をクリック。

	ここにテーマのリポジトリ設定を書いていきます。

	1. `Repository host` を `GitLab`
	1. `Theme repository` を 設定したリポジトリの名前にします。この場合だと、 `at_yasu/worldpress-template` にします。
	1. `Push-to-Deploy` にチェックを入れます。

設定ができたら、 `Install Theme` でインストールを開始します。インストールが成功したら、多分「成功しました」だけを表示していたと思います (画面遷移がねーから、失敗したと思い、更新を二回ほどやってしまい、本来何書いてたか不明)。

インストールができたかどうかの確認は左メニューから `WP Pusher` → `Themes` をクリックすれば、`WP Pusher` でインストールした Themeの一覧が見れます。

これで `WP Pusher` 経由でテンプレートが入りしましたので、「外観」 からインストールしたテーマを有効化すれば、テーマのインストールが終了です。

### Gitlab に push url を設定する

`git push` した時に、gitlab 側でpush されてきたことを通知するためイベントを、wordpress 側に通知させるための仕掛けを設定します。

1. 左のメニューから、`WP Pusher` → `Themes` をクリック
2. インストールしたテーマに `Show Push-to-Deploy URL` と青文字の文字をクリックして、下に表示したURLをコピーします。
3. Gitlab のリポジトリー画面から、`設定` → `インテグレーション` をクリックして、インテグレーションの設定画面を表示する。

	表示された入力項目に、それぞれの設定をする。

	1. URL を `Show Push-to-Deploy URL` で表示された `URL` をペーストする。
	2. Trigger は `Push events` のみチェックをいれる。 `Branch name or...` の入力フォームは空白のママ。
	2. `SSL Vertification` は任意。SSL 設定が済んでいるサイトなら、チェックを入れる。

	上記３つの設定が完了したら、`Add Webhook` のボタンを押してイベントを追加する。追加の確認は `Add webhook` ボタンの下に一覧として出る。

# 以上

ここまでくれば `git push` をしたら、変更分が自動更新されるはずです。

## これからの作業の注意点

1. `master` に push をしたら全てのサイトが更新されます。多人数で作業するときはプルリクエストの開発プロセスにして、少しばかり慎重になる事をオススメします。

	1. 一人プルリクも、自分の作業日記みたいになるので、悪くないですよ。
	2. 多人数だけど、皆 master へプッシュしてきやがるなら、デプロイ専用のリポジトリを作り、wordpress の `wppusher` の `install theme` 画面にある `Repository branch` をそのデプロイ専用のリポジトリにすればいいと思います。

# 参考

1. [Setting Up a Plugin or Theme from GitLab](https://docs.wppusher.com/article/19-setting-up-a-plugin-or-theme-on-gitlab)
1. [プルリクエストとは？ -- サルでもわかる Git 入門](https://backlog.com/ja/git-tutorial/pull-request/pull-request1_1.html)
SteamのゲームサーバーをGCEプリエンプティブVMとDockerで立てる

## はじめに
年末年始に遊ぶ用に、SteamのゲームサーバーをGCP上に構築しました。
めでたくGoogle Compute Engineのプリエンプティブインスタンス上に
Dockerで構築して、なんとなく運用できてるので紹介したく投稿してみます。

ちなみにゲームは[7 Days To Die](https://store.steampowered.com/app/251570/7_Days_to_Die/)というゾンビのゲームです。

## 前提
プリエンプティブインスタンスは格安でGoogleのComputeEngineを利用できるオプションですが、

- 突然インスタンスが停止するリスクがある。
- １度の起動で最大24時間しか実行できない。
- 時々利用できないこともある。（有限のリソースを格安で借りるイメージのため）
  - (*) 今のところ起動ができないことは一度も無し

という特徴があります。（それ以外は通常のCompute Engineとほぼ同じ）

なので、`常時起動しておく必要はなくて、やりたい時だけサーバーを立ち上げられればOK！`という人に向いています。

## 構築
### やりたかったこと
- 長期間プレイせず、サーバーの立ち上げ方を忘れてしまうことがあるので構築手順をコード化したい。
- データはインスタンスの外にバックアップしたい。
    - プリエンプティブVMが突然シャットダウンされて、万が一セーブが間に合わなくても大丈夫なように。
    - しばらくプレイしない時はインスタンスも、ストレージも消しておきたい。

以上の理由から、Dockerで構築し、データはGCSに定期バックアップするという構成にしました。


### 構築方法
こちらのGitHubリポジトリにソースやREADMEをまとめています。多少コードが汚い箇所ありますが、、、動いています！
https://github.com/suzukenz/7d2d-server-docker
（せっかくQiitaに記事を書くのにGitHub参照ですみません。。。）

- ゲームサーバーコンテナとバックアップ用コンテナを別々に作成
- データボリュームにデータを保存して、バックアップ用コンテナからGCSに定期バックアップ（Syncするだけ）
   - バックアップ不要なら、ゲームサーバーコンテナだけ起動する
- 実行時にサーバにデータがなかったら、GCSからダウンロード（逆Sync）

という構成です。

### ハマったところ
やはりハマったのはDocker周りでした。上記のソースコードでは解決している（諦めている）ので興味ない人は読まなくて大丈夫です。

#### データボリュームをDockerコンテナにマウントした時のPermission
当初はデータボリュームではなくホストのディレクトリを直接マウントしてゲームデータのディレクトリにしようとしたが、ディレクトリのPermissionの理由で、コンテナからアクセスできなくなったりしてしまった。

- 解決しようとするとコードが複雑になってしまう。
- ログなどを簡単に見たい（コンテナへのアクセスを省きたい）ためそうしたかったが、GCSにデータを上げればブラウザから見れるのでまあいいやと思ってデータボリュームにした。

#### Container-Optimized OSは難しかった
[Container-Optimized OS](https://cloud.google.com/container-optimized-os/docs/?hl=ja) を使えばインスタンスにDockerを準備する手間が省けるじゃん！！
と思いましたが、環境が色々と特殊になってしまいそのために書くことが増えるので諦めてDebianでインスタンスを立てました。

具体的には、ディスクが基本的にはnon-executableなので`./hogehoge.sh`とかができない等。

代わりに、Debian上でDockerとdocker-composeを一発インストールするスクリプトを将来忘れないために置いておきました。

## 結果
なんとなくうまく運用できています。
インスタンスが突然終了することもありましたが、Dockerコンテナが終了シグナルを受信して、しっかりゲームデータはセーブされていました。
また、インスタンスを一回削除して作り直した時には、自動でGCSからデータをダウンロードしてきて途中のデータからゲームを続行できました。

以下に、今回の良かった点などをまとめておきます。

### Compute Engineでやるメリット
- クラウドなので、自分が家にいなくてもコンソールにアクセスできればサーバーを起動できる。
- インスタンスのスケーリングが超簡単。（スペックを上げるも下げるも自由！）

### Dockerでやるメリット
- ローカル（MacOS）で簡単にテストできる。
- インスタンスが停止させられてしまう時の擬似テストもしやすい。
    - DockerコンテナをKillしてやればよい
- 今回一回作ったので、おそらく今後違うゲームにも流用できる。（★これが一番嬉しい！）
    - 特にゲームをインストールする箇所なんかはAppIDを変えるだけでいけるはず。 

### 今後やりたいこと
- サーバーがReadyになったらDiscordなどに通知したい
    - これはコンテナを分けるか、完全に独立した監視用の何かを作るなど、別サービスとしてやりたい。優先度高
- GKEでもプリエンプティブVMが使えるのでやってみたい
    - ただ、個人でやりたい範囲だとコンテナのスケーリングなどのGKEのメリットは不要なので、やるとしたら完全に趣味になりそう。 

## 終わり
以上、この冬休みの自由研究のまとめでした。

ちなみに、プリエンプティブインスタンスでサーバーを立ててみようと思ったのはこちらの記事を読んだのがきっかけでした。どうもありがとうございます。
[7 Days to Dieサーバをスポットインスタンスで構築して激安運用を目指す](https://qiita.com/3x10ce/items/7a6ba480b4b901b93e0d)

7DTDに関しては今後も細く長くやっていくと思うのでリポジトリは時々メンテしていきます。
この仕組を流用して他のゲームのサーバ立ても今後やっていくと思います。（Arkとか、Citadelとか・・・。）
他の方も、これをそのまま使うなり、アレンジするなりと、参考になれば幸いです。
@Twitter #UI #UX "pinned"  feature placed user First view over 50%

# @Twitter #UI #UX "pinned"  feature placed user First view over 50%

- why pinned feature is great?
- that reason is percentage of user display
- e.g iphone user look pinned tweet when access to another account user page

![image](https://user-images.githubusercontent.com/13635059/50582020-7f047480-0ea2-11e9-8ae0-484d596f175f.png)

# LEts think

- First view is soooooooooooooooooooooooooooooo IMPORTANT!!!!!!!!!!!!!!!!!!!!!!!!
- Area percentage of user display viewing hunt users ATENTION
- All devices and services applications are ultimately PAY ATTENTION tool dont you think?

---

https://github.com/YumaInaura/YumaInaura/issues

https://github.com/YumaInaura/YumaInaura/issues/181








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
ESP32でNeoPixelでハマった備忘録

# はじめに

Arduino UnoでNeoPixelは簡単に動いた。
でもスペック足りていない感じだったので、
ESP32でも動かせるかどうか試した備忘録です。

# 同じプログラムを動かそうとすると動かない

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/6e78f6f5-ee64-7dfd-2474-4664f09ec174.png)

どうもエラーが起きているが様子がわからない。

## シンプルなプログラムで試す

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/b09b1373-0bb8-6e62-e9cf-0c5a08ad05f2.png)

ExampleのGetChipIDのコードにNeoPixelの最初の方のコードを入れたところ、
やっぱり発生する。

Adafruit_NeoPixelの初期化が悪いのかな？

# PINを6から7に変えてみる

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/2618f31a-b787-71d0-2f34-76bd6673b487.png)

あれ、エラーでないな。PIN6がダメなのかな？
（そんなことあるのだろうか・・・？）

んー。とよくみると

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/fac14e68-fac6-2952-f050-d3ec5c46932a.png)

あ、これ、7じゃなくて、17じゃん。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/2aa78315-c236-7147-0aec-4c61e06bc369.png)

うごいた!!

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ca" dir="ltr">ESP32でNeoPixel <a href="https://t.co/mcIFIDHWC3">pic.twitter.com/mcIFIDHWC3</a></p>&mdash; tatmos (@tatmos) <a href="https://twitter.com/tatmos/status/1080347627982446592?ref_src=twsrc%5Etfw">2019年1月2日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>




でもちょっと、荒ぶってますね・・・

showの前にdelay(1)を入れると良いらしい。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/e9bca8d3-9930-c73e-a581-4d6f336613d4.png)


<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">showの前にdelay(1)を入れたところ <a href="https://t.co/x4gZ4TcYVv">pic.twitter.com/x4gZ4TcYVv</a></p>&mdash; tatmos (@tatmos) <a href="https://twitter.com/tatmos/status/1080348199670341632?ref_src=twsrc%5Etfw">2019年1月2日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


# まとめ
Arduinoとまったく同じコードが動くわけではないということがわかった。
ハード的に違うものね・・・

# 追記
Arduinoではadafruit_NeoPixelライブラリを使っていたけど、
ESP32で使おうとするといくつかのLEDが違う色が出てしまう感じだった。

で、いろいろ探してみると
ESP32では、FastLEDを使うと良さそう。
Expoでadmobを組み込んだ時の超個人的メモ

Expoにadmobがついているので試してみた。
サードパーティーライブラリに頼らなくても広告を載せれるのはすごい便利。

```js
// App.js
import React from "react"
import { Button, StyleSheet, View } from "react-native"
import { AdMobBanner,PublisherBanner, AdMobInterstitial, AdMobRewarded } from "expo"
export default class App extends React.Component {
  
  bannerError() {
    console.log("An error")
  }
  
  async showInterstitial() {
    AdMobInterstitial.setAdUnitID('ca-app-pub-3940256099942544/1033173712') // Test ID, Replace with your-admob-unit-id
    AdMobInterstitial.setTestDeviceID('EMULATOR')
    await AdMobInterstitial.requestAdAsync()
    await AdMobInterstitial.showAdAsync()
  }
  
  async showRewarded() {
    AdMobRewarded.setAdUnitID('ca-app-pub-3940256099942544/5224354917') // Test ID, Replace with your-admob-unit-id
    AdMobRewarded.setTestDeviceID('EMULATOR')
    await AdMobRewarded.requestAdAsync()
    await AdMobRewarded.showAdAsync()
  }
  
  render() {
    return (
      <View style={styles.container}>
        <Button
          title="Interstitialバナー クリックで遷移"
          onPress={this.showInterstitial}
          containerViewStyle={styles.interstitialBanner}
        />
        <Button
          title="Rewardedバナー 動画つき"
          onPress={this.showRewarded}
          containerViewStyle={styles.rewardedBanner}
        />
        <AdMobBanner
          style={styles.bottomBanner}
          bannerSize="smartBannerLandscape"
          adUnitID="ca-app-pub-3940256099942544/6300978111"
          // Test ID, Replace with your-admob-unit-id
          testDeviceID="EMULATOR"
          didFailToReceiveAdWithError={this.bannerError}
        />
        {/* DFP バナーを表示。 DEPとは条件を詳細にカスタマイズできるバナー */}
        <PublisherBanner
          style={styles.PublisherBanner}
          bannerSize="smartBannerPortrait"
          adUnitID="ca-app-pub-3940256099942544/6300978111" // Test ID, Replace with your-admob-unit-id
          testDeviceID="EMULATOR"
          onDidFailToReceiveAdWithError={this.bannerError}
          onAdMobDispatchAppEvent={this.adMobEvent}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  rewardedBanner: {
    width: "100%",
    marginLeft: 0
  },
  interstitialBanner: {
    width: "100%",
    marginLeft: 0
  },
  bottomBanner: {
    position: "absolute",
    bottom: 0
  },
  PublisherBanner: {
    position: "absolute",
    bottom: 80
  },
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
})
```
<img width="296" alt="スクリーンショット 2019-01-02 13.40.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/183835/e555ef4b-778e-b123-8aac-f987dea6ffa1.png">


ちゃんとadmobが表示されている。
素晴らしい。
【自分用】Goメモ　GORMを使ってビューにDBからカラムを表示

#### GoでGorm使ってDBからカラムの中身を出力したい
メモ用

ORMはGorm、ルーティングはGinを使用

```main.go
import(
  "fmt"
  //data内に構造体を設定
  "./data"
  "github.com/gin-gonic/gin"
  "github.com/jinzhu/gorm"
  _"github.com/go-sql-driver/mysql"
)

func get_messages() []data.Message {
  //mysqlに対してアクセス
  db, err := gorm.Open("mysql", "root@/chatapp?charset=utf8&parseTime=True&loc=Local")
  //エラー処理
  if err != nil {
    fmt.Println(err)
  }
  defer db.Close()
  var messages []data.Message
  //FindメソッドでDBの中身を取得
  db.Find(&messages)
  return messages
}

func main() {
  //ginの記述はここから
  r := gin.Default()
  //templatesフォルダ配下のファイルを読む
  r.LoadHTMLGlob("templates/*")
  
  r.GET("/", func(c *gin.Context) {
  messages = get_messages()
  c.HTML(200, "index.html", gin.H{
    //上記のmessagesをindex.html内で使用できるように設定
    "messages": messages,
    })
  })
}
```

ビューファイル内では下記の記述でDBの内容を繰り返して表示させることができる。
※一部抜粋

```index.html

{{ range .messages }}
<div class="news-feed">
  <div class="news-feed-name">
    <p>{{.Name}}</p>
  </div>
  <div class="news-feed-text">
    <p>{{.Text}}</p>
  </div>
</div>
{{ end }}

```

{{ range .messages }} このmessagesがmain.goから渡したもの。
{{ end }} ここまで繰り返しが行われる。
{{ .Name }} nameカラムの中身が表示される。
{{ .Text }} textカラムの中身が表示される。
range から　end まで囲まれた部分が要素の数だけ繰り返して表示がされる。

Rubyをやったことがある人でいう、each文のイメージ。


#### 以下の記事を参考にさせていただきました。ありがとうございます。
https://qiita.com/Anharu/items/ce644c521a4d52fafb7e
↑すごく、わかりやすいです。
http://doc.gorm.io/crud.html#query
https://godoc.org/github.com/gin-gonic/gin

フレームワークやライブラリの中を読むみたいなのもやりたいなぁ
Kerasで作成した学習モデルにPNGデコードを組み込みGoogle Cloud MLオンライン予測の1.5MB制限を回避する

# Cloud ML オンライン予測のリクエスト容量制限

Google Cloud Machine Learningのオンライン予測はJSONを入力として予測を行います。しかしその容量は1.5MBまでに制限されています。

例えば400×400のカラー画像を入力するMobileNetを使用した学習モデルに対し、

```python:model.py
import tensorflow as tf
model = tf.keras.applications.MobileNet(
    input_shape=(400,400,3),
    alpha=0.5,weights=None, classes=101)
```

予測リクエストを作成すると、

```python:request.py
from googleapiclient import discovery
import cv2

service = discovery.build('ml','v1')
name = "projects/%s/models/%s/versions/%s" %
    ("your_project_id", "your_model_name","version")
path = "input.jpg" # 400×400カラー
x = cv2.imread(path,cv2.IMREAD_COLOR)
obj = {'instances' : [{'input' : x.tolist()}]}
response = service.projects().predict(name=name,body=obj).execute()
```

このようなエラーが発生します。

```
"Request payload size exceeds the limit: 1572864 bytes."
```

入力が生のRGB形式だとPOSTしているJSONがこのようになり、400×400カラーだと2.3MBになってしまいます。

```
{"instances": [{"input": [[[3, 14, 41], [3, 14, 41], [4, 15, 42],  ...
```

# PNGデコードをモデルに組み込む

この問題を回避するためにPNGデコードをモデルに組み込みます。

```python:model.py
import tensorflow as tf

def decode(image_str_tensor):
    "画像1枚分のPNGデータをデコードする関数"
    image_str_tensor = tf.reshape(image_str_tensor,[])
    image = tf.image.decode_png(image_str_tensor,channels=3)
    x = tf.cast(image,tf.float32)
    return x

def decode_layer(x):
    "PNGデータをデコードするラムダレイヤーの関数"
    x = tf.map_fn(decode, x,dtype=tf.float32)
    return x

# PNGデータをデコードするモデル
decode_model = tf.keras.models.Sequential()
decode_model.add(tf.keras.layers.Lambda(decode_layer,
    input_shape=[None],dtype=tf.string))
# 分類するモデル
mobilenet = tf.keras.applications.MobileNet(
    input_shape=(400,400,3),
    alpha=0.5,weights=None, classes=101)
# 2つをつなぐ
model = tf.keras.models.Sequential([decode_model,mobilenet])
```

tf.image.decode_png関数は画像1枚分のデコードしか対応していないため、tf.map_fn関数でバッチを1枚ずつの処理に分解しています。モデルの入力はstring型の0階テンソルですが、Kerasの仕様で0階テンソル入力を設定できないので、1階テンソル入力のモデルとして、ラムダレイヤーの中で０階テンソルに変換してからtf.image.decode_png関数に渡してます。

PNGデータをデコードするモデルとMobileNetで分類するモデルをtf.keras.models.Sequentialクラスのコンストラクタにリストで渡すことで２つを繋いだモデルを作成することができます。

PNG入力のモデルをデプロイしましたら、PNGデータをPOSTします。

```python:request.py
from googleapiclient import discovery
import cv2
import base64

service = discovery.build('ml','v1')
name = "projects/%s/models/%s/versions/%s" %
    ("your_project_id", "your_model_name","version")
path = "input.jpg"
x = cv2.imread(path,cv2.IMREAD_COLOR)
ret,x = cv2.imencode(".png",x)
x = x.tostring()
obj = {'instances' : [{'input' : {"b64": base64.b64encode(x).decode('utf-8')}}]}
response = service.projects().predict(name=name,body=obj).execute()
```

入力がBase64エンコードされたPNGデータになりましたので、JSONのサイズは300KBぐらいに減り、1.5MB制限を回避できました。

# 全体ソースコード

この考えで作成した[Food-101](https://www.vision.ee.ethz.ch/datasets_extra/food-101/)データセットによる分類をGoogle Cloud Machine Learningで実行するプロジェクトは[こちら](https://github.com/tfkeras/food101-cloudml)になります。
english - Gmailの例 - SNS等で複数アカウント使う時は どんな名前をつける？パズルでパターン組み合わせのススメ 


# If your name is Alice Liddle

# main

- alice.liddle@example.com

# name reversed

- liddle.alice@example.com

# complexed

- alice.alice.liddle@example.com
- alice.alice.alice@example.com
- alice.liddle.alice@example.com
- liddle.alice.lidle@example.com
- liddle.liddle.alice@example.com
- liddle.liddle.alice@example.com

and more...

# many account patter born in the world

you never use alice.liddle2 or 3 name

# btw

Gmail support alias or dotted adress
if you want then lets use

e.g alice.li.ddle@example.com alice.liddle+somewords@example.com


---

https://github.com/YumaInaura/YumaInaura/issues

https://github.com/YumaInaura/YumaInaura/issues/177








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Google検索せずにサービスロゴを思い出せるのが成功パターン  @github @twitter @docker @golang @php 


- 成功しているロゴはGoogle検索しなくても思い出せるやつ
- 思い出せないやつは成功しているとは言えないんじゃないか
- GolangのGoPherくんは公式ロゴじゃないらしい、公式ロゴは誰も知らない

# English

What is the rememberable succeeded logo design? @github @twitter @docker @golang @php 

# its no googling remembering logo

# e.g Docker


![image](https://user-images.githubusercontent.com/13635059/50580878-7eb2ac00-0e97-11e9-84f2-231c468a63b7.png)

# Github

easy to remember for engineers
but some part of us dont know he is black octopus..
i think maybe its best design but we love it
 
![image](https://user-images.githubusercontent.com/13635059/50580920-eff25f00-0e97-11e9-8823-4a52708feae1.png)

# PErl

i use perl 10 years but unable to remember its

![image](https://user-images.githubusercontent.com/13635059/50580939-27610b80-0e98-11e9-930d-8c025c7f25a5.png)

# PHP 

super simple but its not logo i think...
unable to remembering as logo image

![image](https://user-images.githubusercontent.com/13635059/50580952-3a73db80-0e98-11e9-910b-94ddcb0fa09e.png)


# Ruby

![image](https://user-images.githubusercontent.com/13635059/50580876-70649000-0e97-11e9-9819-578083908337.png)

Perfect

# Rails

umm similar to you? 

![image](https://user-images.githubusercontent.com/13635059/50580904-c802fb80-0e97-11e9-9322-41da67286ade.png)


# Twitter

https://twitter.com/twitter

![image](https://user-images.githubusercontent.com/13635059/50580874-6773be80-0e97-11e9-88ae-16c9c53bdfeb.png)

# python 

i m hard to imazine logo
i remember some yellow and blue color used

![image](https://user-images.githubusercontent.com/13635059/50580917-e36e0680-0e97-11e9-8756-2824de5f4a2e.png)



# golang

do you know formal golang log? 
i did not know
gopher is loving chanracter we love

![image](https://user-images.githubusercontent.com/13635059/50580887-99852080-0e97-11e9-8138-d7bfe81993d8.png)
golang log is not success pattern but i think better is gopher become formal log of golang

User fav is justice!
---

https://github.com/YumaInaura/YumaInaura/issues

https://github.com/YumaInaura/YumaInaura/issues/176











<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
php-master-changes 2019-01-01

今日は openssl のテスト用証明書の再生成、gd で 1bpp の BMP を開くのに失敗する場合がある問題の修正があった！

# 2019-01-01
## kamazee: Regenerate certs for openssl tests
- https://github.com/php/php-src/commit/687dad3674e9af12cec914bdc250a157680076ca
- [7.2~]
- ext/openssl のテスト用に証明書を再生成
- [PR:3728](https://github.com/php/php-src/pull/3728) のマージ
- 証明書の期限切れ対策では [PR:3698](https://github.com/php/php-src/pull/3698) でオンザフライで証明書を生成する修正案が出ているが、レビュアーの時間がとれずまだレビューが済んでいない
- ひとまず期限切れ対策で再生成したのを入れた形
- internals での議論は[こっち](https://externals.io/message/103535)
- テストのコメントに証明書再生成の手順が追記されてる

## cmb69: Fix [#77391](https://bugs.php.net/bug.php?id=77391): 1bpp BMPs may fail to be loaded
- https://github.com/php/php-src/commit/b0cfa28d6d4e6f7855093b4fb66ccf3a2d07660e
- [7.2~]
- ext/gd で、1bpp の BMP を開くのに失敗する問題の修正
- [上流の修正](https://github.com/libgd/libgd/commit/d0859134fcbd8817f87895bd1cb158096568a7a2) のバックポート
- 10px 幅など特定の画像幅の処理で失敗する
「数字を読み取る」ための情報収集

- [7セグメントLEDを読む](https://peta.okechan.net/blog/archives/1116)
- [人工知能](http://d.hatena.ne.jp/shu223/20160105/1451952796)
- [数独](http://www.cuspy.org/diary/2012-06-29/)
- [TESSERACTの学習方法](https://www.kunihikokaneko.com/dblab/licenseplate/recog.html)
- [ラズパイ](https://www.slideshare.net/knowcom/iot-ml-seizou)
- [光学者](http://retrofocus28.blogspot.com/2014/06/scikit-learn1.html)
- [OpenCVいろいろ](https://career.levtech.jp/guide/knowhow/article/71/)
- [OCR_py](http://73spica.tech/blog/tesseract_for_python/)
- [GitHub](https://github.com/tesseract-ocr/tesseract)
- [いかるが](http://irukanobox.blogspot.com/2017/10/raspberry-piocr.html)
- [ラズパイにtesseract](http://www.neko.ne.jp/~freewing/raspberry_pi/raspberry_pi_3_ocr_tesseract/)
デバイスシャドウの実装 (Wio LTE + SORACOM Beam)

[デバイスシャドウのベストプラクティス](https://qiita.com/ma2shita/items/a330f75297c919a69f7b)を実装しました。

## 構成

今回使ったデバイスは [Wio LTE JP Version](https://soracom.jp/products/wio_lte/) という、マイコン＋LTEモデムが搭載された、IoTプロトタイプ向けデバイスです。
LTEモデムがついているのでIoTプロダクトに向いているのですが [AWS IoT device SDK](https://docs.aws.amazon.com/ja_jp/iot/latest/developerguide/iot-sdks.html) が対応していません。そのため MQTTS 実装を自力でやる必要があるのですが、そこを [SORACOM Beam](https://soracom.jp/services/beam/) で肩代わりしています。

![](https://docs.google.com/drawings/d/e/2PACX-1vSMh5dXMD0G6m__htChRa0qUJ9mFW9FFSLyFJSOO3mJ2Kb-vtP32EcXs0ihoLaBQ0Zzfe1J_Eh7PHe_/pub?w=779&h=201)

SORACOM Beam は以下のような時に使います;

* TLS 実装が面倒、もしくはそもそも TLS が使えないようなデバイス
* 証明書の更新など運用面の考慮

## 実装

https://gist.github.com/ma2shita/5ed0e066975b3715f0f326bc0513a12d に掲載しています。MIT ライセンスです。

センサーデバイスを D38 に取り付けた想定でサンプルも記載しています。シャドウでは `d38` というキーで扱っています。

### 利用の注意点

* **IMPL.;** と書いてある4つのポイントがカスタマイズ位置です。
* SORACOM Air メタデータサービスを有効にすると `awsiotcore_thing_name` というキーの値を AWS IoT Core の ThingName として利用します。メタデータサービスが使えない場合は SIM の IMSI が ThingName になります。
* [ArduinoJson](https://github.com/bblanchon/ArduinoJson) に依存しまくってます。5.x 系を使っています。
* PubSubClient は公式から [fork したライブラリ](https://github.com/SeeedJP/pubsubclient)を使っています。これは MQTT のペイロードサイズを大きくしていることと、Wio LTE ライブラリが PubSubClient 2.7 以上では動かないためです。

### 解説

[実装すべき内容3点](https://qiita.com/ma2shita/items/a330f75297c919a69f7b#%E5%AE%9F%E8%A3%85%E3%81%99%E3%81%B9%E3%81%8D%E5%86%85%E5%AE%B93%E7%82%B9)が実装済みです。

* Reporter
    * [`get_current_state()`](https://gist.github.com/ma2shita/5ed0e066975b3715f0f326bc0513a12d#file-awsiotcore-deviceshadow_via_soracom-beam-ino-L172)
    * [`report_current_state()`](https://gist.github.com/ma2shita/5ed0e066975b3715f0f326bc0513a12d#file-awsiotcore-deviceshadow_via_soracom-beam-ino-L183)
* Updator と Restore
    * [`callback()`](https://gist.github.com/ma2shita/5ed0e066975b3715f0f326bc0513a12d#file-awsiotcore-deviceshadow_via_soracom-beam-ino-L106)
    * [`apply()`](https://gist.github.com/ma2shita/5ed0e066975b3715f0f326bc0513a12d#file-awsiotcore-deviceshadow_via_soracom-beam-ino-L24)

挙動を動画にまとめました。

[![Behavior of Device shadow (using AWS IoT Core)](http://img.youtube.com/vi/jFJ6C_YqKDw/0.jpg)](http://www.youtube.com/watch?v=jFJ6C_YqKDw)

再接続処理も実装済みです。

* [`connection_check_and_reconnect()`](https://gist.github.com/ma2shita/5ed0e066975b3715f0f326bc0513a12d#file-awsiotcore-deviceshadow_via_soracom-beam-ino-L163)

こちらも以下のような挙動になります。

[![MQTT reconnect demo](http://img.youtube.com/vi/yWFiSdX5E6g/0.jpg)](http://www.youtube.com/watch?v=yWFiSdX5E6g)

## あとがき

やっと全部出し切れた。

EoT
[書籍]たった2日でマスターできるiPhoneアプリ開発集中講座で「はまった」点と解決方法【1日目】


　書籍「[たった2日でマスターできるiPhoneアプリ開発集中講座 Xcode 10　Swift 4.2対応](http://www.socym.co.jp/book/1187)」を読んでiPhoneアプリ開発を学んでいます。2日でマスターできると言っていますが、私は、1日目分をやるのにすでに１週間以上かかってしまいました。以前、Objective-CでiPhoneアプリ開発に挑戦したことがあるのですが、そのときには難しすぎて挫折していまいました。それに比べると、今回初めてSwiftによるアプリ作成に挑戦したのですが、言語が変わったせいか、あるいは本の解説が良いせいか、とても分かりやすくなっていてびっくりしました。
　このメモでは、書籍を読みながら試していく際に、手順通りに行っても同じように実行できずに、はまった点と解決方法について述べています。この記事は、1日目分となります。（2日目分は、[こちら](https://qiita.com/TaroNakasendo/items/1ea908e6ea879d313b99)です）
#【1日目】

|Page|問題点|原因|解決方法|備考|
|----|-----|----|-----|----|
|P55|Labelからエディタへドラッグ&ドロップしても、「Insert Outlet or Outlet Collection」ポップアップメニューが表示されない。|エディタで表示中の書類が、「ViewController.swift(Interface)」になっている。|エディタ上部の「> (Go Forward)」をタップして、「ViewController.swift」に切り替えると表示されるようになる。|似たようなコードだが、別のコードになっている。(Interface)ではないコードにドラッグ&ドロップしなければならない。|
|P63|[Team]を選択してもエラーが解消されない。|XCode左上の[Active Scheme]で、シミュレータが選択された状態になっている。|一度、機種一覧の一番上にある実機を選択した状態で、[Team]を選択するとエラーが解消される。|その後、シミュレータに戻してもエラーとならない。一度、実機を選択するというのがポイント。|
|P65|▶マークをタップしても「Could not launch "MyFirst"」というエラーになり実機で起動しない。|実機で初めて接続する際に設定が必要。|実機の設定→一般→プロファイルとデバイス管理→デベロッパAPP→(Apple ID)を信頼 という手順を踏まないと、エラーになる。|信頼後、再度実行する。|
|P65|iPhoneの画面を横にしても、文字が回転しない。|iPhoneが回転禁止の設定になっている。|回転禁止を解除すると、回転に合わせて文字が回転するようになる。|180度回転した場合は、横になったままとなるようだ。|
|P84|素材ファイルをクリックすると一括してダウンロードができない。|項目をクリックすると、どんどんzipファイルの中に入ってしまいます。|iPhoneSwift_SampleApp-181021.zipが表示されている画面で、右上の「↓」ボタンをタップすることでzipファイルをダウンロードできます。|ダウンロードしたzipファイルはダブルクリックすると解凍できます。|
|P127|メールアドレスを入力する画面に移行しない。|アプリの名前やカテゴリを聞かれる。|適当な文字列でも何か入力すればOK。|メールアドレスを登録するのが怖いので、sute.jpなどの使い捨てメールアドレスサービスを使った。|
|P129|The app icon set "AppIcon" has an unassigned child.という警告が出ている。|割り当てられていないアイコンがある。|アイコンを右クリックして、Remove Selected Itemsを選択する。|特になくてもかまわないアイコンのようです。|
|P129|ホーム画面のアイコンが変わらない。|前のアイコンのまま更新されていない。|一度、iPhoneのアイコンを長押しして、×をタップしてアイコンを削除してから、再度実行する。|新しくアプリが配置され直すので、更新されるようです。|
|P154|Cannot use mutating member on immutable value: 'bundleURL' is a get-only property エラーが出る。| bundleURL.appendPathComponent()になってしまっている。|bundleURL.appendingPathComponent()に修正する。|ingがついていないだけで、別のメソッドになってしまっている。本文にも気を付けましょうと書かれていますが、紛らわしいですね。|
|P158|シミュレータでは音が出るが、実機で音が出ない。|実機側面のmuteスイッチがONになっている。|muteを解除する。|実機での確認方法は掲載されていませんが、実機を用いる場合には要注意です。|
|P158|"MyMusic"からマイクにアクセスしようとしています。というダイアログが出る。|音を使うから？再生だけなのに...|「許可しない」を選択する。|「OK」でもよい。|
|P186|デバッグエリアに文字が表示されず、Thread 1: signal SIGABRT エラーで停止してしまう。|キーボードを閉じる(1)コードを呼び出すと、落ちている|キーボードを閉じるコードをコメントアウトすると落ちない。（キーボードが閉じなくなりますが...）|間違えないように、もう一度、手順を最初から実行するとうまく行きました。おそらく関連付けのあたりを何度かやり直したので、うまく関連付けられていなかったのだと思います。|
TypeScriptでexpressを使う際に出たエラーの解決法

ネット上の記事では多くが`import * as express from 'express';`とやっているが、自分の環境ではこれをやると`express()`の箇所に以下のエラーが出てきた。

```
Cannot invoke an expression whose type lacks a call signature. Type 'typeof e' has no compatible call signatures.
// 型に呼び出しシグネチャがない式を呼び出すことはできません。
```

expressをデフォルトよりインポートしたら解決した。

### これだとエラー
```before.ts
import * as express from 'express';

const app = express();
// ここでエラー
```

### これでエラーは解消

```after.ts
import express from 'express';

const app = express();
// エラーは消え去った
// package.jsonには、devDependenciesとして
// "@types/express"も入れている
```
ブログを簡単に作れるCMS.jsを触ってみた件

#CMS.jsをさってみた
最近は就活や課題におわれ全然やりたいことができていなかったのですが。
年末に課題をすべて終わらせやっとこ年始で以前から気になっていたCMS.jsをさわることができました！
簡単にブログが設置できるのでお勧めです。
記事もマークダウンで書いたものをリポジトリにpushするだけでいいので管理も簡単！！
カスタマイズもこれからやっていくつもりです！

![CMS-js-1.gif](https://qiita-image-store.s3.amazonaws.com/0/323051/76501569-3c12-ee9d-076b-645e31ef533c.gif)


#いざ！試そう！
以下のところから自分のアカウントにForkしてきます！
[CMS.jsのテンプレート](https://github.com/chrisdiana/cms.js-starter)

Forkしてきたものを開きブランチをgh-pagesに変更！
js/config.jsを開き編集する。

```javascript:config.js
    github: {
       username: 'yourusername', //←githubのアカウント名
       repo: 'yourrepo',         //←forkしてきたリポジトリ名（cms.js-starter)
       branch: 'gh-pages',
       host: 'https://api.github.com',
       // Use prefix option if your site is located in a subdirectory.
       // prefix: 'subdirectory'
     },
```

ここまで来たらもうブログを見ることができるので見てみましょう！
https://[githubのアカウント名].github.io/cms.js-starter/
にアクセスするとテンプレートが表示されます！
githubのAPIを使って記事を読み込んでくれています。

**！注意！**
初期設定では専用のAPIではないため1時間あたり50回しか呼んでくれません。
50回以上アクセスするとエラーが返ってくるので注意しましょう。
制限を取り払いたかったらgithubのアカウントから設定をしましょう！
これに関しても後で記事を書きたいと思います。

#記事の投稿をする
これはマークダウンで書いたものをpostsというフォルダの中に置くだけで大丈夫です！

```markdown:記事
---
layout: post　　<!--←記事のレイアウト-->
title: Another blog post <!--←記事のタイトル-->
excerpt: 記事の概要
tags: sampletag　<!--←記事のタグ-->
date: 2019-1-1 <!--←記事の日付-->
---
記事の内容

```
上記のような書式で記述してください！
オプションはこれ以外にもあるので後でまとめたいと思います。

#終わりに
これから年始はしばらく時間が取れそうなのでこのブログのレイアウトを変更しながら過ごしたいと思います。
また面白いことがあったら追記します！！！
Medium はてなブログ bokete ... 申し訳ないが｢投稿上限設定｣はヘヴィーユーザーを離脱ポイントさせてるのでは？

# TLDR

- Upper limit why ... im heavy user many posting sorry..
- Upper limit make heavy user runnaway escape from service dont you think?
- I wanna hope prepare heavy user between spam user dividing system..

# TLDR

- Mediumみたいに投稿上限のあるサービスは申し訳ないが愚かだと思う‥
- 単純な上限設定によって｢超ヘヴィーユーザー｣を逃してしまうと思う
- 単なるスパムユーザーとheavy userを切り分けられる方策を用意してほしい‥



# English

I wanna pay money for unlock @Medium posting up limit 17 article

# OOOOOOOOOOOOOOPS!

![image](https://user-images.githubusercontent.com/13635059/50579619-072a5000-0e8a-11e9-9cba-e96639cecae6.png)

# SO CRY POINTS

- No limit num guidance for users
- This setting deny Many posts "genious" charcter users posting
- its is maybe for keeping quolity of service but its bitter so bitter to me...

# Other way by user hackings ideas

- Everday post empty article and keep "no limited places" and use after 
- Someway scheduling by user (umm Medium prepare it?)
- Take many accounts and switching for post many articles

# One i noticed

- this is limt for related with user?
- this is not related with "Publification"
- so i must take ather account for publificate ariticle...

# Do you think it is better way?

- i hope re setting this up limits and find some another way is good..
- btw set "Content judger center" but its maybe bad way
- Use AI ? or Long old user can more posting enable ? i hope it... i want to pay money for unlock this bad limit...

---

https://github.com/YumaInaura/YumaInaura/issues

https://github.com/YumaInaura/YumaInaura/issues/173

# English to Japanese TLDL

# Medium はてなブログ bokete ... 申し訳ないが｢投稿上限設定｣はヘヴィーユーザーを離脱ポイントさせてるのでは？

- Mediumみたいに投稿上限のあるサービスは申し訳ないが愚かだと思う‥
- 単純な上限設定によって｢超ヘヴィーユーザー｣を逃してしまうと思う
- 単なるスパムユーザーとheavy userを切り分けられる方策を用意してほしい‥

我らがQiitaはno limit!!!!! ya!

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/ba5a4bb7-3aa1-d1f3-8adc-e89bf0c5c50c.png)








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
English @medium @github @scapbox モダン UI アプリケーションではタイトルと本文の境界線はないのさ

@medium @github @scapbox Modern Application #UI no border and seamless moving on title between Description 

# Description first writing inputting all place i recommend @Medium @Github 

# Anytime you should input heading line in Description is Title

also Github or other services

![image](https://user-images.githubusercontent.com/13635059/50579472-920a4b00-0e88-11e9-8d17-2e14c7ce2b99.png)

# Why?

- Title and Description separating is too old style
- Medium has no title and description border its modern UI
- By this method You can anytime easy editing title without no tab moving yes!

# p.s

- i think markdown or other way "listing" is old style ui dont you think?
- Flatten new line inputting to automatically listing is better way like Japanese service Scrapbox
- We are so high speeding so troublesome even it is listing inputting hit space and pyphen.. i hate it!!!!!!!!!!!!!!!!!!!!!!!!!


---

https://github.com/YumaInaura/YumaInaura/issues

https://github.com/YumaInaura/YumaInaura/issues/171

English @medium @github @scapbox モダン UI アプリケーションではタイトルと本文の境界線はないのさ








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Oracleブロンズを目指して　数値関数

#SQL 数値関数

##TRUNC関数
　任意の桁数で値の切り捨てを行う
###数値
　[構文]
　**TRUNC(数値１, 数値２)**
　　　[数値１]を小数点[数値２]桁で切り捨てを行った値を返す
　
　[使用例]
![TRUNC関数_数値.png](https://qiita-image-store.s3.amazonaws.com/0/327332/54073412-f814-9ee3-1897-d67cd8d72cf1.png)
###日付
　[構文]
　**TRUNC(日付１, 日付フォーマットの要素)**
　　　[日付１]を[日付フォーマットの要素]で指定された時間で切り捨てを行った値を返す
　
　[使用例]
![TRUNC関数_日付.png](https://qiita-image-store.s3.amazonaws.com/0/327332/f3512acf-a244-7aa4-4625-4dd210486a22.png)
##ROUND関数
###数値
　任意の桁数で値を四捨五入する
　[構文]
　**ROUND(数値１, 数値２)**
　　　[数値１]を小数点[数値２]桁で四捨五入を行った値を返す
　
　[使用例]
![ROUND関数_数値.png](https://qiita-image-store.s3.amazonaws.com/0/327332/a739d914-a5c5-daff-8239-8637a98b69da.png)

###日付
　[構文]
　**ROUND(日付１, 日付フォーマットの要素)**
　　　[日付１]を[日付フォーマットの要素]で指定された時間で四捨五入を行った値を返す
　
　[使用例]
![ROUND関数_日付.png](https://qiita-image-store.s3.amazonaws.com/0/327332/91b8a3d7-9729-0a9a-ccc5-337931545b90.png)
##MOD関数
　商の余りを出すための関数
　[構文]
　**MOD([数値１], [数値２])**
　　　[数値１]を[数値２]で割った余りを返す
　
　[使用例]
　![MOD関数.png](https://qiita-image-store.s3.amazonaws.com/0/327332/a3e7216c-ac0c-6d64-d4a1-315861a8367c.png)
##SQRT関数
　平方根を出すための関数
　[構文]
　**SQRT([数値１])**
　　　[数値１]の平方根を返す
　
　[使用例]
　![SQRT関数.png](https://qiita-image-store.s3.amazonaws.com/0/327332/7551e2aa-3d8b-2017-7244-b397f40c1555.png)
##POWER関数
　べき乗を出すための関数
　[構文]
　**POWER([数値１], [数値２])**
　　　[数値１]の[数値２]乗を返す
　
　[使用例]
　![POWER関数.png](https://qiita-image-store.s3.amazonaws.com/0/327332/bdec9523-b9a2-e892-6119-e418d2ec1bd3.png)
ソーシャルの @Qiita 自己承認欲求を断ち切るために @Github @Scrapbox など not social service を利用する

ソーシャルの @Qiita 自己承認欲求を断ち切るために @Github @Scrapbox など not social service を利用する

- 自己承認欲求を断ち切るために大量爆速アウトプットしている2019 in Qiita and Github issue
- Qiitaのlist posted of me を見て何のいいねもついてない、コメントもついていないのを美しいと思うようになった
- 最初は負け惜しみ的感覚もあったが、だんだんと本当に｢ああ、美しい‥｣と思うようになってきた

![image](https://user-images.githubusercontent.com/13635059/50579322-5cb12d80-0e87-11e9-92f8-b3fa5fd1e7c5.png)

# Github issues を home にするようになった

- Github や Scrapboxなど、そもそもいいねが付かないサービスを使うことで、自己承認欲求が湧き上がらない感覚が分かってくる
- だけどせっかくなので‥！w Qiitaにもpostする感覚‥だって世界中のたった一人にだけ役立つかも知れないし？あと100年ぐらい後になったら
- そろそろ誰からも｢Qiitaガイドライン違反ですよ｣エンジニアリング関係ないじゃん、的なコメントもつかなくなってきた‥これは必ずエンジニアリングに引っ掛けるようにしているからか、またあいつか！てきな見方をされているかは不明


---

https://github.com/YumaInaura/YumaInaura/issues

https://github.com/YumaInaura/YumaInaura/issues/170








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->