OmniAICreator/Qiita-1.07M huggingface dataset:
DockerfileでCan't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2)のエラーが出た時

<font color="red">以下記事はmysqlのコンテナ再実行しなおしたら出来たみたいに書いていますが、もしかしたらそうかもしれないし時間的な問題なだけかも、ただ待ってればよかった?(1分ほど)みたいなことも起きたので記録残しておきます。ちなみに時間が経ったら出来るようになった関連の記事は(記事では出来るまで待つ処理入れたよ系の記事です。)=>[URL](https://qiita.com/sachiko-kame/items/24f600a3c4b32a9b4341)</font>

正直上のタイトル少しニュアンスが違うかもしれませんが許してください。
他にいいタイトルが思いつきませんでした。:sweat_drops:
ちなみに私はどの場面で出たかというと、コンテナーの中~~の/build~~で(←前に書いた記事ですがきっとそう。)

```
mysql -uroot -hlocalhost
```
を打つとエラー内容として
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2)

と出ました。解決してくれたのは
https://stackoverflow.com/questions/23234379/installing-mysql-in-docker-fails-with-error-message-cant-connect-to-local-mysq
で

要は先にmysqlのコンテナ作成しといて起動しときなさいよっということでした。

なので一度コンテナーの外に出てmysqlのコンテナの起動が必要だったみたいでした:sweat_drops:

なので

```
$ docker run -d -p 3306:3306 mysql
```

を打ちmysql用のコンテナを起動するべきだったみたいです。

無事に
mysql> Jul 16 14:17:01　…
の表示が出ました。

おまけ
もし上のコマンドで途中止まるときは一回

```
$ docker images
```

打って
mysqlという名のイメージがあればそのidで

```
$ docker rmi -f <削除したいイメージid>
```

をしてから再度行うといいと思います。

イメージが消えない場合はコンテナが作成されていたり起動していたりするのでコマンドで削除したり止めたりするといいと思います。
以下のurlで使いそうなコマンド下の方にまとめてあるので是非
https://qiita.com/sachiko-kame/items/35e0cf07d117c3b92613

道のりは長い…。
Macを初めて真面目に利用してみる。

Windowsでいつも利用している感じで、開発が出来る環境を用意するということと、MACオリジナルの必要なソフトを探るということ。

