OmniAICreator/Qiita-1.07M huggingface dataset:
始めよう React（基礎編）！ Part 1 - React とは

これからReactについて、書いていく予定です。
毎週１〜２回投稿する予定になります！
興味がある方是非ご覧下さい！

本章はReactの基礎を紹介して行きます。
よろしくお願いします。

#Reactとは
ReactはJavaScriptで構築したJavaScriptのライブラリーの一種です。
Facebook社が2013年で開発にしたライブラリーで、
Twitter, Airbnb, Uberなどの大手企業で採用されております。

#Reactの考え方
・コンポーネント指向
　ページは色んなパーツ（コンポーネント）で構成しています。
　一つ一つのコンポーネントを組合わせてWebApplicationを作ります。
　一つのコンポーネントが変化すると、そのコンポーネントだけがレンダリングして
　他の部分は変わらないままです。(一番シンプルな影響として、UXがよくなります)

#Reactができること
　1.WebApplication
　2.Android と IOS の APP
　　（React Native：　Reactの書き方でAndroidとIOSを同時に作れます。)

#Reactの書き方（JSX）
　簡単にイメージすると言うと、
　Scriptタグ内またはJSファイル内でHTMLを書くことです。
　こちらでは、簡単にJSXを理解する程度で大丈夫です。　

```html:sample.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <div id="app"></div>
<!-- ↓ （ここからはJSX）　Script内でHtmlを書ける　-->

　<!-- ↓　babelでReactに適用できるJSの書き方に変換されます。　　-->
  <script type="text/babel">
    // htmlをレンダリング
    ReactDOM.render(
      <h1>hello world</h1>,
      document.getElementById("app")
    )
  </script>

<!-- ↑ （ここまではJSX）　　-->

<!-- ↓ （ここからは通常のHTMLの書き方　JavaScriptをImport）　　-->

  <!-- ↓ HTMLファイルなので、イメージしやすい為に今回はこの形でReactを引用します。　-->
  <script src="https://cdn.bootcss.com/react/16.2.0/umd/react.development.js"></script>
  <script src="https://cdn.bootcss.com/react-dom/16.2.0/umd/react-dom.development.js"></script>
　<!-- ↓ babelはReactの書き方を変換する為のライブラリーになります。（主にJavaScriptの書き方の変換で使う）　　-->
　<!-- 今回紹介するのはReactなので割愛します。　-->
  <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>
</body>
</html>
```

　上記のコードをHtmlを打ち込めば、ブラウザでHello Worldが見えます。

・実際にbabelはどんな動きしたのは見てみましょ。
　https://babeljs.io/
　babelのホームページにアクセスして、上部のTry it outをクリック
　左側のreactをチェックを入れて、先ほどのJSXコードを貼り付けてください。

```JSX:sample.html
    ReactDOM.render(
      <h1>hello world</h1>,
      document.getElementById("app")
    )
```
　JSコードに変換
　↓↓↓↓↓↓↓↓

```JS
ReactDOM.render(React.createElement(
  "h1",
  null,
  "hello world"
), document.getElementById("app"));
```
　この様なイメージになります。

#最後に
今回のReactの簡単な紹介はここまでです。
このシリーズはReactの基本知識を紹介して行く予定になります。
例えば：
・WebPackでReactの環境構築
・React-router
・Create-react-appなど

興味がある方は是非読んでください。
SpinnakerからIncoming Webhooksで通知を飛ばす

#TL;DR
Incoming Webhooksで発行されるWebhook URLから 
"https://hooks.slack.com/services/" 以降をtokenとして与える。

```yaml:.hal/config
notifications:
    slack:
      enabled: true
      botName: Spinnaker-Bot
      token: AAAAAAAAA/BBBBBBBBB/abcdefghijklmnopqrstuvwx
```
※ Spinnakerの管理にHalyardを使っている前提
※ Spinnakerのバージョンは1.9.3

#今回解決したい問題
Spinnakerで実施されるパイプラインの状況をSlackへ通知したい。
また，その際にCustom bot userを作らず，Incoming Webhooksで簡単に開始したい。(これで十分!!)

#解決方法
基本に忠実に[公式ドキュメント](https://www.spinnaker.io/setup/features/notifications/#slack)を見るが，Incoming Webhooksについては言及なし。

本家のGithubを確認すると下記のPRで確かにIncoming Webhooksはサポートされている
[feat(slack): Support slack incoming webhooks #199](https://github.com/spinnaker/echo/pull/199)

結局コードを追ってみると[ココ](https://github.com/spinnaker/echo/blob/version-2.0.1/echo-notifications/src/main/groovy/com/netflix/spinnaker/echo/config/SlackConfig.groovy#L74)でTokenがIncoming Webhooksの形かどうか確認している。よって，Incoming Webhooksで発行されるWebhook URLの "https://hooks.slack.com/services/" 以降をtokenとして与えるのが正解。

コード上で裏付けすると[UnitTest](https://github.com/spinnaker/echo/blob/version-2.0.1/echo-notifications/src/test/groovy/com/netflix/spinnaker/echo/config/SlackConfigSpec.groovy#L23)でちゃんと試験している。

#確認結果
期待通りに動作しているかは[ログにも出力](https://github.com/spinnaker/echo/blob/version-2.0.1/echo-notifications/src/main/groovy/com/netflix/spinnaker/echo/config/SlackConfig.groovy#L48)される。
StackdriverからEchoコンポーネントのログを確認するとこんな感じ。

```2018-09-20 16:34:54.000 PDT
2018-09-20 23:34:54.520 INFO 1 --- [ main] c.n.spinnaker.echo.config.SlackConfig : Using Slack incoming webhooks: true.```

Slack上の通知結果
<img width="590" alt="Screen Shot 2018-09-20 at 5.20.08 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/216192/b2bbbcc8-6d9c-4bda-f04d-2156fc920516.png">
GoogleChrome拡張 Vimium で好きなショートカットだけ有効化 (デフォルトのキーマップ一覧あり)


## 好きなショートカットだけ有効化する

Vimiumの設定ページを使う

chrome-extension://dbepggeogbaibhgnhhndojpepiihcmeb/pages/options.html

最上段に ummapAll を書いた後に、好きなオプションを有効化していけば良い。

例:

```
unmapAll
map gg  scrollToTop
map G  scrollToBottom
map d  scrollPageDown
map u  scrollPageUp
```


# デフォルトのキーマップは以下の通り

```
# Navigating the page

map j scrollDown
map <c-e> scrollDown
map k scrollUp
map <c-y> scrollUp
map gg scrollToTop
map G scrollToBottom
map d scrollPageDown
map u scrollPageUp
map - scrollFullPageDown
map - scrollFullPageUp
map h scrollLeft
map l scrollRight
map r reload
map yy copyCurrentUrl
map p openCopiedUrlInCurrentTab
map P openCopiedUrlInNewTab
map i enterInsertMode
map v enterVisualMode
map gi focusInput
map f LinkHints.activateMode
map F LinkHints.activateModeToOpenInNewTab
map - LinkHints.activateModeToOpenInNewForegroundTab
map gf nextFrame
map gF mainFrame

# Using the vomnibar

map o Vomnibar.activate
map O Vomnibar.activateInNewTab
map b Vomnibar.activateBookmarks
map B Vomnibar.activateBookmarksInNewTab
map T Vomnibar.activateTabSelection
map - enterFindMode
map n performFind
map N performBackwardsFind

# Navigating history

map H goBack
map L goForward

# Manipulating tabs

map t createTab
map J previousTab
map gT previousTab
map K nextTab
map gt nextTab
map ^ visitPreviousTab
map g0 firstTab
map g$ lastTab
map yt duplicateTab
map <a-p> togglePinTab
map <a-m> toggleMuteTab
map x removeTab
map X restoreTab

# Miscellaneous

map ? showHelp
```


## Links

- [Gist](https://gist.github.com/YumaInaura/9ce0e5f2f4eaf50786048be8582bc6bc)

# Link

[まだトラックパッドでChromeを操作しているの？ そろそろキーボードだけで操作しようぜ！！ Chromeを使い倒そう！！ - Qiita](https://qiita.com/dodonki1223/items/205a937c21030d1a511e)








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
[ASP.NET Core 2.1]AJAXでAntiForgeryTokenを使う

RequestVerificationTokenヘッダにトークンを入れてあげる。
コードを見た方が早い。

```csharp
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf

$.ajax({
    url: "/test",
    headers: { "RequestVerificationToken":"@(Xsrf.GetAndStoreTokens(Context).RequestToken)" }
}).done(function (result) {
}).fail(function () {
}).always(function () {
})
```

なお、あまり無いとは思うけど、popoverのコンテンツに使うなどの理由でinput要素ごと埋め込みたいときはこうする。

```csharp
@using System.IO;

@{
    var writer = new StringWriter();
    Html.AntiForgeryToken().WriteTo(writer, HtmlEncoder);
    var token = writer.ToString();
    var content= $@"
<form action=""/test"" method=""post"">
    {token}
</form>
";
}
```
php-master-changes 2018-09-20

マージコミット省いてたけど、ひょっとしてどの下位バージョンから入ってる奴かは記載した方が有用なのではないか……？が、今日ではない（手動で入れていくにはめんどっちく、スクリプトいじる時間が空いた時にでも）

# 2018-09-20
## dstogov: Use macro
- https://github.com/php/php-src/commit/a5208c393dcf0fc278e01dabbca909a26499110b
- ポインタの指す先が [arena](https://phpinternals.net/categories/zend_arena) の領域内かをチェックするマクロ IN_ARENA() を追加

## cmb69: Update to SQLite 3.25.1
- https://github.com/php/php-src/commit/fe3ec212dc5a86b56a46f8ec58a9b8dc71ebddbd
- ext/sqlite3 で SQLite を 3.25.1 に更新

## dstogov: Fixed bug [#76711](https://bugs.php.net/bug.php?id=76711) (OPcache enabled triggers false-positive "Illegal string offset")
- https://github.com/php/php-src/commit/b8ffa3707c07e6edbe5db5a3fdf5516ba1f6bef0
- ext/opcache 有効時、開発中の PHP 7.3 で文字列へのオフセット指定がエラーを吐く問題の修正
- 2013 年に opcache の最適化機能へ、op_array のリテラル表で同一の定数をまとめる[コンパクションが入った](https://github.com/php/php-src/commit/2bfb523f45cc0c64b5b63f9ad7fb6ec7c701d695#diff-6712d7122cf31b7ef7e227fd68e6d959)
- 2017 年に zval の u2 へ、マクロ足すほどじゃないけど u2 使いたい、という用途向けの extra というフィールドと、アクセス用マクロ Z_EXTRA() が[入った](https://github.com/php/php-src/commit/49d90dcc4d9319419a05146bafd4df8f4399c697)
- 今年 7 月に [#63217](https://bugs.php.net/bug.php?id=63217) を修正する際、[Z_EXTRA() を配列への数値インデックスアクセスで利用するようになり](https://github.com/php/php-src/commit/28b03f9605e1cf81709c2bf1c2e5cf05046bd922)、この際定数表コンパクションにバグが入った
- 定数表のコンパクションで Z_EXTRA が 1 のものと 0 のものを混ぜて扱いきれず、数値インデックスアクセスとそれ以外で同じ値のリテラルを使おうとするとバグることになった、という流れかな
Visual Studio Codeを日本語にする方法（2018年版）

Visual Studio Codeをバージョンアップなどすると、英語版になってしまいます。これを日本語にする設定を調べると、どうも昨年までのやり方では日本語にならなかったので「2018年版」として、残しておきます。

## Language Packをインストール

最近は（？）これが必要のようです。

![2018-09-21_8-39-34.png](https://qiita-image-store.s3.amazonaws.com/0/3977/43ef8a5b-096b-3f6e-c10e-8ef3da56c829.png)

ウィンドウ右側の「拡張機能（Extensions）」をクリックして、「japanese」などのキーワードで検索をします。すると、「Japanese Language Pack」という拡張機能が見つかるので、これをインストールします。

## localeを jaにする

コマンドパレットを表示し（F1キーまたは、Ctrl（Cmd）+Shift+P）、「language」などで検索をし、「Configuare Display Language」を選択します。刷ると、次のようなファイルが開くので、設定を「ja」に変えます。

```
{
	// Defines VS Code's display language.
	// See https://go.microsoft.com/fwlink/?LinkId=761051 for a list of supported languages.
	
	"locale":"ja" // Changes will not take effect until VS Code has been restarted.
}
```

これでファイルを保存して再起動すれば日本語になりました。Language Packをインストールしないといけなくなったみたいですね。
Selenium でリンクをたどる　(Java)

Selenium でリンクをたどるサンプルです。
次のプログラムを Java で書いてみました。
[Selenium でリンクをたどる　(Python)](https://qiita.com/ekzemplaro/items/75cd3e31fd643861e5f3)

```java:follow_link.java
// -----------------------------------------------------------------------
/*
	follow_link.java

				Sep/21/2018
*/
// ----------------------------------------------------------------------- 
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.By;
 
public class follow_link {
 
// ----------------------------------------------------------------------- 
public static void main(String[] args) {
	System.err.println ("*** 開始 ***");

	String url = "https://ekzemplaro.org";

	WebDriver driver = new FirefoxDriver();
	driver.get(url);

	WebElement tag = driver.findElement(By.id("ekzemplaro"));

	tag.click();

	tag = driver.findElement(By.linkText("English"));

	tag.click();

	System.err.println ("*** 終了 ***");
}

// ----------------------------------------------------------------------- 
}

// ----------------------------------------------------------------------- 
```

```text:Makefile
follow_link.class: follow_link.java
	javac follow_link.java -cp ./client-combined-3.14.0.jar 
clean:
	rm -f follow_link.class
```

実行方法

```bash
export CLASSPATH=.:./client-combined-3.14.0.jar:./guava-26.0-jre.jar:./okhttp-3.11.0.jar:./okio-2.0.0.jar:./kotlin-stdlib-1.2.60.jar:./commons-exec-1.3.jar
#
java follow_link
```
結合セルの番号を取得するマクロ

エクセルの表より結合されたセルに入力された値を取得するマクロ。
ただし、グレーアウトされた行の番号は取得しない。
※下記の画像の場合であれば、No.2,4,6,13～16 を取得。

【画像】
![image.png](https://qiita-image-store.s3.amazonaws.com/0/289724/673cf3f3-17aa-baee-9192-a5d9825cd8dd.png)


尚、当マクロを使用するためには、以下の設定が必要。 


【参照設定ダイアログを表示】

ツール　＞　参照設定　＞　「Microsoft Scripting Runtime」をクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/289724/f6e1e9a7-5bc3-4a66-a190-04f354ccbb4c.png)



以下、マクロ。

```vb
Sub エビデンス取得No一覧()
    
    Dim MaxRow As Long
    Dim MaxCol As Long
    
    '表の最終行と最終列を取得
    With ActiveSheet.UsedRange
        MaxRow = .Find("*", , xlFormulas, , xlByRows, xlPrevious).Row
        MaxCol = .Find("*", , xlFormulas, , xlByColumns, xlPrevious).Column
    End With
    
    '表の最初行
    Dim starRow As Long
    starRow = 6
    
    '番号列
    Dim nmColum As Long
    nmColum = 2
    
    '結果列
    Dim resultColum As Long
    resultColum = 17
    
    '結果列の色と番号列の値
    Dim cellColor As String
    Dim val As String
    
    Dim numList As Collection
    Set numList = New Collection
    
    Dim outMsg As String
        
    Dim fso As FileSystemObject
    Set fso = New FileSystemObject ' インスタンス化
        
    Dim dirNm As String
    dirNm = "C:\VBA_TMP"
    Dim fileNm As String
    fileNm = "tmpNum.txt"
    
    Dim fullPath As String
    fullPath = fso.BuildPath(dirNm, fileNm)
    
    If (fso.FileExists(fullPath)) Then
        '何もしない
    Else
        fso.CreateFolder (dirNm)
    End If
    
    '出力ファイルを作成 or 開く
    Dim ts As TextStream
    Set ts = fso.OpenTextFile(fullPath, ForWriting, True, TristateFalse) ' ファイルを Shift-JIS で開く
                
        
    For i = starRow To MaxRow
        cellColor = Cells(i, resultColum).Interior.color
        val = Cells(i, nmColum).Value
       
       
        If val <> "" And cellColor = "16777215" Then
            ts.WriteLine (val)
        End If
    Next i
    
    ts.Close ' ファイルを閉じる
    
    ' 後始末
    Set ts = Nothing
    Set fso = Nothing
    
    
    'クリップボードにエビデンス取得番号を格納
    SetCB fullPath

    MsgBox "エビデンス取得番号一覧ファイルを作成しました。" & Chr(13) & "保存先：" & fullPath & Chr(13) & Chr(13) & "※上記保存先のファイルパスはクリップボードにコピーされました。"
    
   
End Sub

Private Sub SetCB(ByVal str As String)
'クリップボードに文字列を格納
  With CreateObject("Forms.TextBox.1")
    .MultiLine = True
    .Text = str
    .SelStart = 0
    .SelLength = .TextLength
    .Copy
  End With
End Sub
```
Courseraの機械学習コース(スタンフォード大学提供)の課題を日本語訳してみました

スタンフォード大学が提供する[Courseraの機械学習コース](https://www.coursera.org/learn/machine-learning)の課題を日本語訳して、GitHubに公開してみました。

[Courseraの機械学習コースの日本語訳](https://github.com/k-tamura/coursera-machine-learning-ja)

課題に含まれるPDFとスクリプト内のコメント部分を日本語訳しています。

![ml.png](https://qiita-image-store.s3.amazonaws.com/0/43869/78ad7673-9c56-4cfc-ae11-e2eeeea98a00.png)

以下のような方（で特に英語で苦戦した、しそうな方）にとって、役に立つのではないかと思います。

- これから機械学習の勉強を初めてみようと思っている方
- このコースを受けたけれど、挫折した方
- 講義のビデオは見たけれど、課題をやっていない方
- このコースを既に修了したけれど、オプションの演習などを飛ばした方
- このコースを既に修了したけれど、スクリプトの細部の実装などを見ていない方
- このコースを既に修了したけれど、今の自分の能力を確認したい方（例えば、受講当時よりも、洗練されたOctaveの実装ができるかを確認してみる）
- Octave以外の言語（Pythonなど）で課題を１から実装してみたい方
- 機械学習の基礎を勉強し直したい方

## 誤訳などを見つけたら

思いの外、量がたくさんあったので、翻訳が雑になってる箇所があることは自覚しています。以下を見つけたら、プルリクエストやイシュー登録していただけると助かります。もちろん、このページにコメントしていただいてもかまいません。

- 誤訳
- 翻訳の漏れ
- 翻訳の改善（意訳など）が必要
- 用語や表現の不統一
- Typo

専門用語の日本語訳は、最も一般的と思われるものを選択した**つもり**ですが、そうでない場合は教えていただけるとうれしいです。

[このコースで使用された用語とその日本語訳](https://github.com/k-tamura/coursera-machine-learning-ja/blob/master/glossary.md)

## まだこのコースを受けていない方へ

このコースを受講する前提条件（必須条件）は、高校レベルの数学がきちんと理解できていることだと思います。前提知識には微分積分なども含まれるので、そのあたりの知識が無い方やしばらく数学と離れていた方は、以下の本を読んでおくといいかもしれません。

[![51ahkp10phL.jpg](https://qiita-image-store.s3.amazonaws.com/0/43869/9900058e-c360-f94a-118b-b908ab5dbb34.jpeg)](https://www.amazon.co.jp/dp/B077SCQGQ3/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1
)

この本は、機械学習の習得に必要最低限の数学の知識が得られるような構成になっています。一般的な機械学習の理解には必要のない数学の分野（幾何学など）については、この本では扱わないので、高校数学を一からやり直す必要は無いと思います。

必須ではないですが、あると理解しやすい知識は、以下です。

 - 線形代数
 - Octave
 - 英語

ただし、最初の2つはコース内で割と丁寧に解説してもらえるので、知識が無くても問題ありません。意外と要求されるのは３つ目の英語力かもしれません。というのも、以下のようなことがあるので、英語ができる人とそうでない人とでは、学習時間にかなりの差が出るからです。

 - 一部のセクションに日本語字幕が無い
 - 日本語字幕に、誤訳や日本語として分かりにくい箇所がある
 - 日本語字幕が一瞬で消えることがある（長文が0.1秒レベルで消えたり）
 - 日本語字幕のタイミングがずれているセクションがある（徐々にずれたり、まったくあってなかったり）
 - 「feature」を「フィーチャー」と訳したり、「機能」と訳したり、訳がバラバラなことがある
 - 字幕とプレゼン資料の両方を見ないといけない（字幕が邪魔でプレゼン資料が見えにくいことも）
 - 要約と課題は全て英語

こういった小さなトラップ（？）がところどころにあります。数学的な証明を省略しているようなセクションに限って、字幕が徐々にずれたりもします。その上、英語の音声をミュートしていたりすると、証明を省略したことが分からないので、途中から理解不能になります。それから、以下のようにそれまで全く出てこなかったことば（「ガウス分布」）について、急に言及する箇所もありました。

![Screenshot_2018-08-30 Implementation Note Unrolling Parameters - スタンフォード大学（Stanford University） Coursera(3).png](https://qiita-image-store.s3.amazonaws.com/0/43869/fba5c0ca-86c3-fc12-9e06-dc9260e43164.png)

しかし、実際に英語ではそんな話はしていません。

![Screenshot_2018-08-30 Implementation Note Unrolling Parameters - スタンフォード大学（Stanford University） Coursera(1).png](https://qiita-image-store.s3.amazonaws.com/0/43869/b4d0b58d-8d1f-73f8-8065-6109a9f89e58.png)

そんなときは、英語の字幕テキストを見て下さい。

![Screenshot_2018-08-30 Implementation Note Unrolling Parameters - スタンフォード大学（Stanford University） Coursera.png](https://qiita-image-store.s3.amazonaws.com/0/43869/9cce6ccc-939b-5087-e1f4-4cff5bed5583.png)

※そうは言っても、字幕があるおかげでかなり助かったので、**翻訳してくださった方にはとても感謝しています**:bow_tone1:。

ちなみに字幕はWeb上で日本語化できるようになっているので、後で見る人のために余力がある人は、未翻訳部分や誤訳を翻訳していただけると、これから勉強する人のためになると思います（私も時間があればやりたいですが...）。
Vivadoの使用中にのみVivadoへのパスを通す

# はじめに

本記事では，Linux環境でVivadoを使うことを前提としています．提案する手法は以下の2つの環境で期待通りに動作することを検証済みです．

- 環境1: Ubuntu 16.04LTS
    - Vivado 2018.1
- 環境2: Windows Subsystem for Linux (Ubuntu 16.04 LTS)
    - Vivado 2017.4

# 問題: settings64.shを使ったら一部のコマンドが使えなくなった

Linux環境でVivadoを使う際，以下のようにパスを通す必要があります．

```bash
$ source path/to/directory/Xilinx/Vivado/2017.4/settings64.sh
```

このコマンドを.bashrcに書いておけば，Vivadoを起動する度にパスを通す必要がなくなるため便利です．しかしパスを通した後，一部のコマンドのパスがVivadoのディレクトリ下にあるものに変更されることがあります．

```bash
$ which cmake
/usr/bin/cmake
$ source path/to/directory/Xilinx/Vivado/2017.4/settings64.sh
$ which cmake
path/to/directory/Xilinx/SDK/2017.4/tps/lnx64/cmake-3.3.2/bin/cmake # 変わった！
```

この問題に対処する方法としては，Vivadoを起動する度に手動でパスを通したり新たに端末を開くことなどが考えられます．しかし頻繁にVivadoを使うユーザからすると非常に面倒です．できればVivadoの使用中はVivadoのコマンドを参照し，それ以外の場合は普段のコマンドが使えることが望ましいです．

# 解決策

## Vivadoの起動中にのみパスを通すようにする

前述の問題を回避するために，Vivadoの使用時のみVivadoのディレクトリへパスを通します．.bashrcに以下を追記しましょう．

```bash
# vivado
function vivado(){
    # initialize
    source path/to/directory/Xilinx/Vivado/2017.4/settings64.sh
    
    # activate
    path/to/directory/Xilinx/Vivado/2017.4/bin/vivado $@
    
    # remove path
    xilinx_path=(`echo $PATH | tr ":" "\n" | grep Xilinx`)
    for ((i = 0; i < ${#xilinx_path[@]}; i++)); do
        export PATH=`echo -n $PATH | awk -v RS=: -v ORS=: '$0 != "'${xilinx_path[$i]}'"' | sed 's/:$//'`
    done
}
```

vivadoのラッパ関数をbashで作成し，起動時にパスを通すようにします．vivadoの終了後に"Xilinx"の文字列が含まれるパスを\$PATHから削除することで，作業後に既存のコマンドが使えます．なおvivadoの実行は絶対パスで行います．"vivado $@"のようにすると，vivado関数が永久的に呼び出されてしまうためです．

## 副作用

この手法は，パスを通す前に\$PATHが"Xilinx"の文字列を含まないことを前提としています．もしお使いの環境で既に"Xilinx"の文字列を含むパスが存在する場合，この手法はオススメできません．

# おわりに

.bashrcにvivadoのラッパ関数を記述し，vivadoの使用時にのみVivadoへパスを通す手法を提案しました．ちなみに筆者はVivado HLSのラッパ関数も作って使っています．Vivado，Vivado HLSを使うたびにパスのことで悩まなくなるので非常に便利です．もし他にも賢いやり方があったり，全く違う方法でこの問題に対処している方がいましたら，是非コメントでお教えください！
Xcode10アップデート後にreact-nativeのiOSビルドが通らなくなった人向けの記事

xcode10アップデート後にreact-nativeのiOSビルドが通らなくなったので対処方法を記載

# エラーパターン1: error: Build input file cannot be found: '/react-native/third-party'
<img width="1091" alt="スクリーンショット 2018-09-21 03.04.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/170824/606f6f4b-8e97-dae9-2fb5-c2f5ddf34a2a.png">

他にも、 **'config.h' file not found**が表示されるパターンもあったが、同じ対処方法で解消できた

## 対処方法
 * 参考: https://github.com/facebook/react-native/issues/14382

```sh
$ cd node_modules/react-native/third-party/glog-0.3.4/
$ ../../scripts/ios-configure-glog.sh
$ cd ../../../../
$ react-native run-ios
```

これで上記のエラーは解消されるはず

# エラーパターン2:　error: Build input file cannot be found: '/libfishhook.a'

<img width="1089" alt="スクリーンショット 2018-09-21 03.15.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/170824/1acdaa9b-bbe1-c6ae-ba69-39fe9f81993f.png">

## 対処方法
 * 参考: https://github.com/facebook/react-native/issues/19569

### xcodeを開く
```sh
$ open ios/[プロジェクト名].xcodeproj
```

### xcodeで以下を操作

1. 画像の順番でクリックしていく
<img width="1238" alt="スクリーンショット 2018-09-21 03.20.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/170824/55f4e489-d24e-5053-e9b3-017214ed80d7.png">

1. **libfishhook.a**を選択して**「-」**をクリック
<img width="803" alt="スクリーンショット 2018-09-21 03.25.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/170824/2d19ba1a-1f14-d5b9-56ef-e52d4dc450e2.png">

1. **「+」**をクリックして、**libfishhook.a**を選択してAddをクリック<img width="971" alt="スクリーンショット 2018-09-21 03.26.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/170824/9af79352-1820-4a56-b778-8e167b406767.png">

1. **libfishhook.a**が追加される
<img width="808" alt="スクリーンショット 2018-09-21 03.27.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/170824/6b45a04f-c7aa-6820-1498-3e79cdfe8fe3.png">

### コマンドライン

```sh
$ react-native run-ios
```
<img width="1089" alt="スクリーンショット 2018-09-21 03.30.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/170824/02145ef7-26de-aeb2-0bd1-032ca9b4607d.png">

ビルドが通るようになった
Xcode 10 & New Build System (Default) でビルドするまで

# 前提
```
- Version 10.0 (10A255)
- macOS Sierra 10.13.6 以降
- Swift 4
- iOS 12
```

# エラーメッセージ
Xcode 10 でビルドしようとしたら、
`Multiple commands error when building with Xcode 10`
が出てビルドが通らなかった。

# 設定
- Workspace Settings を選択
<img width="296" alt="スクリーンショット 2018-09-21 1.38.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/38822/fbe3d496-48aa-c07d-d4ae-1fe6cbaaa380.png">

- New Build System を選択（Xcode 10 だと基本的に選択されている）
<img width="475" alt="スクリーンショット 2018-09-21 1.38.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/38822/a8a72a32-f6be-dc1d-28ec-212653c180a7.png">

- Product Name の箇所を書き換える
<img width="930" alt="スクリーンショット 2018-09-21 1.40.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/38822/8164b829-c044-c758-4d1a-0aa009481bc6.png">
Product Name に適当な文字列（`$(TARGET_NAME)basi`）入れるとビルドが通るようになる。
一度ビルドが通るようになれば、Product Name を `$(TARGET_NAME)` に戻しても問題なくビルドが通る。

上記の設定をしてもビルドが通らない場合は、`New Build System` -> `Legacy Build System` に切り替えることでビルドが通るようになる。

## 参考
- https://stackoverflow.com/questions/50718018/xcode-10-error-multiple-commands-produce
【Python】正規表現でタグ(HTML, XML, ...)を扱う

重たいXMLファイルやHTMLファイルの前処理に使える

###対象の文
```python
text = 'He <b>absorbed</b> the knowledge or beliefs of his tribe.'
```

##タグの中身を取り出す
```python
pattern = r'<b>(.+?)</b>'
matched_list = re.findall(pattern, text)

print(matched_list)  # => ['absorbed']
```

##タグを取り除く
```python
# <b>absorbed</b>にマッチさせて置換する
pattern = r'<.+?>'  

print(re.sub(pattern, '', text))  
#=> He absorbed the knowledge or beliefs of his tribe.
```
##タグとその中身を取り除く

```python
# <b>absorbed</b>にマッチさせてスペースで置換する
pattern = r'<.+>'  
new_text = re.sub(pattern, '', text)  
#=> He  the knowledge or beliefs of his tribe.

print(new_text.split())  
#=> ['He', 'the', 'knowledge', 'or', 'beliefs', 'of', 'his', 'tribe.']
```
#####以下のやり方だと、リストにする際バックスペースが残ってしまうので注意

```python
# <b>absorbed</b>にマッチさせてバックスペースで置換する
pattern = r'<.+>'  
new_text = re.sub(pattern, '\b', text)  
#=> He the knowledge or beliefs of his tribe.

print(new_text.split())  
#=> ['He', '\x08', 'the', 'knowledge', 'or', 'beliefs', 'of', 'his', 'tribe.']
```
Spring MyBatis @MapperScan Multiple

Spring と MyBatis を使用してるプロジェクトで ExecutorType をかえて MapperScan を定義したくなった
DataSorce は同じのを使用して ExecutorType だけ BATCH, REUSE に変更する
BATCH の 複数更新 を実行する処理に適用、REUSE はそれ以外に適用
MapperScan を同一の class に定義できた

```Java:SqlSessionConfig.java
@Configuration
public class SqlSessionConfig {
  @Bean
  public SqlSessionFactory sqlSessionFactory(DataSource datasource) throws Exception {
    SqlSessionFactoryBean sqlSessionFactory = new SqlSessionFactoryBean();
    sqlSessionFactory.setDataSource(datasource);
    return (SqlSessionFactory) sqlSessionFactory.getObject();
  }
  @Bean(name = "defaultSqlSessionTemplate")
  public SqlSessionTemplate sqlSessionFactory(SqlSessionFactory sqlSessionFactory) throws Exception {
    return new SqlSessionTemplate(sqlSessionFactory);
  }
  @Bean(name = "reuseSqlSessionTemplate")
  public SqlSessionTemplate sqlSessionFactory(SqlSessionFactory sqlSessionFactory) throws Exception {
    return new SqlSessionTemplate(sqlSessionFactory, ExecutorType.REUSE);
  }
  @Bean(name = "batchSqlSessionTemplate")
  public SqlSessionTemplate sqlSessionFactory(SqlSessionFactory sqlSessionFactory) throws Exception {
    return new SqlSessionTemplate(sqlSessionFactory, ExecutorType.BATCH);
  }
}
@MapperScan(basePackages = "jp.co.sample.mapper.defaul", sqlSessionTemplateRef = "defaultSqlSessionTemplate")
class DefaultMapperScan {
}
@MapperScan(basePackages = "jp.co.sample.mapper.reuse", sqlSessionTemplateRef = "reuseSqlSessionTemplate")
class ReuseMapperScan {
}
@MapperScan(basePackages = "jp.co.sample.mapper.batch", sqlSessionTemplateRef = "batchSqlSessionTemplate")
class BatchMapperScan {
}
```
DELL XPS13(9343)にUbuntu16.04LTS入れてWifiが有効にならなかったときの対策（解決済み）

自分用の備忘録にするので丁寧には書きません、ごめんなさい。
表題のとおりですが、以下に記録します。

# 前提

- 筐体：DELL XPS13h(9343)
  - Wi-Fi device：Broadcom BCM4352
  - BIOS Ver.：A13
- OS：Ubuntu16.04

# 設定

基本的にモジュール、ドライバの確認/インストールなどはArch Wikiを見て環境へ適宜読み替えれば問題ない。
[Dell XPS13 9343](https://wiki.archlinux.jp/index.php/Dell_XPS_13_(9343)#WiFi)
[Arch Wiki Broadcomワイヤレス](https://wiki.archlinux.jp/index.php/Broadcom_%E3%83%AF%E3%82%A4%E3%83%A4%E3%83%AC%E3%82%B9#.E3.82.A4.E3.83.B3.E3.83.88.E3.83.AD.E3.83.80.E3.82.AF.E3.82.B7.E3.83.A7.E3.83.B3)

しかし、そのとおりの設定を行ってもWifiが有効にならないだろう。
散々調査と試行錯誤を繰り返した結果、以下をすることで有効になった。

# 結論

**BIOSのWLAN switchesをOFFにする**

※ちなみに、Bluetoothも同様

絶対忘れるだろうからメモしておく。
AirbnbのReact Nativeからの撤退について

# AirbnbのReact Nativeからの撤退について

[【翻訳】React Native at Airbnb: The Technology](http://studio-andy.hatenablog.com/entry/react-native-at-airbnb-the-technology)

翻訳記事があったのをみつけた。

他にも翻訳記事があった全部で5パートらしい

[パート1](https://github.com/react-native-jp/react-native-at-airbnb-jp-translation/blob/master/1-alt-react-native-at-airbnb.md)

[パート2](https://github.com/react-native-jp/react-native-at-airbnb-jp-translation/blob/master/2-react-native-at-airbnb-the-technology.md)

[パート3](https://github.com/react-native-jp/react-native-at-airbnb-jp-translation/blob/master/3-building-a-cross-platform-mobile-team.md)

[パート4](https://github.com/react-native-jp/react-native-at-airbnb-jp-translation/blob/master/4-sunsetting-react-native.md)

[パート5](https://github.com/react-native-jp/react-native-at-airbnb-jp-translation/blob/master/5-what%E2%80%99s-next-for-mobile-at-airbnb.md)

## Google、Pixel 3シリーズが日本で発売されるかどうか

Pixelが日本でも発売されたら私は多分今年はiPhoneではなくてAndroidを購入することになります。
ということになると、私にとってのベストなスマホの持ち方が
iOS: iPhone8
Android: Pixel3
になりそうだと思う。

今のiOSがiPhone7なのですが、iPhone7が若干古くなってきたので買い替えたいと思っていたり。
そうなるとホームボタン+指紋認証の最後の救済処置として発売してくれたiPhone8しか選択肢がなくなる。
もうあと2,3年すればiPhoneXのような機種でも習慣的に問題ないかなと思うのですが、
どうもあの触り方に違和感を持ってしまう。

Pixelが日本で使えるようになったら私はもう正式にAndroidエンジニアを名乗ろうと思う。
これまで日本はiOS超大国であったがスティーブ・ジョブズが亡くなってからのAppleの落ちぶれをみていたらあと持っても2,3年だと思う。
なので、これから来るDapps時代の到来を考えるとアプリをリリースしやすいAndroidの方が期待値が高い。

(参考)Pixelの日本発売が確定したみたいです。

[Google Japan、Pixel 3の国内販売を予告。新ティザーサイトも公開](https://japanese.engadget.com/2018/09/18/google-japan-pixel-3/)
初心者がRailsガイドを1から100まで読んでみる　Railsをはじめよう編その３　パラメータとアクション

####5.3.記事を作成する

さっきでたUnknown actionエラーを回避しよう。
<img width="585" alt="スクリーンショット 2018-09-19 22.10.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/ba35e563-f516-6574-228d-39e69024dd35.png">

Articlesコントローラに'create'というアクションがありませんと言っているので、追加してあげよう。
（このエラー内容に沿って修正していくだけでも正解に近づく感じ、レールの上に乗っているみたい）

```articles_controller.rb
class ArticlesController < ApplicationController
  def new
  end

  def create
  end
end
```
よし、もう一回Save Articleボタン押すぞ
<img width="311" alt="スクリーンショット 2018-09-21 0.36.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/6931db1c-7a22-ee54-bc6d-aa509d114baf.png">

…
かたまったんやけど…

「修正後のフォームを再送信すると、おそらくページには何の変更も表示されないでしょう。しかし心配は無用です。Railsのアクションは、レスポンスの種類を指定しない場合は204 No Contentをデフォルトで返します。ここではcreateアクションを追加しただけで、レスポンスの振る舞いについて何も指定していませんので、新しい記事はcreateアクションによってデータベースに保存されているはずです。」
だって。
まだ実装してないからだけど、サイレントだとユーザに優しくないねえ。
ここでちょっくらログをみてみよう。
実はここにログが出力されている。
<img width="192" alt="スクリーンショット 2018-09-21 0.38.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/4ae69c73-1e7c-f372-2f2f-44fcab972ceb.png">

<img width="178" alt="スクリーンショット 2018-09-21 0.38.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/db873eb4-fbdb-2ce7-d5fb-7774aa2e071c.png">

開いてみるとこんなログが
<img width="641" alt="スクリーンショット 2018-09-21 0.40.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/db99b5da-745c-df6b-1891-d7ebab4f1715.png">

ほうほう。これでデータベースに保存されていることになるの？
でもパラメータとして記事の内容が送られている感じはする。
createアクションをいじくって、パラメータの中身を確認してみよう。

```articles_controller.rb
class ArticlesController < ApplicationController
	def new
	end

	def create
		render plain: params[:article].inspect
	end
end
```
`render plain: params[:article].inspect`というのをcreateアクションの中に書いた。
`render`:なんか簡単にviewを表示できるメソッドらしい。百聞は一見にしかず。

<img width="568" alt="スクリーンショット 2018-09-21 0.57.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/2776db88-e2d3-f24a-aa10-0aa59a467fd2.png">

plain:と書くことで、単純にその後ろのparams[:article].inspectの内容をブラウザ上に表示できるらしい。
paramsの中にはフォームで送信した中身が詰め込まれているみたい。

ここで初めてアクションの中に処理を書きました。(といってもデバッグ用の様なものだけど)
今までは空っぽのアクションを呼び出して、それに対応するビューを出してただけだけど、パラメータとしてアクションに送った内容をアクション内でいじくれることが今回わかった。
これって結構重要だよね。

おーなんとなく仕組みがわかってきたぞ。

その４
https://qiita.com/Natsuki_on_Rails/items/5db500e27b330b7ad0f3

#参考
Railsガイド
https://railsguides.jp/
Rubyのinjectメソッドについての自分用解説

Rubyにて、配列で使うinjectメソッドがなかなか理解できなかったので、自分なりに整理してメモとして残します。
なにぶん初心者ですので、理解が誤っている場合等はご指摘いただければ幸いです。

###通常の記法

```ruby:test.rb
array = [1, 2, 3, 4].inject(0) {|result, item| result + item }
 # => 10
```
このように記述したとき、次のような順番で処理が行われる。

- `inject`の引数「0」を初期値として`result`に代入
- `array`の要素「1」を`item`に代入
- `result + item`の結果を`result`に代入
- `array`の要素「2」を`item`に代入

...以降繰り返し

###引数「0」を省略した記法

```ruby:test.rb
array = [1, 2, 3, 4].inject {|result, item| result + item }
 # => 10
```

- `array`の要素「1」を初期値として`result`に代入
- `array`の要素「2」を`item`に代入
- `result + item`の結果を`result`に代入
- `array`の要素「3」を`item`に代入

...以降繰り返し

引数が省略された場合は、配列の1番目の要素が初期値となり、2番目の要素からループが始まる。

###さらに省略した記法

```ruby:test.rb
array = [1, 2, 3, 4].inject(:+)
 # => 10
```


省略されすぎて何がなんだかわかりにくいが、`:+`のように演算子を渡すと、ひとつ上の記法と同じ意味になる。
`inject(:+)`では配列の要素の和を返し、`inject(:*)`では配列の要素の積を返すことができる。
QNAPのPCIeに一般のカードが挿せないので何とかする (How to install my PCIe card in QNAP)

## はじめに
PCIeが搭載されているQNAP NASの多く(おそらくエンタープライズ向けでないもの)は、PCIeのブラケットが特殊なものになっていて、ロープロファイル フラット ブラケットと読ばれている。そのため、普通のPCIeカードが挿さらない。(以下のような背面の場合) これによって、省スペースのNASが実現しているのだが。。。
<img alt="Lowprofile_Flat_Bracket.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122858/4407fa64-4c59-67df-bd56-901a94682675.png">

## ハードウェア
ロープロファイル ブラケットのL字のところが曲げてない規格になっている。ロープロファイル ブラケットのL字を加工修正するのは大変なので、代わりにフルサイズ ブラケットを以下のように加工すると、何とかなる。斜めのカットは必須では無いが、カードを挿しやすくなるかも。右の写真は実際のQNAPの製品のブラケット。[　]内は必要な工具。
1. 下側を5mm(PCIeのスペック的には4.05mm)カットする[金ノコ]
2. 筐体に合わせて上側のカットする場所を決めてカットする(だいたい90mmぐらいになるように)[金ノコ]
3. 筐体に合わせてM3のねじ穴を切る[ドリル、ハンドタップ]
<img width="90" alt="Lowprofile_Flat_Bracket.png" src="https://qiita-image-store.s3.amazonaws.com/0/122858/cc7ce6be-7cbb-f543-f954-3bdb34f9302b.png">
<img width="280" alt="Lowprofile_Flat_Bracket2.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122858/5fbd3918-87f2-e311-48fe-35770c7b719c.jpeg">

## ソフトウェア
### QNAP上でのカーネルモジュールのコンパイル
一つ目は、PCIeカードを直接、QNAP上で使用する場合。
目的のPCIeカードのカーネルモジュールが存在しない場合には、コンパイル環境を整備してモジュールを作成する必要あり。
1. パッケージ管理ソフトのインストール
https://github.com/Entware/Entware/wiki/Install-on-QNAP-NAS を参考に
http://bin.entware.net/other/Entware_1.00std.qpkg をインストール
2. 以下を実行して、必要なものをインストール
(例)
`PATH=/opt/bin:$PATH`
`opkg install pciutils`
`opkg install gcc`
`opkg install diffutils patch`
`opkg install git git-http`
3. カーネルモジュールをコンパイル
https://sourceforge.net/projects/qosgpl/ からファイルをダウンロードしたりする。詳細はググって他で探して。
4. カーネルモジュールをロードするスクリプトを書いて、自動実行の機能により起動時にロードする
https://wiki.qnap.com/wiki/Running_Your_Own_Application_at_Startup

### 仮想マシンへのPCI passthrough
二つ目は、PCIeカードを仮想マシンで使用する場合。
QNAP上の仮想マシンへ、PCIeカードのアクセスを許可してやる。

```
lspci
...
07:00.0 XXXX controller: ...
```
と出たら、この番号(07, 00, 0)をメモして、

```
ls /QVS/usr/etc/libvirt/qemu
...
01234567-89ab-cdef-0123-456789abcdef.xml
```
目的の仮想マシンのID(上の例では、01234567-89ab-cdef-0123-456789abcdef)を取得し、

```
/QVS/usr/bin/virsh edit 01234567-89ab-cdef-0123-456789abcdef
```
で、仮想マシンの設定を変更する。具体的には、以下の内容を`<devices>`の中に追加する。

```
    <hostdev mode='subsystem' type='pci' managed='yes'>
      <source>
        <address domain='0x0000' bus='0x07' slot='0x00' function='0x0'/>
      </source>
    </hostdev>
```
残念な事にこの方法は、ファームウェアのアップデートで設定が消えてしまうので、必要に応じで再実行しやすい様にシェルスクリプトを作成する。まず、上記の内容`<hostdev>...</hostdev>`をファイル(pci_device.xml)にし、以下のシェルスクリプトを作成する。

```
#!/bin/bash
DOMAIN=01234567-89ab-cdef-0123-456789abcdef
/QVS/usr/bin/virsh attach-device $DOMAIN --file pci_device.xml --config
/QVS/usr/bin/virsh reboot $DOMAIN
```

## 感想
金属板削ったり、自作PC以上に自作感が味わえる。やるなQNAP。
Rubyの記号プログラミング

# 記述可能な範囲

使えるのが記号だけであるため、主に使えるメソッドに大幅に制限がかかってきます
が、動的言語系列ではこういった制限プログラミングの強い味方が居ます

そう、eval族です

任意の文字列をプログラムとして実行できるevalをなんとかして実行できれば、あらゆるプログラムを記号のみに変換して可動性を大幅に低下させることができます

# 任意の整数の作り方

まず基本として、任意の整数の作り方です
数値は記号に含まれませんので、何らかの方法で記号の塊から数値を錬成する必要があります

具体的には

```ruby:num.rb
# 1
'_'=~/$/

# 1
'_'<=>''

```

このように記述できます
1つ目では、=~ は 正規表現にマッチした位置を返す演算子、/$/は文末にマッチするため、渡した文字列の長さ(この場合は1)が取得できます
2つ目では、<=> は左右を比較してその大小によって-1, 0, 1またはnilのいずれかを返すため、これを利用して1を取得できます
あとはこれを四則演算で組み合わせて任意の数値を作りましょう

# 任意の文字の作り方

任意の数値が作れるようになったので、次は文字を作りましょう
文字は以下のように、種となる空文字列を破壊的変更していくことで作成します

```ruby:str.rb

# a
'' << 97

# frozen_string_literal: true の場合は
[]*'' << 97

```

<<での連結の際に文字コード(数値)から文字への変換が行われるため、これを利用して任意の文字列を作成することができます

# eval ……の前に

もう一つ必要なパーツがあります
RubyではProcを ->(){} で表すことができ、また [] や .() や === で呼び出しを行うことができるため、記号だけでProcを使用できます

```ruby:proc.rb

# 定義
$_ = ->(_, &__){ do_something }

# 呼び出し
$_[hoge]{}
$_.(fuga, &piyo)
$_ === 'hogera'

```

ちなみに、以下のようなものを用意しておくと、数値の生成が楽になります

```ruby:num2.rb

$_=->__,_='_'=~/$/{__[-_]? ($_[__[(_-_)...-_]]<<_)+(__[-_]=='_'? _:_-_):_-_}

# 以下と同じ
# $_ = ->(str, num = 1){
#   if str[-1]
#     ($_[str[0...-1]] << 1) + (str[-1] == '_' ? 1 : 0)
#   else
#     0
#   end
# }

# $_['__ _ '] => 26
# 2進数を 1='_',　0=それ以外で表現

```

# eval

さて、いよいよ目標のevalを生成します
そのためには Symbol#to_proc を用います

```ruby:to_proc.rb

pro = ->(&_){ _.call }
pro.call(&:symbol)
# ->(*args){ args[0].public_send(:symbol, *args[1..-1]) }.call(*args)

```

このsymbolの部分にevalを渡せばめでたくevalが実行できる、と思ったらevalはプライベートメソッドなのでできません
なので、代わりに instance_eval を用いるかsendからevalを呼び出すか、といった形になります

```ruby:eval.rb

proc_send = ->(str, &blo){
  blo.call('', 'eval', str)
}
proc_send.call('do something', &:"send") # => do_something がevalで実行される


proc_instance_eval = ->(str, &blo){
  blo.call('', str)
}
proc_instance_eval.call('do something', &:"instance_eval") # => do_something がinstance_evalで実行される

```

# 記号のみを使ったHello world
以上を用いてHello worldを出力するプログラムが以下となります

```ruby:hello.rb

$_=->__,_='_'=~/$/{__[-_]? ($_[__[(_-_)...-_]]<<_)+(__[-_]=='_'? _:_-_):_-_}
$__=->_,&__{__['',[]*''<<$_['__  _ _']<<$_['___ __ ']<<$_['__    _']<<$_['__ __  '],_]}

@_ = []*''<<$_['___    ']<<$_['___ _ _']<<$_['___ _  ']<<$_['___  __']<<$_['_     ']<<$_['_  ___']<<
$_['_  _   ']<<$_['__  _ _']<<$_['__ __  ']<<$_['__ __  ']<<$_['__ ____']<<$_['_ __  ']<<$_['_     ']<<
$_['___ ___']<<$_['__ ____']<<$_['___  _ ']<<$_['__ __  ']<<$_['__  _  ']<<$_['_    _']<<$_['_  ___']

$__[@_,&:"#{[]*''<<$_['___  __']<<$_['__  _ _']<<$_['__ ___ ']<<$_['__  _  ']}"]

```

なんだかシンタックスハイライトがおかしなことになっていますが動くはずです、動くんじゃないかな、多分動くと思う ……

文字→数値の変換は String#ord を用いれば可能であり、任意のプログラムを変換することが可能ですので、そちらは宿題ということで興味があればどうぞ

任意のプログラムを変換するプログラムを変換したものを最後に載せようと思っていましたが、すごく長くなったのでやめたのは秘密です

長い間ありがとうございました、既出でしたらすみません
FOOBARキーボードを作る 【基板到着編】2018/9/20

とにかく待ち長かったなぁ…
とは言っても平均20営業日で届いているので、ある意味誠実ｗ

基板とトッププレート
![IMG_1545.jpg](https://qiita-image-store.s3.amazonaws.com/0/283328/b23936f0-a0ad-d8f4-56c7-0fde84e9c142.jpeg)
さて他の部品を集めなきゃ。
USBシリアルを色々な条件で固定する。

USBシリアルを2つ以上接続すると、どれがどれに接続されているのかわからなくなる。この問題は接続時に作成される /dev/ttyUSBxx に自動的に別名を設定することで回避できる。ここではUSB接続ポートとidVendor/idProductによる固定の設定例をあげ、その他の条件を調べるコマンドを紹介する。

#USB接続ポートで設定

USBポートに接続した物理位置で判断する方法は、見た目でわかるので簡単だ。一方、どこでにも挿せるというUSBの利点を失うことにも注意してほしい。

##接続ポートを調べる
下の写真にポート番号を振った。写真に①がないのは、①がSMSC9512/9514 Fast Ethernet Adapterつまり有線LANポートに割り当てられているためである。


![nousb.jpg](https://qiita-image-store.s3.amazonaws.com/0/171932/a7407b6b-2b65-14ad-5fa2-f641f1399998.jpeg)


##udev の設定
下のファイルを作成する。usb-usb-0:1.5:1.0の5の部分がポート番号である。

```:/etc/udev/rules.d/99-fixedSerial.rules
SUBSYSTEM=="tty", ENV{ID_PATH}=="platform-*.usb-usb-0:1.5:1.0", SYMLINK+="ttyFixedA"
```
本来の/dev/ttyUSBxxに/dev/ttyFixedAにシンボリックリンクが固定で設定される。最後に次のコマンドを実行し、設定を反映させる。

``` sudo udevadm control --reload-rules ```



#idVendor idProductで設定
idVendorとはメーカ名に割り振られた番号でUSB Implementers Forum, Inc.で管理している。idProductはメーカが各々自由に割り振る番号である。これを利用してUSBシリアルを特定することができる。

##idVendor idProductを調べる

```bash
$lsusb
Bus 001 Device 024: ID 10c4:ea60 Cygnal Integrated Products, Inc. CP210x UART Bridge / myAVR mySmartUSB light
(以下略)
```

ID 10c4:ea60のうちidVendorが10c4 idProductがea60である。これをメモする。もしも、どれか不明であれば抜いてみて再度lsusbして無くなったものがそれである。

##udev の設定
下のファイルを作成する。idVendorとidProductを上で確認した値に合わせる。

```:/etc/udev/rules.d/99-fixedSerial.rules
KERNEL=="ttyUSB*",  ATTRS{idVendor}=="10c4", ATTRS{idProduct}=="ea60", SYMLINK+="ttyFixedB"
```

本来の/dev/ttyUSBxx に/dev/ttyFixedBにシンボリックリンクが固定で設定される。

やはり、最後に次のコマンドを実行し、設定を反映させる。

``` sudo udevadm control --reload-rules ```


##プリンター
USBプリンターを設定する場合の例を紹介する。idVendorとidProductで設定している。

```:/etc/udev/rules.d/99-fixedSerial.rules
SUBSYSTEM=="usb", ATTRS{idVendor}=="XXXX",ATTRS{idProduct}=="XXX", SYMLINK+="lpFixedA"
```


##FTDI社FT-Prog

FTDI社では下記サイトで同社製FT232用に設定書き換えソフトウェアFT-Progを配布している。これを用いれば自由にVenderID ProductIDを設定できる。余談だが、FT230X BASICのC0端子にDTRを割り振ることができないのは、何かと使われているので残念だ。

https://www.ftdichip.com/Support/Utilities.htm#FT_PROG

![ftdi.png](https://qiita-image-store.s3.amazonaws.com/0/171932/d83fdf6f-7573-d5e5-aabd-4daabf74f24d.png)


#その他の条件
/etc/udev/rules.d/に設定する他の条件も次のコマンドを実行中する確認することができる。

```shell-session
udevadm info -q path -n /dev/ttyUSB0
```

更に情報の範囲を広げて表示する。

```shell-session
$udevadm info -a -p $(udevadm info -q path -n /dev/ttyUSB0)
```

###更新履歴
2019/02/14 プリンタの例の追加

###参考サイト
[デバイス名を固定する](https://qiita.com/ospy/items/3e6ff429ba782624def1)
Storyblokのdocs翻訳チャレンジその13！！！

# データソースエントリ

## 複数のデータソースエントリを取得する

### エンドポイント

```
GET /v1/cdn/datasource_entries
```

### パラメータ

|名前|説明|
|:--|:--|
|token(必須)|publishedだけ欲しければpublicトークン<br>draftも欲しければprivateトークン　|
|datasource|データソースグループの id/slug|
|dimension|データソースのディメンジョン(例 de-at)|

### リクエスト

クエリパラメータ

```
token=wANpEQEsMYGOwLxwXQ76Ggtt
datasource=labels
```

cURL

```
curl "https://api.storyblok.com/v1/cdn/datasource_entries?token=wANpEQEsMYGOwLxwXQ76Ggtt&datasource=labels" -X GET \
	-H "Accept: application/json" \
	-H "Content-Type: application/json"
```

### レスポンス

ボディ

```json
{
  "datasource_entries": [
    {
      "id": 73,
      "name": "de",
      "value": "de",
      "dimension_value": null
    }
  ]
}
```
0byteファイル作成Windowsショートカット


## バッチファイルの作成
makeNewFile.batという名前のバッチファイルを作成します。

```makeNewFile.bat
set yyyy=%date:~0,4%
set mm=%date:~5,2%
set dd=%date:~8,2%

set time2=%time: =0%

set h=%time2:~0,2%
set m=%time2:~3,2%
set s=%time2:~6,2%

set filename=file_%yyyy%%mm%%dd%%h%%m%%s%

type nul > %filename%.txt
```

## 辞書登録
作成したバッチファイルのファイルパスを「ふぁ」で辞書登録しておきます。

> 単語: C:\tool\makeNewFile.bat
> よみ: ふぁ

## ファイル作成

エクスプローラを開いてファイルを作成したいフォルダの検索窓に
「ふぁ」を入力し辞書登録した単語に変換してEnterを押すと0バイトのファイルが作成されます。
(ファイル名は日付になります。例：file_20180920233640.txt)

***

* バッチファイルの保存場所や辞書登録の読みは任意で変更してください。
selniumとかpuppeteerとかを使うにあたり。

WEB業界に入って２ヶ月くらいですが、ほんと、テストの仕方とかが今までの基幹業務システム（.NETとか）とは打って変わって、こんなにも便利なツールがあるものだと、毎日衝撃をいただいてます。

テストツールといえば、と出てきたのが２つ。
`selnium`、`puppeteer`

`puppeteer`はJSで少し触ってみたのですが、普通のソースに比べ分かりやすい。
でも、`async/await`と書く機会がやたら非常に多い。

なんでなんだろうと思っていたのですが、そもそもJavascript自体が`非同期処理`を前提とした言語だから、そういった記述が必要なんだ。
ということを学びました。

まるで、マルチスレッドのように動くヤツ。

そういう動きをしちゃうから、「この処理終わるまで次行かんといて！！」と、釘を刺すのが`async/await`。
※認識ずれてたら指摘願います。

同期処理前提の言語にこのテストツールを移植したら、こういった面倒な記述が減るのでは？？と出てきたのが、RubyとかPython。らしい。

同期処理前提＋マルチスレッドが可能になるから、async/await不要＋複数のテストをマルチスレッドに動かせる＝時間短縮になる！

すばらしいです。

とりあえず、今日は尊敬するパイセンからこのことを聞いたので、これからは実践していきます。
まずは、python＋selniumで。
Virtual Boxでローカル環境を作る初心者メモその3

[前回](https://qiita.com/HelloJTokyo/items/5d0e10026d4ae6339300)、[前々回](https://qiita.com/HelloJTokyo/items/f00cbc1241aad313265d)で

- MacOS High SierraにVirtual BoxとVagrantをインストールして、Vagrantを使ってVirtual BoxにCentOSを乗せつつ、IPアドレスを192.168.33.10に設定。

- sshでCentOSにログインし、ドットインストールのリポジトリを使ってApache、Rubyその他アプリケーションをインストール。

しました。

今回はその続きです。CentOSにVimとRailをインストールして、rbenvでRubyのバージョンもあげました。

##Vim

Vimと仲良くなりたいのでVimを入れる。
こちらの記事でそのままでできました。👉 [CentOS に Vim をインストール](https://qiita.com/SOJO/items/9d6a65f3da941c49da36)


Vimのバージョン確認

```
$ yum list installed | grep vim
Failed to set locale, defaulting to C
vim-minimal.x86_64     2:7.2.411-1.8.el6
```

必要なパッケージが入ってるか確認

```
$ yum list installed | grep mercurial
$ yum list installed | grep ncurses-devel
$ yum list installed | grep make         
$ yum list installed | grep gcc 
```

入ってなかったのはインストール

```
$ yum install mercurial
$ yum install ncurses-devel
$ yum install make
$ yum install gcc
```

/usr/local/srcの下のvimというディレクトリ内にリポジトリを複製

```
$ cd /usr/local/src
$ sudo hg clone https://bitbucket.org/vim-mirror/vim vim
```

そこに移動して中身見てみる

```
$ cd vim
$ ls
```

複製してからリポジトリが更新されてないか確認する

```
$ sudo hg pull
pulling from https://bitbucket.org/vim-mirror/vim
searching for changes
no changes found
```

makeする

```
$ sudo ./configure --with-features=huge --enable-multibyte --disable-selinux
$ sudo make
$ sudo make install
```

確認


```
vim --version
VIM - Vi IMproved 7.4 (2013 Aug 10, compiled Mar  1 2015 06:42:11)
```

vimrcはあとで。とりあえず簡単なテキストならCyberduckでいちいちファイル開かなくてもVimで更新できそう。

##rubyのバージョンをあげる

```
$ ruby -v
```
2.3.1 でした。2.4.1にしたい。
[ドットインストール](https://dotinstall.com/lessons/basic_rails_v3/41801)見てバージョンあげます。

```
$ cd ~/.rbenv
$ git pull origin master
$ cd ~/.rbenv/plugins/ruby-build 
$ git pull origin master
$ rbenv install 2.4.1
$ rbenv global 2.4.1
$ rbenv rehash
$ ruby -v
```
2.4.1になりました。


##Railsをインストール
[ドットインストール](https://dotinstall.com/lessons/basic_rails_v3/41801)です。

```
# その前にSQLiteがインストールされてるか確認

$　sqlite3 --version
```

3.6.20入ってます。

```
# gemでインストール

$　gem install rails --no-document
$　rails -v

```
2.3.1が入りました。

ここまで。
at coder beginner 024

B
ABCマーケットは高橋王国で最も人気なスーパーマーケットです。 入り口は自動ドアになっています。
この自動ドアは人が前を通りかかると自動で開き、そこから T 秒後まで開き続け、その後自動的に閉じます。 ドアが開いている状態で新たに人が前を通りかかると、通りかかった時刻のさらに T 秒後まで開き続ける時間が延長されます。
今日はのべ N 人の客が自動ドアの前を通りかかりました。 i 番目の人が通りかかった時刻はABCマーケットが開店してから Ai 秒経った時刻です。
今日、この自動ドアが開いていた合計秒数を求めてください。

似たような問題をやったことがあるな、

区間スケジューリング問題
Ｎ個の仕事がある。各仕事は時間Ｓｉに始まり、時間Ｔｉに終わる。あなたは各仕事について、参加するか参加しないかを選ばなければなりません。仕事に参加するならばその仕事の始めから終わりまで参加しなければなりません。また、参加する仕事の時間帯が重なってはいけません。
できるだけ多くの仕事に参加したいです。何個の仕事に参加することができるでしょうか。
1<=N<100000
1<=Si<Ti<=10**9
これ。

```
#include<iostream>
#include<algorithm>
using namespace std;
const int MAX_N = 100000;
int N, S[MAX_N], T[MAX_N];
pair<int, int>itv[MAX_N];
int main() {
	cin >> N;
	for (int i = 0; i < N; ++i) {
		cin >> S[i] >> T[i];
	}
	for (int i = 0; i < N; ++i) {
		itv[i].first = T[i];
		itv[i].second = S[i];
	}
	sort(itv, itv + N);
	int ans = 0,t = 0;
	for (int i = 0; i < N; ++i) {
		if (t < itv[i].second) {
			ans++;
			t = itv[i].first;
		}
	}
	cout << ans;
    return 0;
}
```
ちょっとちがうけどこれかー今回は合計秒数。

```
#include<iostream>
#include<algorithm>
using namespace std;
int main() {
	int N;
	int T;
	int A[100000];
	cin >> N >> T;
	for (int i = 0; i < N; ++i) {
		cin >> A[i];
	}
	int sum = 0;
	int t = 0;
	for (int i = 0; i < N-1; ++i) {
		if (A[i + 1] - A[i] < T) {
			sum += (A[i + 1] - A[i]);
		}
		else {
			sum += T;
		}
	}
	sum += T;
	cout << sum << endl;
	return 0;
}
```
なんとか自力でできた。嬉しさ。

C

```
#include <iostream>
#include<vector>
#include<algorithm>
using namespace std;
using ll = long long;
int main() {
	int N, D, K;
	int L[10010], R[10010];
	int S[110], T[110];
	cin >> N >> D >> K;
	for (int i = 0; i < D; ++i) {
		cin >> L[i] >> R[i];
	}
	for (int i = 0; i < K; ++i) {
		cin >> S[i] >>T[i];
	}
	vector<int>vec(K, 0);
	for (int i = 0; i < K; ++i) {
		for (int j = 0; j < D; ++j) {
			if (S[i] < T[i]) {
				if (S[i]>=L[j]&&S[i]<=R[j]) {
					S[i] = R[j];
					if (S[i] >= T[i]) {
						vec.at(i) = j + 1;
						break;
					}
				}
			}
			else {
				if (S[i] >= L[j] && S[i] <= R[j]) {
					S[i] = L[j];
					if (S[i] <= T[i]) {
						vec.at(i) = j + 1;
						break;
					}
				}
			}
		}
	}
	for (int i = 0; i < K; ++i) {
		cout << vec[i] << endl;
	}
	return 0;
}
```
貪欲法
JAMstack - クライアントサイドJavaScript、再利用可能なAPI、予めビルドされたマークアップによるモダンなWeb開発アーキテクチャ

[JAMstack](https://jamstack.org/)の概要を意訳しました。
誤りやより良い表現などがあればご指摘頂けると助かります。

原文： https://jamstack.org/

---

「スタック」について言及する際、OS、特定のWebサーバ、バックエンドのプログラミング言語やデータベースについてはもう触れる必要はありません。

JAMstackは特定のテクノロジーではありません。これは、高速化、堅牢なセキュリティ、スケーリングコストの低減、そしてより良い開発者体験をもたらすWebサイトやアプリケーションを構築する新たな手法です。

## JAMstackとは？

下記3点の基準を満たせばJAMstackで構築されたと言って良いでしょう。

### 1. JavaScript

リクエスト/レスポンスサイクル中の動的プログラムは全てクライアントサイドのJavaScriptによって制御されます。フロントエンドのあらゆるフレームワーク、ライブラリ、そしてバニラJSでさえも実現可能です。

### 2. API

全てのサーバサイドの処理やデータベースアクションは再利用可能なAPIに抽象化され、JavaScriptによるHTTP経由でアクセスされます。これはカスタムビルドもしくはサードパーティのサービスを利用可能です。

### 3. Markup

テンプレート化されたマークアップはデプロイ時に事前ビルドされる必要があり、通常はコンテンツサイト用のサイトジェネレータやWebアプリケーション用のビルドツールを使用します。

[事例集はこちら](https://jamstack.org/examples)

## JAMstackに該当しないパターン

クライアントとサーバが密結合しているあらゆるプロジェクトはJAMstackで構築されたとは言えません。下記のものが含まれることが多いです。

- WordPress、Drupal、Joomla、そしてSquarespaceのようなサーバサイドCMSで構築されたサイト
- Ruby、Nodeや他の言語に依存するモノリシックなサーバが動作するWebアプリケーション
- 実行時にサーバ側でアイソモーフィックレンダリングでビューを構築するSPA

## JAMstackを採用する理由

### 高速化

デプロイ時にページを生成できるようになった今、その場でページが構築されるのを待つ理由がありますか？初期読み込み時間の最小化に関しては、CDNで提供される事前ビルドされたファイルに勝るものはありません。

### 堅牢なセキュリティ

サーバサイドの処理がマイクロサービスのAPIに抽象化されることで、攻撃対象が縮小されます。ドメインに特化したサードパーティサービスを利用することも可能です。

### スケーリングコストの低減

デプロイが場所を問わない大量のファイルになってくると、スケーリングはより多くの場所でファイルを提供することが重要な課題となります。CDNが完全にこの役目を果たします。また、通常はスケーリングは全てのプランに含まれます。

### より良い開発者体験

疎結合と制御の分離によって、より照準を絞った開発とデバッグが可能になり、サイトジェネレータとしてのCMSの選択肢が増えることで、コンテンツとマーケティングのための別のスタックを維持する必要がなくなります。

## ベストプラクティス

### CDN上の完全なプロジェクト

JAMstackはサーバサイドのコードに依存しないため、単一のサーバに同居する代わりに配布されます。CDNから直接提供されるため、無類のスピードとパフォーマンスを発揮します。アプリケーションを限界まで追い込めば追い込む程、より良いユーザー体験に繋がります。

### 全てがGit内で完結する

JAMstackプロジェクトでは、誰もがgit cloneでき、標準的な手順（npm installのような）であらゆる依存関係をインストールでき、また完全なプロジェクトをローカル環境で実行可能です。クローンするデータベースもなく、複雑なインストールも不要です。コントリビュータの苦労を減らし、ステージングとテストのワークフローを簡略化します。

### モダンなビルドツール

モダンなビルドツールの世界を活用してください。ジャングルのようで素早く変化し続ける空間のようですが、未来のWeb標準を未来のブラウザを待たずに利用したくなるでしょう。Babel、PostCSS、Webpackなどが利用可能です。

### 自動化されたビルド

JAMstackのマークアップは事前ビルドされているため、コンテンツの変更は新たなビルドを実行するまで反映されません。このプロセスの自動化は多くの不満が解消されます。Webフックを使って自前で実装しても良いですし、自動サービスを含むパブリッシングプラットフォームを利用しても構いません。

### アトミックなデプロイ

JAMstackプロジェクトが成長すると、新たな変更が数百ファイルの再デプロイを必要とするかも知れません。これらのファイルを一度にアップロードすると、プロセス完了までの間に状態の不整合が起こる可能性があります。これを回避するため、全ての変更がアップロードされるまで反映されない「アトミックなデプロイ」を行うシステムが必要です。

### 即時キャッシュ無効化

ビルドからデプロイのサイクルが定常化すると、デプロイ実行時にそれが実際に反映されることを知る必要があります。CDNが即座にキャッシュを無効化できることを知って迷いを消し去りましょう。
SQLServer Mangement Studio 2017(SSMS 2017)のインストール(Windows7)

#■はじめに
SQLServer Management Studio 2017 を Windows7 にインストールします。
SQLServer Management Studio から SQLServer Linux に接続することが目的です。

※インストールにはOS再起動が必要です。

#■インストーラのダウンロード
ここから。
>[Microsoft Docs] SQL Server Management Studio (SSMS) のダウンロード
https://docs.microsoft.com/ja-jp/sql/ssms/download-sql-server-management-studio-ssms?view=sql-server-2017
　⇒SQL Server Management Studio 17.8.1 のダウンロード

#■インストール
インストーラをダブルクリック。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/201787/e1a7474b-34a6-11c1-bed6-3887ab6a83eb.png)
↓数分後（結構かかる）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/201787/f4fdf1e6-d534-75cf-9bf7-a9a6d42e1819.png)
↓OS再起動後、スタートメニューに「Microsoft SQL Server Tool 17」―「Microsoft SQLServer Management Studio 17」が追加されています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/201787/93dbb45a-6e29-2f7c-8af7-82ced95e29ee.png)

#■起動
スタートメニューからMicrosoft SQLServer Management Studio 17 を起動します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/201787/d3de840d-b2db-84ba-3f3f-a39cab4d3a15.png)
↓すぐ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/201787/3900109c-c107-5e30-357b-e913f88e3f6b.png)
↓数分後
![image.png](https://qiita-image-store.s3.amazonaws.com/0/201787/4954fa7b-8d89-65d5-49fe-a77bb76dbeb3.png)
↓SQLServer Linuxのデータベースエンジンにログイン
![image.png](https://qiita-image-store.s3.amazonaws.com/0/201787/4d59957d-bfed-42d6-6e67-bcdf55f29f04.png)

ログイン完了です。

>接続先のSQLServerEngineについては以下を参照
SQL Server 2017 Linuxのインストール(Cent7.4)
https://qiita.com/Higemal/items/8c985b479a793218e63f

#■出典/参考
[Microsoft Docs] SQL Server Management Studio (SSMS)
https://docs.microsoft.com/ja-jp/sql/ssms/sql-server-management-studio-ssms?view=sql-server-2017

[Microsoft Docs] SQL Server Management Studio (SSMS) のダウンロード
https://docs.microsoft.com/ja-jp/sql/ssms/download-sql-server-management-studio-ssms?view=sql-server-2017

SQL Server 2017 Linuxのインストール(Cent7.4)
https://qiita.com/Higemal/items/8c985b479a793218e63f