#Windowsで利用しているソフト
- Atom ( https://atom.io/ )
 - ちょっとしたエディタ

- Eclipse ( https://qiita.com/cypher256/items/233795f4fc58a704ee47# ) 
 - 統合開発環境
 - インストール時にランタイムをいれる（https://support.apple.com/kb/DL1572?viewlocale=ja_JP&locale=en_US）

- Xampp（https://www.apachefriends.org/jp/download.html）
 - httpd mysql 等の環境

- DropBox( https://www.dropbox.com/ja/ )
 - ファイル共有

-Kaspersky (https://my.kaspersky.com/)
 - ウィルス対策ソフト

# Mac利用にあたり知ったソフト
- XCode (AppleStore)
 統合開発環境。Macで開発にあたりコマンドラインからのインストールなどの各種ツールを提供してくれるらしい。
```xcode-select --install```
でコマンドラインツールをインストールする。

- Homebrew(https://brew.sh/index_ja)
 - コマンドライン用インストールツール
開発脳とQA脳は違うと思う

私はもともとソフトウェアQAの出身ですが、今は開発をメインにやっています。
「QAやってた人が開発やったら、品質の高いコードが出来上がるのでは？」って思うじゃないですか。
そうならなかった話を書きます。


# 私の経歴

- 7年くらいデジカメのソフトウェアQAをやってた。
- 6年くらいWebのQAをやってた。
- 2年くらいWeb開発・保守運用をやってる。

# 背景

- 1週間沖縄オフィスに行って業務を効率化してくるミッションをもらう(普段は東京オフィスに勤務)
- 具体的には「あるツールを使った操作を自動化」する(ことで作業効率を上げる)

私としては1週間も「それだけに時間を使っていい」枠をもらえたし、やってやるぜ感だった。(普段は同時に複数プロダクトを運用しており、1つのことに集中できる機会があまりない)

沖縄入りして現場のメンバーから状況をヒアリング・観察してみると操作が複雑で自動化(SeleniumWebDriverを想定してた)は厳しいなって思った。

よくよく考えるとやりたいことは「操作ログを記録する」(ニュアンスちょっと違うけどこの表現だとわかりやすいかと思う)だったので別アプローチを取ることにする。

開発に着手するが、結果としていろいろ見逃してて遠回りした。
「できたぜ！」って臨んだ出張最終日の**デモ中に不具合が見つかって凹んで東京に帰ってくる**という一週間を過ごしました。

※ココでは「やってることが高度かどうか」は別問題として進めます。

ここで帰りの飛行機の中で思ったことを書きます。


# 開発脳とQA脳は違う

「脳」というか、スタンス？考え方？思考の方向性？なのかもしれません。

私はQAをやってた時間のほうが長いので、先にQAのことを書きます。
前提として、私がやっていたQAは「開発したものを別な人が動かして動作確認する」みたいなやつです。

QAとして私がある機能をテストするという場合には、仕様書にあるなしかかわらず「どんなことができるのか」を考えます。ここでいう「できること」というのは、「ボタンを押してメールを送信できる」機能だった場合、「メールを送信できる」ということだけではなく「その周囲にあるパターン、条件」みたいなものになります。例えば「下書き」にチェックが入っていたら「送信されちゃダメ」みたいな条件があるとか、実は送信できるボタンが複数箇所あって両者で送信される条件が違う、みたいな。

その上でそのテスト対象と向き合うときに

- どうやっていろんなパターンを試してやろうか。(洗い出してやろうか、の気持ちのほうが強いか)
- どうやって不具合を見つけてやろうか。
- どうやって開発の想定漏れをみつけてやろうかぐふふ。

みたいな気持ちになります。

これは前提として「動くものがある」からスタートしてるので、それより「外側」を見て思考してる気がします。

一方、開発するときの脳はというと。

エンジニアはゼロからものを作れます。そして「必要最低限」のところから作ります。(いきなりエッジケースの実装はしない) 上記例で言えば、まずは「ボタンが押されたらメールが送信されること」を満たしに行きます。その時、そこにどんな条件があるかは(設計時に関係するけど)置いておいて、まずはこれを満たします。

それを少しずつを積み上げていって、0だったものを1にして、10にして、100にしていきます。

仮に「開発者である私が思っているゴール」を100とします。このときの100が、QAをやってる私のゴールと違うんです。多分QAは250くらいを見てるイメージ。QAのほうが自由に広く発想している気がします。


# なぜこれを一人でできないのか？

(完全に私の印象なので、もっとレベルの高いエンジニアは違うと思うし、むしろ違っていてほしい)

元QAとしてどんなパターンがあるのか洗い出していくのは得意なはずなのに、自分が作ってるものになると途端にその能力が落ちます。発想も気持ちも切り替えもうまくできない感じがします。

QAのときは「こいつは動かないかもしれない。動かないところを見つけてやる」ってマインドだけど、開発のときは「頼む動いてくれ。動くよね？大丈夫よね？」ってマインドになっています。視野が狭くなるというか。動いているものを壊したくない、壊れてほしくないという思いが強くなります。これによっていろんな動作パターンに発想が行かず「今動いてる」ことに執着し始めます。無意識に臆病になる感じ。。。


# 2年も開発やっててなぜ今それを思ったか

「1週間ずっと1つのことをやってていい時間」および「一人でやる」という機会があったからだと思います。普段は複数人で行動しているので「自分ひとりの責任で何かを作り切る」という経験があまりなかったため、いつもとは違うことも考えられたのかなと。(あと、沖縄という場所に行って何かが解放されたのかもしれませんけどｗ）


# これを書きながら思ったこと

私のエンジニアとしてのスキル・経験が低いことに起因することだとも思います。こと最近のアジャイルやスクラムではQA・テスト「専門」のメンバーがいないこともあって、その場合は開発者が自分でテストするわけで、そういう意味では上記の250のゴールを満たす実装ができるエンジニアが求められていると思うのです。

2,3年後には別の見方ができるようになっていたいと思います。
Gradle

# インストール

Windows10環境にインストールする。

## ダウンロード

以下の公式サイトからダウンロードする
https://gradle.org/releases/
2018/7/16時点の最新版の4.8.1をダウンロードする。

## ファイルの展開と環境変数の設定

「D:\gradle-4.8.1」に展開する。
環境変数「GRADLE_HOME」を作成。
PATHに「%GRADLE_HOME%\bin」を追加する。
コマンドプロンプトで「gradle -version」を実行できたら終了。

#使い方
参考サイト：https://qiita.com/vvakame/items/83366fbfa47562fafbf4

#エラー対応

##エラー: この文字は、エンコーディングMS932にマップできません

tasks.withType(JavaCompile) {
    options.encoding = 'UTF-8'
}

#JUnit5用

```gradle:bild.gradle
plugins {
  id 'java'
}

repositories {
    mavenCentral()
}

test {
    useJUnitPlatform {
        includeEngines 'junit-jupiter'
    }
}

dependencies {
    testCompile group: 'org.junit.jupiter', name: 'junit-jupiter-api', version: '5.2.0'
	testCompile "commons-io:commons-io:2.6"
	testCompile "org.junit.jupiter:junit-jupiter-migrationsupport:5.2.0" 
    testRuntime group: 'org.junit.jupiter', name: 'junit-jupiter-engine', version: '5.2.0'
}

tasks.withType(JavaCompile) {
    options.encoding = 'UTF-8'
}
```

##JUnit5
以下を参考にする。

https://junit.org/junit5/docs/current/user-guide/
gradle -q test -PincTags=ABC

```gradle:build.gradle
apply plugin: 'java'

repositories {
	mavenCentral()
}

dependencies {
	testCompile('org.junit.jupiter:junit-jupiter-api:5.2.0')
	testRuntime('org.junit.jupiter:junit-jupiter-engine:5.2.0')
	testCompile "commons-io:commons-io:2.6"
}

test {
    useJUnitPlatform{
        if (project.hasProperty('incTags')) {
	    includeTags incTags
        }
        if (project.hasProperty('excTags')) {
            excludeTags excTags
        }
    }

	testLogging {
		events "passed", "skipped", "failed"
	}

	reports {
		html.enabled = true
	}
}

task wrapper(type: Wrapper) {
	description = 'Generates gradlew[.bat] scripts'
	gradleVersion = '4.6'
}

tasks.withType(JavaCompile) {
    options.encoding = 'UTF-8'
}
```

# Jenkins
## テストが実行されない
gradleのTaskに「clean test」と最初にcleanを追加する。
【AWS】Amazon EC2 Dedicated Hostを使ってみたメモ

# とは、メモ
- [ハードウェア専用インスタンス（Dedicated Instance）との比較](https://image.slidesharecdn.com/20170405aws-blackbelt-ec2-170405101232/95/aws-black-belt-online-seminar-2017-amazon-ec2-31-638.jpg?cb=1491387191)
- 特定のAZ、インスタンスタイプを指定する
- 料金はホストの割当時間、指定するリージョン、指定するインスタンスファミリー（タイプではない）で決定
    - 	起動しているインスタンスに対しては料金は発生しない
    - 	[詳細](https://aws.amazon.com/jp/ec2/dedicated-hosts/pricing/)
- 起動できるのは BYOL、Amazon Linux、および AWS Marketplace AMI のみ
- サイズの異なる複数のインスタンスを同じホストには配置できない
- ホストで起動しているインスタンスがあると、ホストは削除できない

その他参考：よくある質問 https://aws.amazon.com/jp/ec2/dedicated-hosts/faqs/


# 設定サンプル

![SnapCrab_NoName_2018-7-16_22-4-55_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/50690/f9f5252b-6a0b-f861-ff91-0604a315fc65.png)

インスタンスタイプとAZはあらかじめ指定しなければいけない

![SnapCrab_NoName_2018-7-16_22-5-25_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/50690/db2facfa-436e-9b74-4f18-7904966cd238.png)

ホストを作成したところ（インスタンスはまだ無い）

![SnapCrab_NoName_2018-7-16_22-5-52_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/50690/7581d887-3481-828a-3ef7-c91c3a27d2b5.png)

インスタンスを作成するウィザード。
Amazon Linux等以外は選べない。

![SnapCrab_NoName_2018-7-16_22-7-47_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/50690/1ee7c031-8b85-71d4-36ec-d37fc5e8d0e2.png)

ホスト作成時に指定したインスタンスタイプ以外は選べない

![SnapCrab_NoName_2018-7-16_22-7-56_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/50690/2dce04cc-5520-67c0-faa4-1680726b95e4.png)

AZ、テナンシー、ホスト、は触れない

![SnapCrab_NoName_2018-7-16_22-8-50_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/50690/37e94720-a82c-4387-6802-d4ba374e3832.png)


起動したところ

![SnapCrab_NoName_2018-7-16_22-25-54_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/50690/b2fb4f9c-d04e-cc9b-183c-d6a86d8c529b.png)
RでデータをOECD加盟国に絞りたい時

後々の自分のために。OECD36カ国(2018年7月現在)です。
ISO 3166-1 alpha-3(iso3c)で国名が与えられている場合、

```
c("AUS","AUT","BEL","CAN","CHL","CZE","DNK","EST","FIN","FRA","DEU","GRC","HUN","ISL","IRL","ISR","ITA","JPN","KOR","LVA","LTU","LUX","MEX","NLD","NZL","NOR","POL","PRT","SVK","SVN","ESP","SWE","CHE","TUR","GBR","USA")
```
これが役に立てば...
http://www.oecd.org/about/membersandpartners/list-oecd-member-countries.htm
を参照しました。
Google Apps ScriptでPushメッセージのLINE Botを作る。

[こちら](https://qiita.com/tetrapod117/items/e7b48485c98f6b88f311)の記事の続編です。

##Pushメッセージとは
基本的にBotは送信されたメッセージに反応しますが、PushメッセージはBotからメッセージを送ることができます。
企業のアカウントなどを友達登録していたら、よくBotメッセージがくると思いますが、それがPushメッセージになります。

今回は、GASを使って毎朝決まった時間にメッセージを送ってくるBotを作ろうと思います。

## 準備
アクセストークンの取得やGASのエディタの開き方などのは[前回の記事](https://qiita.com/tetrapod117/items/e7b48485c98f6b88f311)を参考にしてください。（この記事を書いてる間にサイトのデザインが変わりましたがあまり気にしない...）

## プランについて
Pushメッセージを送るにはとりあえず「Developer Trial」のプランを使用すれば大丈夫です。

## ユーザーIDについて
Pushメッセージを送るには送信する人のユーザーIDが必要になります（グループに送る場合はgroupIDが必要）。Botをフォローしているユーザー全員に送りたい場合はそれぞれのユーザーIDをBotのフォローイベントなどを使って取得して、それをDBに保存する必要があり少々面倒です。
なので、今回はとりあえず自分にだけPushメッセージが送ることができればいいので、自分のアカウントのユーザーIDを取得します。
ユーザーIDはチャネル基本設定の一番下の「Your user ID」にあります。
![LINE_Developers.jpg](https://qiita-image-store.s3.amazonaws.com/0/150295/86ba9672-6313-0deb-5de4-2072353d4f80.jpeg)

こちらをコピーしておきましょう。

## 開発
APIトークンとuserIDを取得したということで、GAS上で開発していきます。
コードはこんな感じです。

```javascript
var CHANNEL_ACCESS_TOKEN = 'YOUR_CHANNEL_ACCESS_TOKEN'; 
var USER_ID = 'YOUR_USER_ID';

function pushMessage() {
    //deleteTrigger();
  var postData = {
    "to": USER_ID,
    "messages": [{
      "type": "text",
      "text": "おはよう",
    }]
  };

  var url = "https://api.line.me/v2/bot/message/push";
  var headers = {
    "Content-Type": "application/json",
    'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
  };

  var options = {
    "method": "post",
    "headers": headers,
    "payload": JSON.stringify(postData)
  };
  var response = UrlFetchApp.fetch(url, options);
}
```

トークンとユーザーIDを入力したら、保存して
関数pushMessageを選択して実行してみましょう。（その前にBotのアカウントに友達登録をしておいてください）
![push_test.jpg](https://qiita-image-store.s3.amazonaws.com/0/150295/11790f1c-cad9-5302-a086-05bbf6443516.jpeg)


このように、事前にメッセージを入れなくてもBotからメッセージが来たら成功です。
<img width="426" alt="LINE.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/150295/b906b0bc-8a79-76a1-446f-d23b39f181cc.jpeg">

### 解説
やっていることは、前回のreplyメッセージとほとんど同様で、replyメッセージではユーザーから送られてきたメッセージに対応して、

```
https://api.line.me/v2/bot/message/reply
```
こちらのエンドポイントにPostを送ることで返信ができました。

こんかいのPushメッセージでは、ユーザーからのメッセージが来なくても

```
https://api.line.me/v2/bot/message/push
```

こちらのエンドポイントに直接Postを送ることでメッセージを送信しています。
ユーザーIDを必要とするのは送る人を限定するためです。


## あとがき
そういえば、最近、「LINE BOOT AWARDS」が発表されましたね。
GASで何かBotを作って応募するのも楽しそうですね！
個人学習メモ#5 Javascript　一定以上スクロールすると要素のサイズを変更

Javascriptテックラボ様からの引用です。
引用元：[スクロールに合わせてヘッダーを変化させる| JavaScriptテックラボ | [Smart]](https://rfs.jp/sb/javascript/js-lab/resize-header-scroll.html)


HTML
<img width="382" alt="スクリーンショット 2018-07-16 22.27.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/263583/62da75e4-8d57-7940-45e9-7d9b0a2201d6.png">


CSS
<img width="517" alt="スクリーンショット 2018-07-16 22.28.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/263583/317afc30-12a1-68bc-4235-d640990d091d.png">


Javascript
<img width="478" alt="スクリーンショット 2018-07-16 22.27.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/263583/c5d073bf-3fe8-23d1-a9ee-47f4a5824046.png">
RubyからSlackbotにメッセージを投げる

Slackのヘルプにあるcurlコマンドと同じことをやろうとしてハマったのでメモを。Ubuntuのruby2.3.1でのお話です。どうも、HTTPライブラリのバージョン間差異に振り回された感じ？

URIを用意するところは問題ありません（パラメタは伏せ字にしてあります）。

```rb
require 'net/https'
require 'uri'

uri = URI.parse('https://zzz.slack.com/services/hooks/slackbot?token=xxx&channel=%23yyy')
```

まず、シンプルにpost。これがなんとruby2.3では *method not found* ... `post_form_data`を使うと「data=message+from+ruby%21」なんて喋る結果になるので全然ダメ。

```rb
(動かない!!)
res = Net::HTTP.post(uri,"message from ruby!")
puts res.body
```

ということで、1行は諦めて、Postオブジェクトを作ります。

```rb
req = Net::HTTP::Post.new(uri.path+"?"+uri.query)
req.body = "message from ruby!"
```

slack.comはhttpsなので、`use_ssl`を指定したいのですが、startメソッドの中で指定する方法だと何故かうまく渡りません。

```rb
(動かない!!)
res = Net::HTTP.new(uri.host,uri.port,use_ssl: true).start do |http|
  http.request(req)
end
```

ということで、ブロックの使用も諦めて、素直に以下のように書いたところ無事にリクエストが受け付けられました。

```rb
http = Net::HTTP.new(uri.host,uri.port)
http.use_ssl = true

res = http.request(req)

puts res.body
```

ただ1行メッセージをPOSTしたかっただけなのにこんな大掛かりなことに…。
Laravel Homesteadで立ち上げたmysqlにSequel Proで接続する

# はじめに
Laravel Homesteadでvagrant上のmysqlにSequel Proで接続する方法です。
mysqlは作成時のデフォルトです。

# 設定

- MySQLホスト
laravelプロジェクトの.envのDB_HOST

- ユーザ名
laravelプロジェクトの.envのDB_USERNAME

- パスワード
laravelプロジェクトの.envのDB_PASSWORD

- データベース
laravelプロジェクトの.envのDB_DATABASE

- ポート
laravelプロジェクトの.envのDB_PORT

- sshホスト
Homestead.yamlのip

<img width="436" alt="Sequel Pro 2018-07-16 22-00-00.png" src="https://qiita-image-store.s3.amazonaws.com/0/226008/b01cc27b-c30a-618b-4e1d-31fc636b0961.png">
google-home-notifierでhttpを公開しない方法

## 結論

`connect` のオプションに `bind_tls: true` を指定する。

```javascript:example.js
// 略
app.listen(serverPort, function () {
  ngrok.connect(
    {
      addr: serverPort,
      authtoken: "<your authtoken from ngrok.com>",
      bind_tls: true
    }, function (err, url) {
// 略
```

## bind_tls
### `bind_tls: "both"` (デフォルト)
![bind_tls_both.png](https://qiita-image-store.s3.amazonaws.com/0/27531/f8360f6c-4940-06e4-57e0-8cc14b81c5e2.png)

### `bind_tls: true`
![bind_tls_true.png](https://qiita-image-store.s3.amazonaws.com/0/27531/21f73d03-2c14-5faa-cd6c-1f8aa9064cff.png)
Steam コントローラーのレイアウト設定がバグった時の最終手段

# 問題
Steamにコントローラーを繋げた後の初回のレイアウト決定でミスをして，
その後ボタン配置がおかしなまま変更できなくなった．

# 環境
・OS: Windows10 64bit
・Client: Steam
・MayFlash GameCube Controller Adapter for Wii U/PC/Switch
・Nintendo GameCube純正コントローラー

# 本題
1. Cドライブ　＞　Program Files (x86)　＞　Steam　＞　config　を開く．
2. "config.vdf" をテキストエディタ等で開く．
3. 下の方にスクロールし、以下のような記述があることを確認する．<br>
    `"SDL_GamepadBind_PendingUpload_Map"
"[数字の羅列],[コントローラーの設定を保存した時の名前],a:b1,b:b2,y:b3,x:b0,start:b9,rightstick:b7,leftshoulder:a3,rightshoulder:a4,dpup:h0.1,dpleft:h0.8,dpdown:h0.4,dpright:h0.2,leftx:a0,lefty:a1,rightx:a5,righty:a2,lefttrigger:b4,righttrigger:b5,"
	"SDL_GamepadBind_PendingUpload_Name"		"[コントローラーの設定を保存した時の名前]"
	"SDL_GamepadBind_PendingUpload_GUID"		"[数字の羅列]"
	"SDL_GamepadBind"		"[数字の羅列],[コントローラーの設定を保存した時の名前],a:b1,b:b2,y:b3,x:b0,start:b9,rightstick:b7,leftshoulder:a3,rightshoulder:a4,dpup:h0.1,dpleft:h0.8,dpdown:h0.4,dpright:h0.2,leftx:a0,lefty:a1,rightx:a5,righty:a2,lefttrigger:b4,righttrigger:b5,`<br>
[数字の羅列]の部分は今後弄る予定がないのでそっとしておきましょう．
[コントローラーの設定を保存した時の名前]の部分には，初回のレイアウト決定を行った際に保存したときの名前が入っているはずです．
その他の部分の a:b1,b:b2,…　の部分がコントローラーのレイアウト設定の部分になります．上には私の設定が入っているので，皆さんのものはデータが違う可能性が有ります．
4. 一旦，テキストエディタとSteamを終了して， "config.vdf"のバックアップを取っておきます（デスクトップ等にコピーすればOK)．
5. config.vdf(バックアップではない方)を開き，3. で示した箇所を削除しておきます．
6. Steamを起動し，BigPicutureモードに入ります．
7. コントローラー設定が初期化されているはずなので，そこで再度正しいレイアウトを設定し直します．
8. 設定が完了したらSteamを終了します．

以上で終了ですが，複数台のコントローラを利用している方で設定が変になってしまった方は更に以下の手順を実行してください．

9. config.vdf(バックアップではない方)に新しく設定したデータが入っていることを確認します．
10. config.vdfのバックアップを開き，9.のデータをコピー＆ペーストして，config.vdfを上書きします．


# 余談
設定を初期化するだけなのですぐに出来るだろうと思っていたのですが，思いのほかドツボに嵌ってしまいました．
Steamクラウドと同期して，すぐにデータが復元されてしまうので半分詰みかけていましたが，上記の方法でなんとかなりました．
一応，Steamの設定を弄ることになるので，全て自己責任で行ってください．
ofxTrueTypeFontUC@oFv0.10.0

#はじめに
ttfで日本語表記を可能にするofxTrueTypeFontUCの、v0.10.0でのエラーの備忘録です。
相変わらず画像は面倒なので貼っていません。

#問題
問題点は２つ。

1. stringが使えない。  
   ofxTrueTypeFontUC.hの8行目でエラー。「型指定子がありません」と出ました。
2. いくつかのファイルがインクルードできない。
   ofxTrueTypeFontUC.cppの13~23行目。oFのバージョンによって管理する場所が違うらしいのですが、ファイルが見つからないとのこと。

#解決策
1. ofMain.hを頭でインクルード
   stringだったので`#include <string>`でいけるかとも思ったのですが、改善せず面倒だったのでこれで解決しました。

2. trueの方、freetype2/freetype/でインクルード
   oF本体のlibを見ると、freetype/include内に上のディレクトリ構造がありました。が、現状の条件ではOF_VERSION_MINORが8以下、つまりv0.8.*以前のバージョンがそちらになっていて、それ以降は直接ヘッダーファイルをインクルードする形になっていました。
   なので、条件式に`OF_VERSION_MINOR == 10`を付け加え、v0.10.0でtrueになるようにしました。

以上の2つで無事ビルドが通りました。

#終わりに
最近はoFでテキストエディタを作ろうといろいろこねこねしてます。
【Java】ZIPファイルが超簡単に扱えるユーティリティ「ZT Zip」の紹介

ZIPファイルがたった１行のコードで操作できるライブラリを見つけましたので、紹介いたします。

# ライブラリ導入(Maven or Gradle)
Javaに慣れてる人であれば知ってると思うので、詳しくは説明しません。

```xml:pom.xml
<!-- https://mvnrepository.com/artifact/org.zeroturnaround/zt-zip -->
<dependency>
    <groupId>org.zeroturnaround</groupId>
    <artifactId>zt-zip</artifactId>
    <version>1.13</version>
</dependency>
```

```groovy:build.gradle
// https://mvnrepository.com/artifact/org.zeroturnaround/zt-zip
compile group: 'org.zeroturnaround', name: 'zt-zip', version: '1.13'
```

## サンプルコード
よく使うだろうなというコードをいくつか紹介します。
staticメソッドで実装されているので、どれも１行だけで書けてしまっていますね。

```java
//解凍します
ZipUtil.unpack(new File("C:/work/file.zip"), new File("C:/work/unzip/"));

//圧縮します
ZipUtil.pack(new File("C:/work/unzip/"), new File("C:/work/file.zip"));

//ZIPのなかにあるファイルを入れ替える
boolean successFlg = ZipUtil.replaceEntry(new File("C:/work/file.zip"),
        "/config/production.properties", new File("C:/work/production.properties"));

//ZIPのなかへファイルを追加する
ZipUtil.addEntry(new File("C:/work/file.zip"), "/config/develop.properties", new File("C:/work/develop.properties"), new File("C:/work/file_dst.zip"));
```

## もっと詳しく知りたい場合は…

公式ドキュメントを見ましょう…。簡単な英語で書かれています。
[zeroturnaround/zt\-zip: ZeroTurnaround ZIP Library](https://github.com/zeroturnaround/zt-zip)
[Docker] Alpine イメージで gosu に代わる選択肢、su-exec について

Docker コンテナ内でユーザ権限でプログラムを動作させるのに **gosu** を使っている方もいらっしゃると思います。Alpine イメージを使う時には他の選択肢もあるよ、ということで **su-exec** を紹介させていただきます。

# そもそも gosu とは？

指定したユーザ、グループでプログラムを動作させることができます。

[リポジトリはこちら]
https://github.com/tianon/gosu

### gosu が作られた動機

gosu の README に作られた動機が書かれています。su, sudo が予測不可能な TTY、シグナル送信の振る舞いをする問題を持っているためです。同等のことが、[Best practices for writing Dockerfiles](https://docs.docker.com/develop/develop-images/dockerfile_best-practices/#use-multi-stage-builds) にも記載されており、gosu を検討してみてはと書かれています。

> Avoid installing or using sudo as it has unpredictable TTY and signal-forwarding behavior that can cause problems. If you absolutely need functionality similar to sudo, such as initializing the daemon as root but running it as non-root), consider using “gosu”.

### gosu と su のプロセス生成の違い

プロセス生成の例を見てみましょう。gosu は直接、指定した権限でプロセスを実行しているのに対し、su は子プロセスとして実行しています。

* gosu

```shell-session
# gosu nobody:root ps f -ef 
PID   USER     TIME  COMMAND
    1 root      0:00 sh
   66 nobody    0:00 ps f -ef
```

* su コマンド

```shell-session
# su - testuser -c "ps f -ef"
No directory, logging in with HOME=/
UID        PID  PPID  C STIME TTY      STAT   TIME CMD
root         1     0  0 11:54 pts/0    Ss     0:00 bash
root        48     1  0 12:03 pts/0    S+     0:00 su - testuser -c ps f -ef
testuser    49    48  0 12:03 ?        Ss     0:00  \_ -su -c ps f -ef
testuser    52    49  0 12:03 ?        R      0:00      \_ ps f -ef
```


# su-exec の利点とは？

では、ここから su-exec について取り上げていきます。

[リポジトリはこちら]
https://github.com/ncopa/su-exec

gosu と同等のことが実現できるソフトです。su-exec の利点は次の通りです。

* gosu よりもサイズが小さい
* Alpine の main リポジトリに入っている。よって、インストールが簡単

### サイズの小ささ

次の三つのイメージのサイズを比較します。

* Alpine イメージ
* gosu をインストールしたイメージ (ベースイメージは Alpine)
* su-exec をインストールしたイメージ (ベースイメージは Alpine)

表にすると以下の通りとなりました。gosu も決してサイズが大きすぎるわけではないのですが、su-exec の小ささが際立ちますね。

| イメージ | サイズ |
| --- | --- |
|Alpine|4.41MB|
|gosu|6.99MB|
|su-exec|4.44MB|

### インストールの容易さ

su-exec をインストールする Dockerfile は以下の通りです。

```Dockerfile
FROM alpine
RUN set -ex; \
    apk add --no-cache su-exec;
```

一方で、gosu は Alpine の main リポジトリに入っていないです(2018年7月16日現在)。[こちらにインストール方法が記載されています](https://github.com/tianon/gosu/blob/master/INSTALL.md)。簡単ではあるものの、Dockerfile が煩雑になります。

サイズ、インストールの容易さ以外にも実績など様々な要素を考慮する必要があるかとは思いますが、su-exec も候補の一つとしていかがでしょう？

# [コラム] postgres、Redis の Alpine ベースイメージでも su-exec が採用されています

postgres、Redis の Alpine ベースイメージでも su-exec が採用されていました。ご参考までに、postgres の Docker Official イメージのパッケージングのページはこちら。
https://github.com/docker-library/postgres

Debian ベースと Alpine ベースの二つがあります。Alpine ベースの方は gosu ではなく su-exec が採用されています。

その時のやりとりがこちらに残っています。
https://github.com/docker-library/postgres/pull/119
その元となった議論が Redis の方でされています。
https://github.com/docker-library/redis/pull/40#issuecomment-169916910

要約すると、su-exec の作者の ncopa さんが、gosu ってサイズが大きいよねという問題提起とともに su-exec を書きました。su-exec はテストも十分行っており、Alpine もサイズを小さくすることを目標にしたイメージです。そのため、Alpine ベースの方は gosu ではなく su-exec を採用する流れとなりました。
Laravel5.6インストール手順

# はじめに
Laravelを使ってWebアプリを作ろうと思い、VirtualBox + Vagrant + Homestead + Composerで環境構築しました。

# 必要なものを諸々インストール
既に詳しい手順を書いてある内容がありましたので、こちらを参考にしてどんどん進めていきます。
https://qiita.com/7968/items/97dd634608f37892b18a#step-1vagrant-%E3%81%A8-virtualbox-%E3%81%AE%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E3%81%A8%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB

>Step 6　Homestead の設定ファイルの編集

Homestead.yamlの編集後ですが`vagrant up --provision`で立ち上げる必要があるみたいです。
公式サイトにも乗っています。
https://readouble.com/laravel/5.1/ja/homestead.html
WSL (Windows Subsystem for Linux)からSSH接続するには

Windows Subsystem for Linux(旧称：Bash on Windows、以下WSL）からLinuxサーバーにSSH接続ができませんでした。原因としては、Windowsと共有しているディレクトリ上では、ファイルの権限が変更できないため、ファイルをWSLのディレクトリに移動してから、権限を変更する必要がありました。

#ダウンロードしたpemファイルでの接続がエラーになる
`/mnt`以下のディレクトリにダウンロードした`.pem`ファイルで接続してみます。

```
$ ssh -i "yoshioms.pem" ec2-user@linux-server
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@         WARNING: UNPROTECTED PRIVATE KEY FILE!          @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Permissions 0555 for 'yoshioms.pem' are too open.
It is required that your private key files are NOT accessible by others.
This private key will be ignored.
Load key "yoshioms.pem": bad permissions
Permission denied (publickey,gssapi-keyex,gssapi-with-mic).
```

0555では、権限が強すぎるのでダメと言われています。`ls -l`してみると、

```
-r-xr-xr-x 1 yoshioms yoshioms      1696 Jul 16 17:26 yoshioms.pem
```

確かに、実行権限までついちゃってます。`chmod`で権限を変更してみます。


```
$ chmod 0400 yoshioms.pem
$ ls -l
-r-xr-xr-x 1 yoshioms yoshioms      1696 Jul 16 17:26 yoshioms.pem
```

ダメだ。変わらない。

#WSLディレクトリにpemファイルを移動してやってみる
しばらく悩んだのですが、Windowsと共有している`/mnt`ディレクトリでは、ファイルの権限が絞れないみたいです。`.pem`ファイルを`/home/<user>`ディレクトリに移動したら、権限が変更できました。

```
$ mv yoshioms.pen ~/
$ cd
$ chmod 0400 yoshioms.pem
$ ls -l
-r-------- 1 yoshioms yoshioms 1696 Jul 16 20:53 yoshioms.pem
```

この状態で`ssh`してみると、無事接続できました！

```
$ ssh -i "yoshioms.pem" ec2-user@linux-server
Last login: Mon Jul 16 12:24:18 2018 from myip

       __|  __|_  )
       _|  (     /   Amazon Linux 2 AMI
      ___|\___|___|

https://aws.amazon.com/amazon-linux-2/
[ec2-user@linux-server ~]$
```
arducamの研究

# 概要
aeducamを調べてみた。

# 写真
![](https://thumbnail.image.rakuten.co.jp/@0_mall/robotshopjapan/cabinet/product_images/adu/rbadu07_3.jpg)


# ブロック図

![image](https://qiita-image-store.s3.amazonaws.com/0/18104/6d0b5305-8fee-5b95-856a-76d6a8824a5a.png)


# 配線図

![schematics.png](https://qiita-image-store.s3.amazonaws.com/0/18104/04c9db71-184f-aed4-9060-1a0335868b34.png)


![image](https://qiita-image-store.s3.amazonaws.com/0/18104/08a780c9-1333-6389-20d5-4dc806c3eaa4.png)

# SCCBとは。

SCCBはI2Cとほぼ同じですが、最終ビットにACK/NACKがありません。
I2C関数で単純にカメラからREADすると、ACK待ちでタイムアウトが発生します。
9バイト毎にフェーズを分けて転送するよう記載されています。
SCCBが9バイト目を見ないようにしているのは、I2Cに合わせるためにあるのだと思っています。

以上。
Ansible 2.4 から 2.5 への移行ガイド (主要部分)

# 出展

[Ansible 2.5 Porting Guide — Ansible Documentation](https://docs.ansible.com/ansible/2.5/porting_guides/porting_guide_2.5.html) より


# Playbook

## roles のキーワードとインライン変数の渡し方の修正


### 古

今までは role に渡す変数とキーワードがごっちゃになっていた。

```yaml
roles:
    - { role: myrole, name: Justin, othervar: othervalue, become: True}
```

### 新

変数は `vars` に渡すようになった。

```yaml
roles:
    - { role: myrole, vars: {name: Justin, othervar: othervalue}, become: True}
```

### 感想

「ですよね！」って感じ。

# 非推奨

## Jinjaのフィルタ記法を利用した条件評価は非推奨に

フィルタ記法での評価は将来的に 2.9 で削除される予定。

評価記法は比較に使い、フィルタはデータ操作に使おう。


### 古

```yaml
when:
    - result | failed
    - not result | success
```

### 新

```yaml
when:
    - result is failed
    - results is not successful
```

### 余談

この変更は、Jinjaの適切な理解、コンセプトの理解のために役立つことでしょう。

>Jinja tests are used for comparisons, while filters are used for data manipulation and have different applications in jinja.

「ここでいう「テスト」って何なの？」
「when はテストじゃなくて条件分岐じゃないの？」

と思うが、そもそも値の比較 ( 評価成功期待すること ) を test と呼ぶので、こちらの表現から来ているんだろう。

[Linux test command information and examples](https://www.computerhope.com/unix/test.htm)

Jinja2本体のドキュメントを読んでみよう。

[Template Designer Documentation — Jinja2 Documentation (2.10)](http://jinja.pocoo.org/docs/2.10/templates/#tests)

>### Tests
>Beside filters, there are also so-called “tests” available. Tests can be used to test a variable against a common expression. 

# モジュール

色々削除されたが、ここではほぼ割愛。

気になったもの

>docker use docker_container and docker_image instead

docker モジュールは docker コンテナ管理のためのモジュールだが、過去バージョンで既に docker_container と docker_image に分割されている。

# 備考

- 何か新しく分かったら追記。









<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
intellij が js でMutable variable is accessible from closure.と注意してくれた時

# react native 書いていた時にMutable variable is accessible from closure　と忠告してくれた

var をconstに変えたら治ったのでどうやら変数のスコープの問題だったっぽい。

可変な変数はかっこから参照できる　　って日本語に訳したのだがピンとこない。
Pythonとvirtualenvのセットアップ＠MacOS X

[Google CloudのPythonセットアップ記事](https://cloud.google.com/python/setup#installing_and_using_virtualenv)におけるMacOS向けのコマンドのみを抽出したもの。

## Xcodeのコマンドラインツールのインストール

```
$ xcode-select --install
```

## Pythonのインストール

```
$ brew install python python3
```

## virtualenvのインストール

```
$ pip3 install --upgrade virtualenv
```

## virtualenvの有効化

```
$ cd your-project
$ virtualenv --python python3 env
$ source env/bin/activate
```

これでローカルな開発環境ができる。

## virtualenvの使用をやめるとき

```
$ deactivate
```

## 参照

- [Python 開発環境のセットアップ](https://cloud.google.com/python/setup#installing_and_using_virtualenv)
i18n、enumを利用して、formforのf.selectを日本語化する

#実装したかったこと　enumとf.selectの併用
一度作った機能をリファクタリングしているのですが、プルダウンで項目を選んでpostするという動作の中で
中身が気持ち悪いところがあったので修正。モデルはbookです。

```schema.rb
t.category "string"
```

```erb:new.html.erb
<%= f.select :category, [["男向け", "男向け"], ["女向け", "女向け"], ["その他", "その他"]] %>
```

![スクリーンショット 2018-07-16 19.16.55.gif](https://qiita-image-store.s3.amazonaws.com/0/147990/51e6e2f7-6238-d5b1-9d8e-2bdd6179f0b0.gif)

当初はこんな感じで書いていたのですが、これだとデータベースに文字列のデータが直接入るため、あまりよろしくありません。
なので、enumを利用して、データベースには数値が入るようにしました。
categoryはもちろんinteger型にします。

#必要な技術
ここからは実装に必要な技術を羅列します。

##enum
有名なenumですね。
カラムの中の項目に整数を割り当てて、メソッドを簡単に実行できるようになったり、可読性をあげることができるようになったりします。
この記事参考にしてました。

[【Rails入門】enumの使い方まとめ](https://www.sejuku.net/blog/26369)

今回はenumを

```book.rb
enum category:{for_men: 0, for_women: 1, for_others: 2}
```
こんな感じでセットします。

あと、enumを簡単に日本語化できるように、お助けのgemを入れます。
enum_helpというgemです。

```ruby.rb
#gemfile

gem 'enum_help'

```
bundleしましょう。

##YAML
次に、yamlですね。
yamlは階層化されたデータを書きやすくしてくれる表記方法です。

参考記事：　[YAMLとは何か？ - いつもRailsの設定ファイルで出てくるやつの正体](https://qiita.com/Yama-to/items/587544993fb62610528a)

rails5においては、config/locales以下にja.ymlというファイルを作成します。
このja.ymlファイルの中にこの英語表記は日本語ではこう表すんだよということを教えてあげます。
具体的には下のように書きます。

```ja.yml

ja:
  activerecord:
   #(この辺に他の設定値がある)
  enums:
    book:
      category:
        for_men: 男向け
        for_women: 女向け
        for_others: その他
```

##f.select
これは一番最初に書いてありますが、railsが用意してくれているform_forの中で、プルダウンで項目を選ぶことができるようになります。

[【開発メモ】Ruby on Railsのform_forでドロップダウンリストの選択ボックスを設置する方法](http://freesworder.net/rails-form_for-select/)
こちらの記事を毎回参考にしています。

```erb:ruby.html.erb
<%= f.select カラム名, [["表示する文字”, "データベースに登録する値”], ["表示する文字”, "データベースに登録する値”]] %>
```

#最終コード

最後にどのようなコードを書けば実装できたのかも書いておきます。

```erb:new.html.erb
<%= f.select :category, Book.categories.keys.map {|k| [I18n.t("enums.book.category.#{k}"), k]} %>
```

まず,Book.categoriesで
{"for_men"=>0, "for_women"=>1, "for_others"=>2 }というハッシュが取れます。
keysでそのうちのキーの部分(ハッシュの左側)を配列で取り出し、mapより左の中にあるkに入れていきます。
その次にあるI18n.tですが、これはja.ymlの表記の通りに翻訳してくれるというメソッドです。
tのあとの()内でどの階層にあるものかということを明記しています。

(ここ結構ハマったところで、しっかり階層を明記してあげないとダメです!)
今回ではenumの下にある、bookの下にある、categoryの下にあるfor_menを訳せという命令になります。
もちろん繰り返すので,for_womenとfor_othersも訳されていきます。

I18n.tの左横とkの右横に[]がありますが、これがf.selectの[]の部分ですね。

もう一つ大事なことがあって、データベースには数値が数値が入りますが、postするパラメータはBook.categoriesのキーの部分です。
検証で見てみると早いのですが、formはこうなります。


![スクリーンショット 2018-07-16 20.53.46.gif](https://qiita-image-store.s3.amazonaws.com/0/147990/e725233a-c118-14df-261d-eb4f4eea3fbb.gif)

valueは数値じゃないんかい！と思うのですが、このような仕様だそうです。
最初ここを0とかにしたら、'0'is not a valid categoryとか言われてエラーになりました。




色々罠が張り巡らされている実装ですが、お役に立てれば幸いです。
Visual Studioで 'stdafx.cpp': No such file or directory  が出た時の対処法 

# 環境
Windows10 Pro x64
OSビルド: 10.0.17314
バージョン: 1803

# 発生した問題
WindowsでVisual Studioを使用して，普段どおりC++のプロジェクトを作成したところ，デフォルトで生成されたファイルのコンパイルが通らない問題が発生しました．

エラーログは以下の通りです

`
E1696	ソース ファイルを開けません "C:\HOGE\PROJECT\PROJECT\PROJECT.CPP"	
E2998	PCH 警告: 不明なエラーが発生しました。IntelliSense PCH ファイルは生成されませんでした。
C1083	ソース ファイルを開けません。'stdafx.cpp':No such file or directory
`

3つ目のエラーは，通常インクルードファイルのパスを間違えた時などに発生することが多いのですが，今回はそもそもVSプロジェクトに組み込まれているcppファイルにこのエラーが発生しました．

# 原因
1つ目のエラーでは，表示されるパスが全て大文字になっていました．
現在のWindowsではディレクトリ毎にファイル名の大文字/小文字を無視するか指定することができるようになっており，基本的には無視するのですが，無視しないようにしていると今回のエラーが発生するようです．
自分の場合，GitをWSL上から操作していた関係上大文字小文字を区別したほうが便利だったので，gitリポジトリをまとめたディレクトリは無視しないように設定していました．そのディレクトリを親として今回のVSプロジェクトを作成してしまったため，このエラーが発生しました．

# 解決策
プロジェクトファイル(.sln)のあるディレクトリに対して，`fsutil.exe`を実行することで解決します

```:cmd
fsutil.exe file setCaseSensitiveInfo <path> disable
```

# 参考サイト
[Windowsでディレクトリ単位での大文字・小文字を区別する設定がWindows 10 Insider Previewに追加されています](https://opcdiary.net/?p=40706)
Vue.js【基本】をまとめてみたPart1

初投稿です。
投稿する中で徐々に慣れていけたらなあと思います。

今回は最近、Vue.jsについて勉強してたので、基本編としてまとめていきます。

Agenda：Vue.jsとは、データバインディング、ディレクティブ、Vue.jsの基本構造

`参考`：
【基礎から学ぶ Vue.js】（下リンク）を購入して読みました。凄くわかりやすかったので一部この記事に書くにあたって参考にしました。ありがとうございます。
https://www.amazon.co.jp/%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E5%AD%A6%E3%81%B6-Vue-js-mio/dp/4863542453

# Vue.jsとは
Vue.jsとはJavaScriptのフレームワーク。（React、Angularに並ぶ三大JSフレームワーク）
本格的に触っているのはVue.jsのみですが、良い点はいくつかあります。

<b>Vue.jsのメリット</b>
・学習コストが低い
　　→ReactやAngularに比べると、HTMLを多少触っただけでも扱いやすい気がする。
・融通が効いてたまらない
　　→拡張機能や開発サポートツールも数多く提供されている。便利。
・ドキュメントの豊富
　　→公式サイト：https://jp.vuejs.org/index.html

公式サイトをみたら一目瞭然です。Vue.js以外にもVuexやNuxt.jsについても豊富なドキュメント。しかも日本語って、、もうなにやってくれてるの（←ここ家庭教師のトライ）。結局何が言いたいかというと「　素晴らしい！！　」

### データバインディング
データと描画を同期させる仕組みのこと。
HTMLで作成するにあたりUIを操作するのは、JavaScriptではご存知のDOM操作です。

```JavaScript:JavaScript
var element = document.getElementById('text'); //要素を探す
element.innerText = 'テキスト入力';               //要素を更新する
```

UIのパターンが膨大になるほどDOMの更新作業が面倒になり、小さなミスを生み出す場合もあります。Webサイトの重大な情報が間違っていたなんてなるととんでもないですね。

面倒な処理をどうにかするために現れたのが<b>データバインディング</b>。これはJavaScriptのデータ（テキストなど）とそれを使用する場所を紐づけて、データに変化が起きたときでも自動的に反映させます。以下は例です。

```HTML:HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue.js!</title>
</head>

<body>
    <!-- Vue.jsのサンプル -->
    <div id="app">{{ message }}</div>
    <!-- Vue.js読み込み -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
    <script>
    /*データバインディング*/
    var app = new Vue({
        el : '#app',
        data : {
            message : "Hello Vue.js!"
        }
    })
    </script>
</body>
</html>
```

この例ではid="app"の場所にある{{ message }}においてデータバインディングがされています。単純なコードではありますけどVueのオプションにて dataのmessageの値が変わると自動的に変わります。

### ディレクティブ
Vue.jsのテンプレートには、`v-if`や`v-bind`といったVue.jsならではの"属性"があります。それぞれ特別な役割を持った属性です。これを「<b>ディレクティブ</b>」と呼びます。

```HTML:HTML
①　　<div key="id"></div>
②　　<div v-bind:key="id"></div>
```

上の２つはどちらも`key`属性に`id`という値を指定していますが、全く別物です。

①...単純な「id」という「文字列」です。
②...`v-bind:key`は、ディレクティブになっている「プロパティ」です。

### Vue.jsの基本構造
アプリケーションの作成にあたって、コンストラクタ関数Vueを使ってVueインスタンスを作成しましょう。（下のような感じで）。この中身においてオプション（どういうデータにどういう処理をしていくか）を追加して生きます。

```JavaScript:Vue.js
var app = new Vue({
   //オプションを追加
})
```
オプションには使用するデータやメソッドを定義しましょう。
代表的なものを５つ挙げました。

```JavaScript:Vue.jsその2
var app = new Vue({
        el : '#app',　 //..①
        data : {
            //..②
        },
        computed : {
　　　　　　　　　　　　　　　　　　　　　　　//..③
        },
        created : {
            //..④
        },
        methods : {
            //..⑤
        }
    })
```

①el
アプリケーションを紐づける要素のセレクタ
②data
アプリケーションで使用するデータ。配列やオブジェクトも登録可能
③computed
関数によって算出されたデータ。通称算出プロパティ
④created
アプリケーションの初期化から生成終了までのサイクルにおいて、特定のタイミングで呼び出されるもの
⑤methods
イベントハンドラ等の細かな実装、アプリケーションで使用するメソッドの登録

<hr>

# まとめ
今回は雑ではありますが、Vue.jsの基本編としてまとめてみました。（Part1なんでまだあるよっていう予告）
視覚的にもわかりやすいと思いますし、大規模なプロジェクトにおいても複雑な処理ができるVue.jsはほんと素晴らしい。

以上です。
最後までみてくれてありがとうございました。
※　随時編集・追加していきます（もちろんVue.jsの続きも記載していきます）。
RaspbeeryPiからのセンサーデータの可視化(SORACOM Harvest編)


#**目的**
RaspberryPiで取得したセンサーデータをSORACOM Harvestに送信(JSON形式)

#**参照**
SORACOM公式サイト
[SORACOM Harvest でデバイスのデータをクラウドで収集・取得・可視化する](https://dev.soracom.io/jp/start/harvest/)


温湿度データ取得の`get_temp()`については、以下参照
[RaspberryPiでDHT11センサーから温湿度データを取得](https://qiita.com/mahko2/items/6f3755c40d130ffa5136)


#**SORACOM Harvestの設定**
<img src="https://qiita-image-store.s3.amazonaws.com/0/22526/772d86a6-1872-148e-bf81-e57866c612cc.png"  width=100%>


#**ソースコード**
```python:sendharvest.py
# coding: UTF-8

import sys
import time
import json
import requests
from gettemp import get_temp

while True:

    try:
        # 温湿度データ取得
        temperature, humidity = get_temp()
        if temperature == 0:
            continue

        # jsondata編集
        data = {"temperature": temperature, "humidity": humidity}

        # SORACOM Harvestに送信
        r = requests.post('http://harvest.soracom.io', data=json.dumps(data),
                          headers={'Content-Type': 'application/json'})
        print r
    except:
        pass

    # 指定された秒数スリープ
    time.sleep(30)
```

#**実行**
実行
`sudo python sendharvest.py`

※成功するとレスポンスコード201が返ってきます

実行結果をSORACOMのコンソールから確認。
赤い線が温度、青い線が湿度です。
<img src="https://qiita-image-store.s3.amazonaws.com/0/22526/da535fcb-7f7e-4f71-66c7-af8995172047.jpeg"  width=100%>
Google Home＋IFTTT＋Googleスプレッドシートに血圧記録

![180716-01.PNG](https://qiita-image-store.s3.amazonaws.com/0/145508/1a9f6461-39c7-ff5e-b823-c6d52bde7476.png)

![180716-02.PNG](https://qiita-image-store.s3.amazonaws.com/0/145508/18f20122-ee97-a3f0-85fb-5c7af51ca4e5.png)

![180716-03.PNG](https://qiita-image-store.s3.amazonaws.com/0/145508/619b517c-1cf5-8653-20e4-c39d2efa3932.png)

![180716-04.PNG](https://qiita-image-store.s3.amazonaws.com/0/145508/32332040-0f12-12bf-df8c-f4b7e108a164.png)
react-router の適用

# react-router について
react-router を使用することで、ルーティングに対応することが出来ます。

# react-router の適用
ここでは[ react-redux を使用しているアプリケーション](https://qiita.com/k-murayama/items/e271276ff2a22e1fec3c) をベースに react-router を適用します。

## react-router-dom のインストール
react-router を使用するために、react-router-dom をインストールします。

~~~cmd
npm install --save react-router-dom
~~~

## `<Route>`の利用方法について
### サンプル
~~~src/components/index.js
import React, { Fragment } from 'react';
import { BrowserRouter, Route } from 'react-router-dom'
import { Provider } from "react-redux";
import HeaderComponent from "./header";
import TopComponent from './top'
import Counter from '../containers/counter'
import FooterComponent from "./footer";

export default class Index extends React.Component {
    render() {
        return (
            <Provider store={ this.props.store }>
                <Fragment>
                    <HeaderComponent/>
                    <BrowserRouter>
                        <Fragment>
                            <Route exact path='/' component={ TopComponent }/>
                            <Route exact path='/counter' component={ Counter }/>
                        </Fragment>
                    </BrowserRouter>
                    <FooterComponent/>
                </Fragment>
            </Provider>
        );
    }
}
~~~
### `<Route>`について
`<Route>`を使用することで、ルーティングを定義することが出来ます。
#### `<Route>`の属性値について
`path`に指定したパス、もしくは、その配下のパスへのリクエスト時に`component`で定義されたコンポーネントが適用されます。
`exact`を指定することで、コンポーネントが適用されるケースを`path`に指定したパスへのリクエスト時のみに限定することが出来ます。
つまり、`exact path='/'`の`exact`を指定しなかった場合、`/counter`へのリクエスト時にも`TopComponent `が適用されてしまいます。

### `<BrowserRouter>`について
`<BrowserRouter>`を使用することにより、その中で`<Route>`が使用出来ます。
`<BrowserRouter>`の直下に使用出来る要素は1つのみです。
複数の`<Route>`を使用したい場合は、`<Fragment>`等、任意のタグ1つを挟むことで、その配下に複数の`<Route>`を使用することが可能になります。

## `<Link>`について
### サンプル
~~~src/components/top.js
import React from 'react';
import { Link } from 'react-router-dom'

export default class TopComponent extends React.Component {
    render() {
        return (
            <div>
                <span>Top</span>
                <br />
                <Link to="/counter">counter</Link>
            </div>
        );
    }
}
~~~
`<Link>`を使用することで、HTMLの`<a>タグ`のようにリンクを作成することができます。
`to`には遷移先を指定し、`<Link>`の中には、表示用文字列等を指定します。

## ソースコード
[GitHub](https://github.com/kazuyuki-murayama/react-router)

## TODO
* react-router-redux
* redux-first-router
Excelで筆算的プログラミング(4)

# 行列積を定義する。

```vba
(A6) =P("V_1 2","V_2 4","内積_0,1")    [10]

Function 内積(ParamArray M())
    Dim S: S = ""
    Select Case UBound(M)
        Case 1: S = WorksheetFunction.SumProduct(M(0), M(1))
        Case 2: S = WorksheetFunction.SumProduct(M(0), M(1), M(2))
    End Select
    内積 = S
End Function
```
# ２次元配列を作る関数

```vba
(A7) =M_("1 2 3, 4 5 6, 7 8 9")        [1]
(A8) =SUM(M_("1 2 3, 4 5 6, 7 8 9"))     [45]  

Function M_(D, Optional L1 = ",", Optional L2 = " ", Optional S = "")
    If D Like "M_*" Then D = Right(D, Len(D) - 2)
    D = WorksheetFunction.Trim(D)
    
    Dim D1: D1 = Split(D, L1)      ' ROW
    Dim D2: D2 = Split(D1(0), L2)  ' COLUMN
    Dim M1: M1 = UBound(D1)
    Dim M2: M2 = UBound(D2)
    ReDim S(M1, M2)
    
    Dim I: For I = 0 To M1
       D2 = Split(WorksheetFunction.Trim(D1(I)), L2)
       Dim J: For J = 0 To M2
           S(I, J) = E(Val(D2(J)), 0)
       Next J
    Next I
    M_ = S
End Function
```


# Trim の仕様の違い
Trim だと、空白の扱いが違う事で、微妙にバグるので、WorksheetFunction.Trimに置き換えます。

```vba
Function P(ParamArray F())
    On Error Resume Next
    Dim M: M = UBound(F)
    Dim A: ReDim A(M)
    Dim I: For I = 0 To M
        Dim S: S = ""
        Select Case TypeName(F(I))
            Case "String"
                Dim D: D = WorksheetFunction.Trim(F(I))　' D = Trim(F(I)) から置き換え
                Select Case True
                    Case D Like "V_*": S = V_(D)
                    Case D Like "R_*": S = R_(D)
                    Case D Like "M_*": S = M_(D)　　　　　' ２次元配列の為に追加
                    Case Else

....
```
Everyday Rails - RSpecによるRailsテスト入門の6章でdeviseのエラー

## 概要
Everyday Rails - RSpecによるRailsテスト入門の6章ではcapybaraを導入する。その時環境のバージョンによってはRSpec実行時にエラーが発生する。エラー解消方法について記述する。

## 実行環境
- Ruby 2.5.0
- Rails 5.1.1
- devise 4.3.0

## エラー内容
`devise` の `SessionsController` で `SyntaxError` が発生する。

```irb
~/Documents/workspace/everydayrails-rspec-2017
$ bin/rspec spec/features
Running via Spring preloader in process 14856

Projects
  user creates a new project (FAILED - 1)

Failures:

  1) Projects user creates a new project
     Failure/Error: click_link "Sign in"

     SyntaxError:
       /Users/hogehoge/Documents/workspace/everydayrails-rspec-2017/vendor/bundle/ruby/2.5.0/gems/devise-4.3.0/app/controllers/devise/sessions_controller.rb:5: syntax error, unexpected '{', expecting keyword_end
       ...ion only: [:create, :destroy] { request.env["devise.skip_tim...
       ...                              ^
       /Users/hogehoge/Documents/workspace/everydayrails-rspec-2017/vendor/bundle/ruby/2.5.0/gems/devise-4.3.0/app/controllers/devise/sessions_controller.rb:5: syntax error, unexpected '}', expecting keyword_end
       ..."devise.skip_timeout"] = true }
       ...                              ^
     # ./spec/features/projects_spec.rb:9:in `block (2 levels) in <top (required)>'
     # -e:1:in `<main>'

Finished in 0.57928 seconds (files took 0.36914 seconds to load)
1 example, 1 failure

Failed examples:

rspec ./spec/features/projects_spec.rb:5 # Projects user creates a new project
```

## エラー解消方法
`Gemfile` の `devise` の行を以下で書き換える。

```rb
gem 'devise', git: 'https://github.com/plataformatec/devise'
```

そして `bundle install` すると `devise` が最新バージョンとなりエラーは解消される。

## エラーの原因
Ruby 2.5.0へのバージョンアップにて `a [] {}` という構文が `SyntaxError` になるように変更された。
devise 4.3.0では構文変更によるバグを解消するパッチが当たっていないため。devise 4.4.0以降でこのエラーは解消されている。

## 参考
https://qiita.com/yuki-nakamura/items/8292a423f1e462df4301
https://github.com/plataformatec/devise/issues/4630
https://bugs.ruby-lang.org/issues/14023
Pythonでダイジェスト認証

ベーシック認証ではなくダイジェスト認証。ちょっとハマったのでメモ。

```python:post.py
# -*- coding: UTF-8 -*-

import json
import requests
from requests.auth import HTTPDigestAuth

url = 'https://xxx.jp/xxx/xxx.php'
username = 'user'
password = 'pass'

headers = {}
headers["Content-Type"]= 'application/json'

payload = {'param':'1234'}

r = requests.post(url, auth=HTTPDigestAuth(username,password), headers=headers, data=json.dumps(payload))

print(r)      # 200
print(r.text) # result
```
Ubuntu16.04にVirtualBoxとVagrantをインストール

# 環境
Ubuntu 16.04
# VirtualBox
```bash
$ sudo vi /etc/apt/sources.list
## 追加
deb http://download.virtualbox.org/virtualbox/debian raring contrib

$ sudo wget -q http://download.virtualbox.org/virtualbox/debian/oracle_vbox.asc -O- | sudo apt-key add -
$ sudo apt update
$ sudo apt install virtualbox
```
# Vagrant
[公式サイト](https://www.vagrantup.com/downloads.html)からdebパッケージダウンロード
(aptでインストールする方法はない？)

```bash
$ mkdir ~/src
$ cd ~/src
$ wget https://releases.hashicorp.com/vagrant/2.1.2/vagrant_2.1.2_x86_64.deb
$ sudo dpkg -i vagrant_2.1.2_x86_64.deb
```

## 参考
https://inexio.jp/20150707-944/
http://rriifftt.hatenablog.com/entry/2015/10/23/110833
xamppでmysqlが動いてくれない…　そんなときはPortをチェック

何かと便利なxamppでMySQLを使おう！！そう思ってスタートをクリックしても動いてくれない…
よーく見るとこんなエラーが…

Problem detected!
18:55:42  [mysql] 	Port 3306 in use by "Unable to open process"!
18:55:42  [mysql] 	MySQL WILL NOT start without the configured ports free!
18:55:42  [mysql] 	You need to uninstall/disable/reconfigure the blocking application
18:55:42  [mysql] 	or reconfigure MySQL and the Control Panel to listen on a different port

3306のポートが既に何かに使われていると言われている…
そんな覚えはないのだが、どうにかしなきゃ仕方がない…ということでMySQLが使うポートの番号を変えることで解決を図ります！！！！

やり方

①MySQLのconfigをクリックしmy.iniを表示させる
②20行目付近と25行目付近にあるportを3306から適当なものに変える（3307など）

なんとこの2ステップで見事解決です！！！
ネットを見てみると、この問題に苦しんでいる人は意外と多いようで…
そういった方達のお力になれれば幸いです
Rails includes でキャッシュする際に、Selectでカラム指定をしたい。

## 状況
- blogとtagsがblog_tagsを中間テーブルとして多対多の状況になっている。
- N+1問題を解決すルため、includesを使う

```ruby

Blog.includes(:tags).each { |blog| p blog.tags.map(&:name) }
```

```sql

SELECT "blogs".* FROM "blogs"
SELECT "blog_tags".* FROM "blog_tags"  WHERE "blog_tags"."blog_id" IN (`取得したblogsのID`)
SELECT "tags".* FROM "tags"  WHERE "tags"."id" IN (`取得したblog_tagsのid`)
```

## やりたいこと

includesでtagsをキャッシュする際にカラムを指定したい

```sql

SELECT "tags".* FROM "tags"  WHERE "tags"."id" IN (`取得したblog_tagsのid`)

↓

SELECT "tags".name FROM "tags"  WHERE "tags"."id" IN (`取得したblog_tagsのid`)
```

## 解決策

下記のように、モデルのアソシエーション定義の部分に、lambda関数を渡してあげる。
こうすると、アソシエーションを使う際にlambda関数が呼ばれる

```app/models/blog.rb

class Blog < ApplicationRecord
  has_many :blog_tags, dependent: :destroy
  has_many :tags, ->{ select('tags.name')}, through: :blog_tags
end
```

## 参考
https://stackoverflow.com/questions/2462203/rails-has-many-with-dynamic-conditions
シェルの偽装 — 条件判定 ( if / then / fi ) は実はコマンドの連続に過ぎないので独自構文に書き換えてみるテスト

# 参考

こちらの記事に触発されて書いてみる。

[プログラマーの君！ 勘違いするな！ シェルスクリプトでは読みやすさのためにスペースを置くな！！ という話 - Qiita](https://qiita.com/piroor/items/0cb44663430bfc66c204)

>シェルスクリプトは「コマンド列を書き連ねたもの」だという原則を忘れないで！

# fi を end で書けるように

fi は構文ではなくコマンドだ。
なのでエイリアスを作ることも出来る。

## スクリプト例


```sh:overwrite.sh
#!/bin/sh

alias end=fi

if [ true ]; then
  echo ok
end # 本来なら fi のはず
```


ちなみに shebang が sh なのは、無設定で `alias` を使うため。
shebang を bash にした場合は `shopt -s expand_aliases` を記載すること。

## 実行結果例

```sh
ok
```

## もっと書き換えてみる


```sh
#!/bin/sh

alias when=if
alias end=fi
alias so=then

when [ true ]; so
  echo ok
end
```

# `[` `]` は書き換えられないの？

工夫したら出来るような気もするが試してない。

開きカッコのコマンド ( `[` ) は、引数に閉じカッコ ( `]` ) を期待するので、こちらも中身の処理まで変える必要がありそう。

参照先の記事にもあるが、 `[` はコマンド。だが `]` は引数の文字列だ。コマンドではない。似たように見えて違う奴ら。

```
$ which [
[: shell built-in command

$ which ]
] not found
```








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
画像の類似度を算出して検索を行うの続き（画像検索エンジンを作る）Elasticsearchは関係なくなってきた

[画像の類似度を算出して検索を行う](https://qiita.com/mokoenator/items/ca58b5a50d7499003054)
からのつづき

#Elasticsearchに連携する
「Vector Scoring」系のプラグインの説明にしたがってインデックスするだけ。
「Vector Scoring」系のプラグインはたくさんあるのでどれか入れておけば問題ない。
Elasticsearchバージョンをシビアにチェックしているのでpom.xmlを書き換えてパッケージにすればOK。
（書き換えても物によって入ったり入らなかったりするので、このへんはよくわかりません。）


##試してみる
結果として使い物にならない。
画像を1000枚、5000、10000と増やしていくと明らかに遅くなる。15000で2分以上かかってしまった。
マシンスペックは4コアCPUとSSD、メモリー１６G。
目標の１００万画像だとしたら・・・133分かかるの？？
このスピードでは話にならない。プラグインのソースをみても、類似度を算出しているだけなのでいじりようがない。
O(n)を真面目に計算しているみたいなので、プラグインというかElasticsearch仕様でドキュメント毎にとりだして真面目に実行しているのではないかと想像する。
Elasticsearchを改造か？と思った。
そもそもElasticsearchがコサイン類似度の塊みたいなものなんじゃ？？

#解決策
困った時のGPU。CPUバウンドだから解決できるはずなので・・またCUDACか・・・
未来が見えないので、Pythonとcupyでサクッと書いてみる。

15000画像が4秒でおわる・・・・CPUバウンド以前の問題な気がする。

Elasticsearchはインデックスできる前提で頑張れる子ですね。
Elasticsearchは忘れて・・・

適当に作ったので、最適化してみたら70000画像で3秒になった。

cupyで書くよりnumpyじゃないか？と思いnumpyにサクッと書き直して実行

貧弱なGPUだからか？cupy:numpyの速度に変化なし
ちょっとcuypがはやいかなぁ？くらい。
cupyのコツがあるのか？GPUのLOADも大したことない。

Elasticsearchに比べて、70000画像*4096次元の計算するのに3秒なのでとてつもなく早くなった。
サービス化するなら、さらに１００倍早くしないと。。。
Pythonはシングルコアなので、複数プロセス立ち上げればマルチコア分くらいは早くなる?


以下に全画像のコサイン類似度を算出するコード（これが最速コードかどうかわかりません・・・）
検索される一つのクエリ対、全画像のコサイン類似度を算出する

```py
#データの準備
#これはクエリ画像
A=numpy.array([[0.1345,0.5781・・・4096個]])

#これは検索される画像（事前に読み込んでおく）
vectors=numpy.array([[0.45345,0.22781・・・4096個],[0.17878345,0.1345781・・・4096個]・・・画像の数])

#コサイン類似度
X = (A * vectors).sum(axis=1, keepdims=True) /
 (numpy.sqrt(numpy.square(A).sum(axis=1, keepdims=True)) * numpy.sqrt(numpy.square(vectors).sum(axis=1, keepdims=True)))

#結果を一次元に変換
NX=X.flatten()
#ソート
index=np.argsort(NX,axis=0)

#indexを逆向きに取り出せば、スコア順にとれる
```
文章みたいに軸が変化しないから超簡単！
numpy.arrayをdtype=np.float32にすれば指定なしの倍くらい早くなる。
（計算精度は低くても問題ないと思っている）
dtype=np.float16は逆に遅かった。
さらに「(cp.sqrt(cp.square(A).sum(axis=1, keepdims=True))」の部分は、検索毎に計算しなくてもよいので事前に計算しておくことでさらに早くなる。



#WEBサービス化
全体の構成
![kousei.PNG](https://qiita-image-store.s3.amazonaws.com/0/185049/1ca61594-b253-5d8a-0060-14c0378ef598.png)



pythonのtornadoを使ってhttp(rest)で検索できるようにする。

問題点は・・・
大量データなので起動時間が遅い（我慢できる）。
１スレッドだけしか動かない（今後の課題）。

##WEBサービス化で見えてきたこと
画像から画像にジャンプしていくような有効グラフ的な感じで使えるようにしてみた。
かなり面白い。
データ・ダイブの一つだと思う。

今後～
画像検索エンジンは強化しないと話にならない。
特徴量なので何かの区切り（サイト、お店、建物）で混ぜて、区切り特徴量でブラウズしたり・・・実験してみたい
商品のおすすめに、画像軸が追加できたり・・・（ECでも実店舗でも）


この記事に書いたことを使って[ファッション検索サービスファンネル](https://qiita.com/mokoenator/items/6807132ce59913186a9b)を作りました。
ALVRでSteamVRが起動しなくなった話

Oculus goを買ってみたのでALVRでSteamVRを使ってみました。

環境を構築してうまく動作するのを確認したのですが、
PCを再起動後にもう一度使用しようとするとSteamVRが立ち上がらなくなる現象に会いました。
一応解決したので、メモとして残しておこうと思います。

### 環境
OS:Windows 10
GPU:GeForce 1060

### 現象
ALVRを起動し、「Start server」を押下すると、SteamVRが「SteamVRの主要コンポーネントが正しく動作していません(301)」でSteamVRの起動に失敗する。

### 試したこと
以下のことを試しましたが症状は変わらず。

* SteamVRの再インストール
* Steamの再インストール
* NVIDIAドライバの再インストール
* ALVRのclient/serverのバージョンが異なっていた(v2.1.5/v2.1.4)のでサーバ側のバージョンを変更

### 原因
ALVRの「Sound」設定で、「Steam sound」のチェックが入った状態で「S/PDIF インターフェイス」を選択していたのが原因のようでした。

オンボードのデバイスなどの場合は現象が発生しませんし、「Steam sound」のチェックが入っていない状態でも現象は発生しませんでした。



最初の環境構築時、動作確認後にALVRの「Sound」設定を変更していたので気づきませんでした。
いまいち根本原因まで調べ切れていないので、端末側のサウンド周りの設定を変えれば動作するのかもしれません。

とりあえず、動いていたのに、動作しなくなったって時はサウンドデバイス周りも疑ってみましょうってことで。。。
CSSでマーカーラインを実装しよう

蛍光ペンで塗られたようなマーカー線をCSSで実装したのでメモです。

まずは失敗例
擬似要素でマーカー線を実装した例です。

```HTML:HTML
<div class="box">
  <p>今日はとても暑かったです。気温は、東京で<span class="marker">40℃</span>って暑すぎだろ・・・</p>
</div>
```

```CSS:CSS
.marker {
  position: relative;
}
.marker::after {
  content: '';
  background: orange;
  width: 100%;
  height: 10px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}
```

これでもちゃんとマーカー線になってます。
ただ問題なのはマーカー線の部分が、折り返しにかかったときだけ上手く表示されません。(折り返しがない場合ならこの方法でも問題なしです。)

僕が実装したいのは、折り返してもちゃんとマーカー線が表示させたいので、別の方法を試してみます。

```html:html
<div class="box">
  <p>今日はとても暑かったです。気温は、<span class="marker">東京で40℃</span>って暑すぎだろー</p>
</div>
```
```css:css
.marker {
  background: linear-gradient(transparent 50%, orange 0%);
}
```

上手く出来ましたね:relaxed:
linear-gradientで解決することができました！

線の太さはtransparentの値をいじるだけです。

注意点：iOS で見てみると透明になるはずだった部分が黒くなるようです。

解決方法は
`background: linear-gradient(rgba(255, 141, 0, 0) 50%, orange 0%);`
`transparent` の部分を `rgba()` に変更すれば解決です！