OmniAICreator/Qiita-1.07M huggingface dataset:
WKWebView Objective-C版サンプル

まとまった記事が意外となかったので。

# 宣言

```objc:MyWebView.h
#import <UIKit/UIKit.h>
#import <WebKit/WebKit.h>

@interface MyWebView : UIView <WKNavigationDelegate, WKUIDelegate>
@property (strong) WKWebView *webView;
@end
```

#初期化

```objc:MyWebView.m
_webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, 320, 568)];
_webView.navigationDelegate = self;
_webView.UIDelegate = self;
[self addSubview:_webView];
```

# ロード

```objc:MyWebView.m
[_webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:url]]];
```

# 進む、戻る、リロード

```objc:MyWebView.m
[_webView canGoBack];
[_webView canGoForward];
[_webView reload];
[_webView goForward];
[_webView goBack];
```

# デリゲート
## shouldStartLoadWithRequest

```objc:MyWebView.m
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation;
```

## didStartLoad

```objc:MyWebView.m
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation;
```

## didFinishLoad

```objc:MyWebView.m
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation;
```

## didFailWithError

```objc:MyWebView.m
- (void)webView:(WKWebView *)webView didFailNavigation:(WKNavigation *)navigation withError:(NSError *)error;
```

## Basic認証
UIAlertControllerWrapperはUIAlertControllerをラップしたクラスです。
[こちら](https://qiita.com/takabosoft/items/162b6d90e00b79a7e328)を参考に作りました。

```objc:MyWebView.m
- (void)webView:(WKWebView *)webView didReceiveAuthenticationChallenge:(nonnull NSURLAuthenticationChallenge *)challenge completionHandler:(nonnull void (^)(NSURLSessionAuthChallengeDisposition, NSURLCredential * _Nullable))completionHandler {
    if([challenge.protectionSpace.authenticationMethod isEqualToString:NSURLAuthenticationMethodHTTPBasic] == YES){ 
        NSLog(@"didReceiveAuthenticationChallenge");

        [UIAlertControllerWrapper showAlertViewWithIdAndPassword:@"Authentication" message:@"Input username and password." ok:^(UIAlertAction *action, UIAlertController *cntr){
            NSURLCredential *credential = [NSURLCredential credentialWithUser:[cntr.textFields objectAtIndex:0].text password:[cntr.textFields objectAtIndex:1].text persistence:NSURLCredentialPersistenceForSession];
            completionHandler(NSURLSessionAuthChallengeUseCredential, credential);
        
        }cancel:^(UIAlertAction *cancel){
            completionHandler(NSURLSessionAuthChallengeCancelAuthenticationChallenge, nil);
        }];
    }else{
        completionHandler(NSURLSessionAuthChallengeRejectProtectionSpace, nil);
    }
}
```

## Javascript実行
```objc:MyWebView.m
[webView evaluateJavaScript:@"document.title"
          completionHandler:^(NSString *result, NSError *error){
}];
```
【自分用】Laravel さまざまな画面表示パターン

会社でLaravelで開発をするそうなので、学んだことを議事録形式で書くことにする

##ルートの基本情報（GETアクセス）
```
Route::get(アドレス,関数など);

//
第一引数：アドレス
第二引数にはそれによって呼び出される処理を用意(関数やコントローラなどを指定する)

```

##ヒアドキュメントを使用して、表示

Laravelをインストールしたドキュメントルート/hello　でアクセスできる

<font color="red">(※アドレス指定を特に行っていない場合　Laravelをインストールしたドキュメントルート/public/hello)となる</font>



```/routes/web.php
<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});


/*
Route::get('hello',function(){
   return '<html><body><h1>Hello</h1><p>This is sample page</p></body></html>';
});
*/

$html = <<<EOF
<html>
<head>
<title>Hello</title>
<style>
body {
    font-size:16pt; 
    color:#999;
}
h1 {
    font-size:100pt;
    text-align: right;
    color:#eee;
    margin:-40px 0 -50px 0;
}
</style>    
</head>
<body>
    <h1>Hello</h1>
    <p>This is sample page</p>
    <p>これはサンプルでつくったページです</p>
</body>
</html>
EOF;


Route::get('hello',function () use($html){
   return $html;
});
```

##パラメーターを利用した表示

GETパラメータを利用して表示する
例：Laravelをインストールしたドキュメントルート/hello/test　とすると
$msg にtestが入る

```
//パラメータが必須なパターン
//何も入力されていないとエラーとなる
Route::get('hello/{msg}',function ($msg){

//パラメーターが任意のパターン
//何も入力されていなかった場合　$msg = no messageが入る
Route::get('hello/{msg?}',function ($msg='no message'){
```

```
Route::get('hello/{msg?}',function ($msg='no message'){
```

```
<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});


/*
Route::get('hello',function(){
   return '<html><body><h1>Hello</h1><p>This is sample page</p></body></html>';
});
*/

Route::get('hello/{msg}',function ($msg){

    $html = <<<EOF
    <html>
    <head>
    <title>Hello</title>
    <style>
    body {
        font-size:16pt; 
        color:#999;
    }
    h1 {
        font-size:100pt;
        text-align: right;
        color:#eee;
        margin:-40px 0 -50px 0;
    }
    </style>    
    </head>
    <body>
        <h1>Hello</h1>
        <p>{$msg}</p>　//　Laravelをインストールしたドキュメントルート/hello　/testにアクセスすると　testが入る
        <p>これはサンプルでつくったページです</p>　
    </body>
    </html>
EOF;



    return $html;
});



```
Vobjectを使う時のコード片


Vcardを出力したい時にvobjectの使い方

```python
# -*- coding: utf-8 -*-
import vobject

v = vobject.vCard()
v.add('n').value = vobject.vcard.Name(family="Doe", given="John")
v.add('fn').value = "John Doe"
v.add('x-phonetic-FIRST-NAME').value = u"aaa"

print v.serialize()

```
キミニキメタ

#初めてSwiftでアプリつくってみた 
アプリ名「キミニキメタ」

アプリケーション目的：社内でシャイな人にも発言をしてもらうため、アプリに発言者を決めてもらう。
アプリ作成のヒント：おみくじアプリからヒントをもらう
最終目標：社員の似顔絵や写真などを入れて、ルーレットなどのアニメーションで決定シーンを作れたら楽しいかも。

下記のコードはまだボタンを押して名前をランダムに取得し、メッセージアラートに表示する、というのみの動作です。引き続き体裁を変更予定です。

背景画像、スタートボタン画像はイラストレーターで作成しEPS保存、フォトショップで最適化しjpeg保存して、 Xcodeの「Assets.xcasetts」に貼り付けて使用。

```swift:アラート
import UIKit

class ViewController: UIViewController {
    
    // ボタン押した時
    @IBAction func showAlert(sender: AnyObject) {
        
        // アラートを作る
        let alert = UIAlertController(title: nil, message: nil, preferredStyle: .alert)
        
        // 配列の中からランダムで社員名取得、arc4random_uniformがランダム関数
        let luckArr = ["社員名1","社員名２","社員名3"]
        let r = arc4random_uniform(UInt32(luckArr.count))
        let randLuck = luckArr[Int(r)]
        
        // タイトル、メッセージのセット、指名後のメッセージの文言をここに入力
        alert.title = "君に決めた！"
        alert.message = randLuck
        
        // 閉じる為のボタン作成
        alert.addAction(
            UIAlertAction(title: "Let's talk", style: UIAlertActionStyle.default, handler: nil)
        )
        
        // アラートを表示
        self.present(alert, animated: true, completion: nil)
        
    }
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    
}

```
Pythonista3でNumpyがインストールできない

Pythonista3にstashを入れpipでnumpyやpandasをインストールし、新規ファイルから
それぞれのモジュールをimportを試みましたがエラーが発生します。

“”“
ImportError: Error importing numpy: you should not try to import numpy from
        its source directory; please exit the numpy source tree, and relaunch
        your python interpreter from there
”“”

念の為、pip list でインストール済みのモジュールを見てみましたが、numpyもpandasもちゃんとインストールされております。
Axios で multipart/form-data にした PUT リクエストが失敗する際の対策

## 環境
- Vue.js： 2.4.3
- Laravel(API側)： 5.5

## やりたいこと
非同期で画像ファイルをリクエストしたい。

## 前提
- API の仕様上 POST は使えないため PUT を使用する
- SPA のため非同期で通信する

## 事象
Axios の問題なのか、`content-type` を `multipart/form-data` にした PUT では正常にリクエストを受け取れなかった。
(正確には、リクエストの中身が空になっていた)

### 失敗例

```failure.js

let formData = new FormData();
formData.append('picture', this.$refs.picture.files[0]);

let config = {
  headers: {
    'content-type': 'multipart/form-data',
  },
};

window.axios.put('/api/test', formData, config)
.then((response) => {
  // 成功時の処理
})
.catch((error) => {
  // 失敗時の処理
});

```

## 解決策
一旦 POST で送って、後から PUT で上書く。

### 成功例

```success.js

let formData = new FormData();
formData.append('picture', this.$refs.picture.files[0]);

let config = {
  headers: {
    'content-type': 'multipart/form-data',
  },
};

// PUT で上書く
config.headers['X-HTTP-Method-Override'] = 'PUT';

window.axios.post('/api/test', formData, config)
.then((response) => {
  // 成功時の処理
})
.catch((error) => {
  // 失敗時の処理
});

```

こうすれば PUT でも画像ファイルのリクエストを受け取れた。
BoUoWのアップデートからmecab-pythonの動作確認まで。

備忘録としての書いておきます。

まずは、備忘録を書こうと思ったきっかけから。

最近いろいろと忙しく、なんと４か月ぶりにJupyter notebookを起動することになりました。

まず、「どうやって起動するんだっけ？？」から始まり、以前の備忘録メモを探すもそれすらなかなか見つかりません。
まあ、４か月ぶりなら仕方ないか。

こんなときにのために、ブログで備忘録をまとめておくと便利かもしれないですね。

では早速、今回行ったことを書いておきます。


１．まずはBash on ubuntu on windowsを起動。
------------------------
これは、Windows10のスタート内にBoUoWのアイコンがあったので、さすがに4か月ぶりでも、すんなり起動できました。

２．セキュリティアップデート
------------------------
BoUoWが起動されると、こわい表示が。

「127 個のパッケージがアップデート可能です。
48 個のアップデートはセキュリティアップデートです。」


セキュリティとか書いてあると、怖くなってきますよね。
まずは、これを対処します。

「BoUoW、アップデート、コマンド」等でググって、それっぽいコマンドを見つけました。

```
~$ sudo apt update
~$ sudo apt upgrade 
```

恐る恐る事項してみると、、、、無事完了(^_^;)。
でも次の心配が。

３．anacondaの動作確認
------------------------
「BoUoWアップデートして、anacondaは動くのかな( ﾟДﾟ)」

次のコマンドで恐る恐る確認。
```
$ pyenv rehash
$ pyenv versions
```
無事にanacondaのバージョンが表示されました(^▽^;)

さて、そろそろ本題です。
jupyter notebookは動くかな？

４．jupyter notebookの動作確認
------------------------
まずはじめに、「jupyter notebookの起動コマンドってなんだっけ？」から調べ始めました。
```
$ jupyter notebook
```
表示された次のURLをブラウザに貼り付け、無事起動(;´∀｀)
「http://localhost:8888/?token*****」


５．mecab-pythonの動作確認
------------------------
ここまで来たら勢いそのままに、mecabよ、問題なくうごいてくれ(*´Д｀)

```
$ mecab
すもももももももものうち
すもも  名詞,一般,*,*,*,*,すもも,スモモ,スモモ
も      助詞,係助詞,*,*,*,*,も,モ,モ
もも    名詞,一般,*,*,*,*,もも,モモ,モモ
も      助詞,係助詞,*,*,*,*,も,モ,モ
もも    名詞,一般,*,*,*,*,もも,モモ,モモ
の      助詞,連体化,*,*,*,*,の,ノ,ノ
うち    名詞,非自立,副詞可能,*,*,*,うち,ウチ,ウチ
```

OKでした('◇')ゞ





いや～、ここまで来るだけでも僕の場合だいぶ苦労しました。
4か月もあけずに、これからはマメにいじるようにしないと。

ちなみに、このブログを書くにあたっての備忘録。
バッククオーテーションの入力は、「shift」+「@」。

また、時間を見て備忘録書かせていただきます。
Google Homeとヨドバシ.comを連携させてみた

![20171105134856.png](https://qiita-image-store.s3.amazonaws.com/0/43289/e94ae8e9-251a-129d-f5b2-040c0bb6e03a.png)

流行りに乗ってGoogle Homeを買いました。  

なんですかね。この近未来感  
年代なのか、やはり声で操作できるってのは無条件ですごいですよね。  
  
と言いながらまだ何ができるかよくわかってなく、もっぱら朝のラジオとアラームに終始しています  
  
ただそれだけではさすがに勿体無いので、日頃お世話になってる  
ヨドバシ.comと連携させてGoogleHomeから買い物できるようにした

<b>Yodobashi Go Home</b>を作ってみました


## GitHub
[GitHub](https://github.com/yanagisawahidetoshi/yodobashi-dash:embed:cite "GitHub")


## 構成
- Google Home
- さくらVPS
- IFTTT
- NodeJS
- CasperJS(PhantomeJS)
- SQLite

## 処理の流れ
![20171105134537.png](https://qiita-image-store.s3.amazonaws.com/0/43289/251f492b-5307-2d9c-b381-998fc2413dde.png)

```
Google Home → IFTTT → NodeJS → CasperJs → ヨドバシ.com
```

GoogleHomeに「おk Google 烏龍茶買って」と話しかければ
連携しているIFTTTのレシピが発火し
さくらVPSのNodeJSにPOSTリクエストを送ります
その際にAPI KEYと商品名も一緒に送ります  
  
NodeJSがPOSTリクエストを受け取れば、CasperJSに商品詳細のURLを送り  
CasperJSがyodobashi.comにアクセスし、ログインし対象の商品を買います  
  
ハイテクになりきれてない1/3ぐらいのアナログ感が気に入ってます  
CasperJS使わないと買い物できないヨドバシに踊らされてる感が好きです
 

## IFTTTの設定
まずはGoogle HomeとNodeJSの架け橋のIFTTTの設定から  
IFTTTさえ設定すればGoogle Home側では特に設定する必要はありません。  
便利ですIFTTT

### Appletの作成
Google Homeに紐づいてるGoogleアカウントでログインし
New AppletでGoogle Assistantを選択
Triggerは「 Say  a simple phase」にする  
<img width="512" alt="20171102173719.png" src="https://qiita-image-store.s3.amazonaws.com/0/43289/7d563421-d9cb-4849-486c-b6c0c773aefd.png">


### トリガーの設定
**Complete trigger fields**画面で 以下の通り設定する

■What do you want to say?  
烏龍茶買って  
  
■What do you want the Assistant to say in response?    
わかりました  
  
■Language  
japanese  

これでまずはIFTTTのthisの部分はできました。  
次はthatの部分です

<img width="297" alt="20171102195305.png" src="https://qiita-image-store.s3.amazonaws.com/0/43289/5164355c-92cf-c407-80d2-04ad9a559d4f.png">

### アクションの設定
Google Homeに話しかける部分までは終わったので、それに対するアクションを設定します。  
Node JSにPOSTを送る部分ですね
  
Choose action serviceで**Webhooks**を選択し
Make a web requestでは以下のように設定します

■URL
NodeJSのURL

■Method
POST

■Content Type (optional)
text/plain

■Body (optional)
key=uroncha&apiKey={api key}

これでsaveすればIFTTTの設定は完了です

サーバ側の設定はまた次回
Creative Cloudのマイアプリ&サービスから出てこないアプリをインストールしたい

すごく不本意ながらfireworksを案件で使っていて、
そのファイルを触りたい方がダウンロードできない！と困られていたので、
もうなかなかいないと思うけど、メモ

環境設定 > Creative cloud > 古いアプリケーションを表示 のチェックをON

<img width="447" alt="スクリーンショット 2017-11-16 18.01.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/44278/a0895f93-5994-caba-1b7c-ac495216ed3f.png">

こうやってどんどんフェードアウトさせて行くのですね。ふむふむ。
Access2016で日本語入力中、一文字入力するごとに勝手に確定され漢字変換できない

windows10でのバグ。
Wordでも起きる可能性があるようだが
私の場合以下の方法で解決した。

タスクバーからIMEを右クリック＞変換モード
上記のメニューで「一般」になっているところを
一度「無変換」を選択し、もう一度「一般」を選択する。
UbuntuとmacOSで zsh / tmux の設定ファイルを分ける

zshやtmuxの設定ファイルをdotfilesリポジトリで管理しているのですが、OSによって設定内容を変更しないと期待する動作を得らなかったため、UbuntuとmacOSによって設定ファイルを分けてみました。

- [dotfiles リポジトリ](https://github.com/tackeyy/dotfiles)
- [OSによって設定ファイルを分けたPR](https://github.com/tackeyy/dotfiles/commit/37a25c524ed2301d5cabbc36c33973ba6e83be8b)（このPRの後もちょこちょこ修正しています

基本的には ` 参考 ` に記載したサイトを参考にさせていただいて、OSによって読み込む設定ファイルを分けています。
` OSによって ` と記載しましたが、厳密には ` macOS ` と ` Linux ` もしくは ` それ以外 ` としています。
私の場合は今のところ ` macOS ` or ` Ubuntu ` でこの設定で動いているのでOS判定は厳密に行なっていません。

## zshrc / z_profile

```diff

+case ${OSTYPE} in
+  # macOS
+  darwin*)
+    source ~/.zprofile.macos
+    ;;
+  linux*)
+    source ~/.zprofile.linux
+    ;;
+esac
```

## tmux

```diff
+if-shell 'test "$(uname -s)" = Darwin' "source-file ~/.tmux.conf.macos" "source-file ~/.tmux.conf.linux"
```

` ll ` 等でファイル一覧が見やすいかなと思い、ファイル名を ` .file_name.os_name ` としたのですが、私の ` vimrc ` ではシンタックスハイライトがつかなかったので、 ` .os_name.file_name ` でも良かったかなと思っています。

# 参考

http://shkh.hatenablog.com/entry/2012/06/17/222936
http://kiririmode.hatenablog.jp/entry/20150207/1423296151


[blog](https://tackeyy.com/)だけではなくqiitaにも投稿してみました。
Kotlin×AndroidでFacebook認証と取得を実装

新規でのアプリ開発をする機会があったので、Kotlinで開発中にSNS認証周りで
FacebookSDKがいつの間にかバージョン更新で仕様が変わっていて少々ハマってしまった際のメモです。
※こちらは2017年11月15日時点での実装方法になります。

今回ハマったのは、特に以下の点です。
（日付みると結構前に仕様が変わってたんですね・・・SNS認証関連から遠ざかっているとこうなるんですね:joy:）
![スクリーンショット 2017-11-16 17.06.44.png](https://qiita-image-store.s3.amazonaws.com/0/28608/29163018-69bb-6f97-1f15-893e822a2e9b.png)

アップグレードガイドラインには以下のようにしか記載がなく、、、
![スクリーンショット 2017-11-16 17.14.17.png](https://qiita-image-store.s3.amazonaws.com/0/28608/7ae69660-67ce-1eaf-ea01-9eb0eb71d588.png)

コールバックの記載はあるのに、初期化の実装方法の記載がない・・・！

試しに初期化の記述だけ削除して実行して見たら、初期化してないからダメだよと言われてしまう。

```
FacebookSDK.sdkInitialize
```

そりゃそうですよね。。
[https://developers.facebook.com/docs/facebook-login/android](https://developers.facebook.com/docs/facebook-login/android)
こちらで探して見たのですが、記載なく。。（スタートガイドにもない！！）
なので、以下のFacebookSDKのGithubから
[https://github.com/facebook/facebook-android-sdk](https://github.com/facebook/facebook-android-sdk)

FacebookSdkのsdkInitializeの関数ヘッダーコメントに

```
* As part of SDK initialization basic auto logging of app events will occur, this can be
* controlled via 'com.facebook.sdk.AutoLogAppEventsEnabled' manifest setting
```

と記載があったので、manifestを変更してみる。

```AndroidManifest.xml
<meta-data android:name="com.facebook.sdk.AutoLogAppEventsEnabled" android:value="true" />
```

これで初期化ができ、実行することができた。
これはスタートガイドラインに記載した方がいいと思う。
と、ここまではKotlinはほぼ関係ない・・・:sweat_smile:

今回は、FacebookLoginButtonは使用しなかったので、以下の用に実装してみた。
それなりにKotlinっぽくなっている気がする。。。

```AppLoginActivity.kt
private val fbCallback = CallbackManager.Factory.create()
// 以下の[loginFacebook]をクリックのListenerに登録しています
val loginFacebook : (v : View) -> Unit = {
    val fbInfo = SNSLoginUser.shared().fbInfo
    LoginManager.getInstance().apply {
        registerCallback(fbCallback, object:FacebookCallback<LoginResult> {
            override fun onSuccess(result: LoginResult?) {
                Log.e("INFO", "[Facebook Login Success]")
                // result?.accessToken?.token -> トークン
                // val fbProfile = Profile.getCurrentProfile() -> プロフィール情報
                // fbProfile.name -> ユーザー名（firstName/middleName/lastNameが一緒になったもの）
                // fbProfile.id -> result?.accessToken?.userIdと同じ
                // Profile.getCurrentProfile().getProfilePictureUri(300, 300).toString() -> プロフィール写真（今回は300x300のサイズで取得）
            }
            override fun onCancel() {
                Log.e("INFO", "[Facebook Login Cancel]")
            }
            override fun onError(error: FacebookException?) {
                Log.e("ERROR", "[Facebook Login Error]" + error.toString())
            }
        })
        logInWithReadPermissions(presentActivity, setOf("public_profile"))
        // 今回は"email"は不要だったので要求していない
    }
}
```

※上記に記載がない部分
*onActivityResult*にて結果を待ち、*CallbackManager.onActivityResult*を通して*FacebookCallback*が呼ばれる


※FacebookSDKはiOSもAndroidも結構な頻度で更新は入っているので要注意です。更新履歴は見ておくことをオススメします。
Vue.jsでlazyloadを実装


意外に自作するコードが少なかったので、書いてみました。

## ソース

```html
<div id="vue-instance">
  <img src="loading.gif">// ローディング画像
  <img src="hoge.jpg" v-on:load="hideLoading">// 表示させたい画像
</div>
```

```javascript
var vm = new Vue({
  el: '#vue-instance',
  methods: {
	  hideLoading: (event) => {
    	event.target.previousElementSibling.remove();
  	  }
	}
});
```

画像がロードされたタイミングでメソッドを呼び出してそこで
ローディング画像を削除していま
tmux > v1.6.3 > tmux show-options -g | grep mouse > mode-mouseは見つからない | v1.6.3対応tmux.conf (マウスON/OFF)

```txt:動作環境
Xeon E5-2620 v4 (8コア) x 2
32GB RAM
CentOS 6.8 (64bit)
openmpi-1.8.x86_64 とその-devel
mpich.x86_64 3.1-5.el6とその-devel
gcc version 4.4.7 (とgfortran)
NCAR Command Language Version 6.3.0
WRF v3.7.1を使用。
Python 2.6.6 (r266:84292, Aug 18 2016, 15:13:37) 
Python 3.6.0 on virtualenv
tmux v1.6-3
```

[tmuxでマウスモードのON/OFFを単一キーで簡単に切り替える](https://qiita.com/kawaz/items/7b15e18ca8e072c1dc57)
に基づきtmuxのペイン切替をマウス操作できるように試しました。

### 初期：とりあえずマウス使ってみよう

[こちら](https://qiita.com/kawaz/items/7b15e18ca8e072c1dc57#%E5%88%9D%E6%9C%9F%E3%81%A8%E3%82%8A%E3%81%82%E3%81%88%E3%81%9A%E3%83%9E%E3%82%A6%E3%82%B9%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86)の動作はできました。

問題はターミナル内でファイル名取得のためのダブルクリックが効かなくなることでした。

### 最終版：mだけで切り替えたい！

[こちら](https://qiita.com/kawaz/items/7b15e18ca8e072c1dc57#%E6%9C%80%E7%B5%82%E7%89%88m%E3%81%A0%E3%81%91%E3%81%A7%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%81%9F%E3%81%84)
は僕の環境では動作しませんでした。

tmuxがv1.6.3のため`-q`を消しましたがダメでした。

```bash
$ tmux show-options -g | grep mouse
mouse-resize-pane off
mouse-select-pane off
mouse-select-window off
mouse-utf8 on
```

上記で`mode-mouse`の表示がないためのようです。

## v1.6.3対応tmux.conf

[こちら](https://qiita.com/kawaz/items/7b15e18ca8e072c1dc57#%E6%9C%80%E7%B5%82%E7%89%88m%E3%81%A0%E3%81%91%E3%81%A7%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%81%9F%E3%81%84)
を以下に変更しました。

```tmux.conf
# for mouse 2017/11/16
# 参考: マウス関連（デフォルトはOFFにしておいて、prefix+mでマウスモードを切替える）http://bit.ly/ZzG7iN
set-option -gw mode-mouse off
bind-key m \
  if-shell "tmux show-options -g | grep mouse-select-window | grep off" "set-option -g mouse-utf8 on" "set-option -g mouse-utf8 off" \;\
  if-shell "tmux show-options -g | grep mouse-select-window | grep off" "set-option -g mouse-resize-pane on" "set-option -g mouse-resize-pane off" \;\
  if-shell "tmux show-options -g | grep mouse-select-window | grep off" "set-option -g mouse-select-pane on" "set-option -g mouse-select-pane off" \;\
  if-shell "tmux show-options -g | grep mouse-select-window | grep off" "set-option -g mouse-select-window on" "set-option -g mouse-select-window off" \;\
  if-shell "tmux show-options -g | grep mouse-select-window | grep off" "set-option -gw mode-mouse on" "set-option -gw mode-mouse off"
```

- 変更点
    - 1. `-gw キーワード`はダメでしたので、grepにしました
    - 2. `mode-mouse`はshow-optionsで表示されないため、`mouse-select-window`にしました
    

~~OFFにした時にファイル名をダブルクリックで選択できない場合がある？~~

```
$ tmux show-options -gw mouse-select-window
usage: show-options [-gsw] [-t target-session|target-window]
```

### 備考

`if-shell`という機能は知りませんでした。
知ったあとでも`if-shell`というキーワードで検索で見つけるのは困難ですね。

### bashrc追加

`.bashrc`に以下を追加しておきます。

```.bashrc
### for tmux mouse feature 2017/11/16
if [ -n "$TMUX" ];then
echo "tmux > prefix-m: switch on/off mouse feature"
fi
```

tmux起動時に以下のメッセージが表示されます。

```
tmux > prefix-m: switch on/off mouse feature
```

将来に渡って「tmuxでマウスONにするコマンド何だったっけ。tmuxの設定ファイルは何という名前でどこだったけ。調べる」の時間をかけないように。
batについての備忘録

今までGUIに甘えてきていたWindowsユーザーでしたが、
今後バッチを使った業務が出てくることになったので
今更bat(DOSコマンド)の基礎を勉強しました。

基本的な事と少し使えるテクニックをまとめます。
(使い慣れている方には眠たい記事だと思います。)

```bat:バッチの基礎
rem echoをコマンドプロンプト上に出力しない
@echo off　

rem 遅延環境変数を有効化
setlocal enabledelayedexpansion 

rem スクリプトの場所をカレントディレクトリにする
rem ~で引用符を排除
cd /d %~dp0

rem 変数の定義
set var=hoge

rem 変数の読出、置換
echo %var:h=H%

rem 遅延環境変数の読出
echo !var!

rem コマンドプロンプトを一時停止
pause > nul

rem バッチファイルの終了
exit /b 0
```

遅延環境変数はif/forブロック内で変数を書き換える際に使います
[batの遅延環境変数についての備忘録](https://qiita.com/mounntainn/items/f30da3cafa8f0b16be0d)

```bat:便利なコマンド


rem 上書きで出力
echo > C:\Hoge\hoge.log

rem 追記で出力
echo >> C:\Hoge\hoge.log

rem 出力結果をクリップボードへ
dir | clip

rem カレントディレクトリをエクスプローラで開く
start .

rem カレントディレクトリを記録/取り出し
pushd .
popd

rem 空のテキストを作成
type nul > test.txt
```

---
参考：
[コマンドプロンプトの裏技・便利なテクニック集まとめ](http://tamezatu.com/tips-techniques-summary-command-prompt/#start)
[【bat】Windowsのバッチファイル(*.bat)の書き方自分用まとめ](https://qiita.com/sksmnagisa/items/8c4c1788af44cc1dc63a)
[要約・翻訳]FileMaker_Devcon_2017：Under The Hood: Server Performance

#### はじめに
* [2017年度のFileMaker Developer Conference](https://www.filemaker.com/learning/devcon/2017/index.html)のセッション動画から、気になったものをピックアップして視聴したので、自分メモを兼ねてご紹介いたします。
* FileMaker社がYoutubeに公開しているセッション動画のYoutubeリストは[こちら](https://www.youtube.com/playlist?list=PLkvKnBkQSCeQsTI4piarGbe1WusytNR_k)

#### 他に投稿した[要約・翻訳]
* [FileMaker_Devcon_2017：Server Architecture and Performance in the Cloud Era](https://qiita.com/Hi_Noguchi/items/9acb84992b048b3604d3)

# Title: Under The Hood: Server Performance
* Speaker: Jon Thatcher
* Company: FileMaker, Inc.

* 動画URL　https://youtu.be/CjI6_lYRiVs


## Web Publishing Engine(WPE)について

### FMS16からマスタ機にもWPEが入るようになった

- FMS15まで：2台構成の際には、ワーカ機にWPEが入っており、WEB側と直接通信できるのはワーカ機だった
- FMS16から：複数台構成でも、マスタ機にWPEが入り、WEB側と通信できるようになった（特定のポートだけ開けておくようにする）
  - 何台で構成しても問題なく処理できるように（WebDirectのクライアントはどのワーカ機に通信してもいい）
  - ワーカ機1台あたり、WebDirectのクライアントは100までぶら下がれる
  - マスタ機がファイアウォールの外に出られない場合、マスタ機のWPEをOFFにせざるを得ない


## FMS16でのパフォーマンスの向上

### WebDirect

- 処理速度向上
- クライアント側でウィンドウサイズ変更の際に、サーバに問い合わせて再度レンダリングし直すことなく、サイズ変更がおこなえるように

### その他

- テーブル、テーブルオカレンスなどの情報をローカルキャッシュできるように（FMS15までは、全て再度ダウンロードし直していた）
- ポータル表示の処理速度向上
- データベースデザインレポート生成の高速化
- ファイルアイコンなどを裏側でダウンロードするように
- FileMakerProからServerへのファイルアップロード速度向上


## Perform Script On Server(PSOS)_サーバ上のスクリプト実行

### 概要

- ウインドウやズームなどUI関連のことはサポートしない
- そのFMSで共有しているファイルのスクリプトしか実行しないし、他のFMSで共有しているファイルは開けない
- PSOSは、スクリプト実行されたFMSの中にテンポラリファイルを生成してそこで実行させている（テンポラリファイルはスクリプトの実行終了時に削除される）

### PSOSでのテンポラリファイルの取扱

- データベースサーバからテンポラリファイルを生成してスクリプト処理
- スクリプト処理が終わったらテンポラリファイルから元ファイルへ反映
- テンポラリファイルは削除される
- 要は、Pro, Go, WebDirectなど他のクライアントと同じ

### PSOS実行時におこなわれること

- 以下のすべての情報がダウンロードされる
  - テーブル
  - テーブルオカレンス
  - リレーションシップグラフ
  - 呼び出し時の初期レイアウト（テーマ、スタイル、レイアウトのフィールド定義など）
  - 値一覧
  - フォント
  - カスタムメニュー
- 以下については必要時にダウンロードされる
  - 全レコード
  - サムネイル
  - スクリプト
  - 呼び出し時でない他のレイアウト（レイアウト切り替え時に都度）

### PSOS実行時に気をつけるべきこと

- 以下2つのスクリプトトリガについては、強制的に実行されるので、シンプルなものにしておくこと
  - OnFirstWindowOpen
  - OnLastWindowClose
- 巨大なテーブルのレイアウトを避ける
- 多くのポータルや関連テーブルフィールドを持ったレイアウトを避ける
- PSOSはRAMとCPUをデータベースと共有しているので、気をつけなくてはならない

### PSOS vs FileMakerScript schedule

- 後者で代替できるなら、そうした方が良い


## FileMakerのパフォーマンスについての金言

### FileMakerはすべてをキャッシュする

- データベースサーバはRAMキャッシュとテンポラリファイルを持つ
- クライアントはファイルキャッシュとテンポラリファイルを持つ
  - クライアント側のテンポラリファイルは21日間は再利用されうる
  - ディスク容量が少ないとパフォーマンスが劣化する
    - テンポラリファイルを上書きしないといけないので、何度もダウンロードのし直しがされる
- 大量レコードのソート状態などもキャッシュで持っている
  - ファイルを開き直すと、クライアントはキャッシュされたレコードが有効なものかどうかチェックをおこなわないといけなくなる
- レコード内のフィールドは全てセットされた状態で一緒に読み書きされる
  - つまり、フィールドの量がレコードサイズを決める
  - レコードサイズが大きくなるということは、アップ／ダウンロードが遅くなる
  - 100フィールドを超えるならテーブルを分けた方が良い
    - あまり使われないフィールドや、テキストフィールド（特に重いので）を対象に
    - 1対1関係のリレーションでも別に構わない
  - なお、オブジェクトフィールドは例外
- FileMakerはツリー構造を持っており、カラのフィールドはそのレコード内で認識されない＝0byteなのであまり気にしなくても問題ない


## サーバとクライアントのver.は合わせる

### 基本

- FMS15ならFMP15、FMS16ならFMP16、というように揃えるのが、一番パフォーマンスが良い
【SQLServer】(記事ID,ページ番号),(記事ID,ページ番号), ・・・のように組み合わせデータをカンマ区切りで出力するSQL

# 概要
SQLServerに記事本文データが入っているテーブル「article_pages」があったとして、
`記事ID`と`ページ番号`の組み合わせの一覧を、
`(記事ID,ページ番号),(記事ID,ページ番号), ・・・`
のような形式でカンマ区切りで出力したいときのSQLを作ってみた。


# 結論
こんなSQLになった。

```sql:SQL
SELECT '(' +
       REPLACE (
           (
              SELECT CONVERT(varchar, article_id) + ',' + CONVERT(varchar, page_number) AS [data()]
              FROM article_pages
              FOR XML PATH ('')
           ),
           ' ',
           '),('
       )
+ ')'
```

# 解説
## `CONVERT(varchar, article_id) + ',' + CONVERT(varchar, page_number)`
単に、記事IDとページ番号をカンマで連結して`記事ID,ページ番号`という文字列を作成。
article_idやpage_numberがintで保存してあったので、varcharへの変換もしている。

## `data()`と`FOR XML PATH ('')`
`data()`と`FOR XML PATH ('')`の合せ技で、下記のようなデータが取得できる。

```sql:SQL
SELECT CONVERT(varchar, article_id) + ',' + CONVERT(varchar, page_number) AS [data()]
FROM article_pages
FOR XML PATH ('')
```
↓

```text:出力データ（"記事ID,ページ番号"がスペース区切りで出力されている）
記事ID,ページ番号 記事ID,ページ番号 記事ID,ページ番号 ・・・
```

## `REPLACE`
スペース区切りで出力されたデータのスペースを `),(` に置換。
これだけだと出力データの先頭と末尾の括弧が足りないので、SQLの1行目と最終行で `'('` と `')'` を付け加えている。
余っているDISK領域を共有してお金を稼ごう STORJ インストール

分散ファイル共有システム。
[Storj非公式日本語ページ - クラウドストレージの未来](http://storj.jp/)
DISK領域を貸し出すことで100GBで月1ドル(=113円ほど)ほどの稼ぎになるっぽい。

http://driveshare.jp/index.html

![スクリーンショット_2017-11-16_19-21-52.png](https://qiita-image-store.s3.amazonaws.com/0/25728/c8b57122-e3e1-e8bb-0d27-93eb6a8a40b2.png)

https://storj.io/pricing.html

![スクリーンショット_2017-11-16_19-23-12.png](https://qiita-image-store.s3.amazonaws.com/0/25728/9d78168c-1c48-82ec-efef-7a21bd6eb07a.png)


## Wallet(お財布)の作成

https://www.myetherwallet.com/#generate-wallet
にてまずはWalletを作成する。

1 New Wallet をクリックし、パスワードを何かしら作成。

![wallet1.png](https://qiita-image-store.s3.amazonaws.com/0/25728/12b76dc2-28d9-b793-e8db-89aef23e05ad.png)

2 jsonファイルのダウンロード

![wallet2.png](https://qiita-image-store.s3.amazonaws.com/0/25728/5e3b99ab-8b41-9313-633f-df36a17898d0.png)

3 Walletをアンロック

1のパスワードか
2でダウンロードしたjsonファイルでWalletをアンロックする。

![wallet3.png](https://qiita-image-store.s3.amazonaws.com/0/25728/8efe5280-1fd1-888b-48b2-c14aa459c7b9.png)

4 自分のアドレスをメモっておく。（後で使います。）

![wallet4.png](https://qiita-image-store.s3.amazonaws.com/0/25728/8868b611-f732-3fc6-7e0f-1de17c61826a.png)


## Storjのダウンロード

https://github.com/Storj/storjshare-gui/releases/
にて自分のOS用のインストーラーをダウンロード、インストール。
起動。ubuntuだと /opt/storjshare/storjshare が実行ファイル。
依存ライブラリをインストールが面倒なら
`apt install -y xubuntu-desktop`で済ませるのも良い。

[cli版もある。](https://github.com/Storj/storjshare-daemon)
[dockerfilesもある](https://github.com/Storj/storjshare-daemon/blob/master/dockerfiles/)

1 同意
2 Start Setup

![1.png](https://qiita-image-store.s3.amazonaws.com/0/25728/c46c5ab9-78c4-b853-2590-46cc675a4efc.png)


3 Payment Address に、先程 `4. 自分のアドレスをメモっておく。（後で使います。）`で表示されたものを貼り付け

![2.png](https://qiita-image-store.s3.amazonaws.com/0/25728/4941aa78-47f0-1157-6c3b-697e2f4dad46.png)

4 貸し出す場所を選択

![3.png](https://qiita-image-store.s3.amazonaws.com/0/25728/1c3f1d12-1e19-9ed4-4c93-46e5527b43ef.png)

ここまで進めば詰まらないと思う。

![4.png](https://qiita-image-store.s3.amazonaws.com/0/25728/06acf45e-7c48-20f2-8e4e-6df35186258c.png)

![5.png](https://qiita-image-store.s3.amazonaws.com/0/25728/0371a2bd-07f3-80be-3aa1-9edae9fbc0c3.png)

![6.png](https://qiita-image-store.s3.amazonaws.com/0/25728/900255ff-0f30-fc41-adb0-469ff0986836.png)

Status : ON になっていることを確認。

![スクリーンショット_2017-11-16_19-01-20.png](https://qiita-image-store.s3.amazonaws.com/0/25728/458cdf61-626b-1871-1055-57b8f0824df5.png)
【UnrealEngine】水っぽいマテリアルを作ったときのメモ

# はじめに
ゲームを作ってる最中に背景が寂しく、水面がほしい、planar Reflectionで反射させたい、ということでまずは水っぽいマテリアルを作成した。

※ビルド中に書いてるので図などまったくありません。


とりあえず新規マテリアルを作成して好きな名前をつける。
で、サムネをダブルクリックしてエディタを開く。


# プロパティの変更
エディタを開いたらまずは[Details(詳細)]パネルから以下の項目を変更する。

- Blend Mode
    - 初期設定：Opaque（不透明）
    - 変更後　：Translucent（半透明）
- Lighting Model
    - 初期設定：Volumetric Non Directional（容積測定の方向がない）
    - 変更後　：Surface Translucency（表面が半透明）

これであとはブループリントを作る。
そして貼る。


# 半透明で屈折するマテリアルのためのやつ
1回目はとりあえずまっさらな水。
2回目で波紋的なものをつける

1回目で使うものは以下のもの

- Constant x5（とりあえずメモ用としてそれぞれをA~Eと呼ぶ）
    - 定数を指定できる
- Lerp x1
    - AとBの間の値を補間して返してくれる。
    - AlphaはAとBの返す割合を決められる。0だったらAだけ、0.5だったらAとB半分、みたいな。
- Fresnel x1
    - 見る角度によって0から1の値を変化させて返してくれるすごいやつ。
    - これがいることで角度によっていろいろ変わる水面のあれを表現してくれる。



とりあえずこれをマテリアルグラフに追加。で、接続していく。
#### Constant（名前[値]：つなぐとこ）
- A[1]：ノードを2本出してBase ColorとMetallicにつなぐ
    - 色が白くなって金属光沢が出る
- B[0]：ノードを1本出してRoughnessにつなぐ
    - 荒さがなくなりつやつやになる
- C[0.5]：ノードを1本出してOpacityにつなぐ
    - 半透明にする。0にするとせっかくいろいろやっても見えない
- D[1]：ノードを1本出して用意したLerpのAにつなぐ
- E[1.33]：ノードを1本出して用意したLerpのBにつなぐ

ConstantのEについては後で値を変更しやすいようにパラメータに変換しておく。
変換方法は以下の通り。

1. Eを選択し右クリック
2. 表示されたメニューの中の[Convert Parameter(パラメータへ変換)]を選択する
3. 変換したらプロパティから名前をつける。
4. おわり。

今回はIORと名前を付けておく。
IORは屈折率のことでこれを変えれば水以外も作れる。

|　マテリアル　|　　屈折率　　|
|:------------|-----------:|
|空気|1.00|
|水|1.33|
|氷|1.31|
|ガラス|1.52|
|ダイヤモンド|2.42|


#### Fresnel
これはLerpのAlphaにつなげる。

#### Lerp
Refractionにつなげる。
AlphaにFresnelがつながっていることによって1から1.33の間でうまいこと屈折の仕方が変わってくれる。


# 水面が平らじゃなくなってほしいやつ
法線マップを使うことで水面にいい感じに波紋を作れる。
レンガっぽいものを使えば水風船で作ったレンガみたいなのができる。

### 法線マップ
法線マップとは、モデルの表面に凹凸がついているかのように見せることのできる特殊なテクスチャで、実際のジオメトリ（オブジェクト）にその凹凸があるかのように見せるやつ。

で、どうやるかというと

まずは使うテクスチャを選ぶためにマテリアルグラフで右クリックをしてTexture Sampleを追加する。
追加したTexture Sampleのプロパティに[Texture]があると思うのでそこに好きなテクスチャをぶち込む。

テクスチャを追加したTexture Sampleからノードを出してNormalに接続する。
これを適用すれば水面がいい感じに波打つ。

![HighresScreenshot00004.png](https://qiita-image-store.s3.amazonaws.com/0/207589/be31779f-28b4-7802-f4d8-23d1edd8dc48.png)


# さいごに
なんとなくそれっぽいのはできたがやはり水がきれいすぎるのでその辺はうまいこと調整してください。
あと、この記事の手順については以下のものと同じことをしています。
カタカナと謎英語が多くてわかりづらかったのでいろいろ付け足してあります。
元のやつと合わせて読んだほうが絵があるのでわかりやすいかと思います。

[Unreal Engine | マテリアル エディタ - 屈折の操作ガイド](https://docs.unrealengine.com/latest/JPN/Engine/Rendering/Materials/HowTo/Refraction/index.html)

試しに色をつけてplanar Reflectionを配置してみたやつがこちらです。
![HighresScreenshot00005.png](https://qiita-image-store.s3.amazonaws.com/0/207589/97acc019-6878-8333-2e39-8d5527b49e0e.png)
GASを用いてSlack上で購買を構築，運営した

私の所属する研究室にて電子マネーの導入を検討しました。
LINE PayやICカードでの取引を検討しましたが、そもそも…

**現金払いより手間になっては、電子マネーは普及しない！**

やはり誰が買ったのか、何を買ったのかの認証が一番のキモです。
そこで、私はネット通販のようにSlackの専用チャンネルから**ポチれる**電子マネーを導入しました。

slackを活用する利点として，
1.普及している所であれば開くことへの手間が少ない
2.利用者はログインにて認証ができている
3.reactionや豊富なAPIで簡易的な購入コンソールを作ることができる

が挙げられます。早速ご紹介していきましょう。

#商品購入編
実際の商品の購入方法をご紹介します。
![sample1.jpg](https://qiita-image-store.s3.amazonaws.com/0/211225/05e03764-a4a8-861c-112b-640f4d5871b7.jpeg)


こちらが私の研究室のshopというchannelの投稿です。
商品の入荷については，担当である僕が入荷時に画像のようなフォーマットで商品情報を投稿します。

そして，どうやって**ポチる**のかと言いますと，商品下の購入っぽいボタンを押せばOKです。このreacitonはbotが勝手に付けてくれます。
実際にペットボトル飲料を**ポチっ**てみましょう。すると……

![sample2.jpg](https://qiita-image-store.s3.amazonaws.com/0/211225/d259f8ce-a08a-650f-f55a-57a004b3dbb1.jpeg)


やりました，botからDirect Message(slackBot)にて支払い処理完了の通知が届きました。

内部的には，GASより毎分channel.Historyへアクセスし，reactionの情報を受け取り，決済を行なっています。
reactionは1種類につき1人1回しか押せないため，基本的には決済が発生した商品の投稿については毎回削除し，再度reactionのないまっさらな状態でbotが再投稿を行います。

これ実はreactionを削除すれば良いわけですが，現状私の実装だとAPI経由でAPI取得者以外のreactionを削除する事ができませんでした。
これはAPIのscopeの問題だと思っているので，もう少し調べてみようと思っています。

<追記:2017/11/28>
やはり現状は他人のreactionを消すことはできないようです。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">There is no way to remove another person&#39;s reaction at present. We could certainly share the feedback with the team for you though!</p>&mdash; Slack (@SlackHQ) <a href="https://twitter.com/SlackHQ/status/917326745182892032?ref_src=twsrc%5Etfw">2017年10月9日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


#マネーチャージ編
電子マネーのチャージの方法をご紹介します。
<img width="400" alt="sample3.png" src="https://qiita-image-store.s3.amazonaws.com/0/211225/c2a07fd9-0b75-69ea-d93b-b63d63b8551a.png">

こちらが，電子マネーのチャージのための画面です。
チャージについては利用者が担当者へ現金を受け渡し，担当者が上記画面より利用者名を選択，金額を入力することでチャージが完了します。

内部的には，誰がいくら持っているかはGoogle SpreadSheetに記録してあります。購入やチャージは基本的にGASを使ってSpreadSheetを弄っているだけですね。上記画面についてもGASからHTMLを吐き出した簡易コンソール画面になります。

![sample4.jpg](https://qiita-image-store.s3.amazonaws.com/0/211225/04ec86ae-261c-9d2a-c39e-690057522d0f.jpeg)

チャージも同様に，slackbotにてDirect Messageで通知がきます。

LINE Pay等の既存のものも検討しましたが，全員がクレジットカードや銀行口座の登録をしてサービスを使ってくれるビジョンが見えませんでした。これは利用する環境によってもおそらく変わってきますね。

以上，slackは結構電子マネー(購買システム)との相性は意外と良かったよというご紹介でした。
Firefox QuantumをArch Linux/Manjaro Linuxにインストールする方法

![](https://blog.mozilla.org/wp-content/uploads/2017/09/2017.25.09.FFQuantumBeta_Quantum-1400x770.png)

# Firefox Quantumについて

~~ｇｇｒｋｓ~~今話題の生まれ変わった高速なウェブブラウザです。


# 前提

- WindowsとかMacとかUbuntuとか使いたくないぜっていう人（煽り要素大）
- Firefoxがインストールされており`/usr/share/applications/firefox.desktop`がある
  - なかったら`sudo pacman -S firefox`してください

# ダウンロードと展開

`/opt`にインストールする例。(64 bit版バイナリ)

```
$ cd /opt
$ sudo wget https://download-installer.cdn.mozilla.net/pub/firefox/releases/57.0/linux-x86_64/en-US/firefox-57.0.tar.bz2
$ sudo tar xfj firefox-57.0.tar.bz2
```

# `/usr/share/applications/firefox-quantum.desktop`を作る

`/usr/share/applications/firefox.desktop`をコピーしましょ。

```
sudo cp /usr/share/applications/firefox.desktop /usr/share/applications/firefox-quantum.desktop
```

`/usr/share/applications/firefox-quantum.desktop`を編集

下記箇所の様に修正しましょ。

```
Name=Firefox Quantum Web Browser
Exec=/opt/firefox/firefox %u
Exec=/opt/firefox/firefox -new-window
Exec=/opt/firefox/firefox -private-window
```

# 以上です

`メニュー→インターネット→Firefox Quantum Web Browser`がいるのではないでしょか？
![](https://thepracticaldev.s3.amazonaws.com/i/zy0dt95lmbe0oqqsy75u.png)
Docker Compose で起動するコンテナ名を変更する

docker-compose で起動したコンテナは以下のようなフォーマットでコンテナ名が付けられます。

`{プロジェクト名}_{サービス名}_{連番}`

- **プロジェクト名 (Prefix):**
    - デフォルトでは docker-compose.yml を置いているフォルダ名が使用される。
- **サービス名:**
    - docker-compose.yml に書いた任意の名前が使用される。
- **連番 (Suffix):**
    - スケールする際に連番で付与される。


例えば `/hoge/foo/docker-compose.yml` に以下の YAML ファイルが置いてある状態で `docker-compose up` をすると `foo_web_1`, `foo_redis_1` といったコンテナ名で起動します。

```yaml
version: '3'
services:
  web: # ←任意サービス名
    build: .
    ports:
     - "5000:5000"
  redis: # ←任意サービス名
    image: "redis:alpine"
```

プロジェクト名 (Prefix) の部分は環境変数の `COMPOSE_PROJECT_NAME` を設定することで変更することが出来ます。
以下のように起動すると `piyo_web_1`, `piyo_redis_1` といったコンテナ名で起動します。

```bash
cd /hoge/foo
export COMPOSE_PROJECT_NAME=piyo
docker-compose up -d
```

フォルダ名とサービス名の両方が他とバッティングする可能性がある場合などに使えるかもしれません。

## 参考

- [CLI 環境変数 — Docker\-docs\-ja 17\.06\.Beta ドキュメント](http://docs.docker.jp/compose/reference/envvars.html#compose-project-name)
【ネタ】超手抜きで作る：WordPressの任意の場所へ任意のURLの中身を取り込んで表示

WordPressでWebサイトを構築すると、「ページ内の任意の場所に別のURLの内容を表示させたい」という事があるのではないかと思います(実際はよく知らない)。そういうプラグインがありそうな気がしますが、それを探すのは面倒だったので…

- 標準関数だけを使う
- 超短時間で作る
- とにかく手間をかけない

…という条件で実装してみます。目標は10分以内。半分ネタ。

--------------------------------------------------------------------------------

## WordPressの仕様を少しだけ調べてみる

事前に以下の事は調べておいた。

- 「ショートコード」というものを使えば良さそう。
- 「ショートコード」の定義は `function.php` に書くらしい。
- `function.php` に定義するのはかなりイケてないと思うので、プラグインで何か良いのが無いか探してみた。
- 「[Code Snippets](https://ja.wordpress.org/plugins/code-snippets/)」というものを見つけた。さすがWordPress何でもあるよね。

--------------------------------------------------------------------------------

## コード

```php
function myFetchUrl($pAry)
{
	//-- 取得するURL
	$url = $pAry['url'];
	if (stripos($url, 'http://') !== 0 && stripos($url, 'https://') !== 0) { return $url; }

	//-- キャッシュの有効時間
	$lifetime = (empty($pAry['lifetime'])) ? 0 : (int) $pAry['lifetime'];

	//-- キャッシュの保存ディレクトリ(どこに保存するのが適切なのかは知らない)
	$md5Url = md5($url);
	$cacheDir = "./_cache/fetch_url/{$md5Url[0]}/{$md5Url[1]}/{$md5Url[2]}";
	if ($lifetime && !is_dir($cacheDir)) { mkdir($cacheDir, 0777, true); }

	//-- キャッシュのパス
	$cachePath = "{$cacheDir}/{$md5Url}.cache";

	//-- キャッシュが有効ならそちらを読む / 無効なら取得
	if (!is_file($cachePath) || ($lifetime && $_SERVER['REQUEST_TIME'] - filemtime($cachePath) > $lifetime)) {
		$data = file_get_contents($url);
		file_put_contents($cachePath, $data, LOCK_EX);
	} else {
		$data = file_get_contents($cachePath);
	}

	return $data;
}

//-- ショートコードとして登録
add_shortcode('fetch_url', 'myFetchUrl');
```

--------------------------------------------------------------------------------

## 使い方

```html
<!-- 常にリアルタイムで取得する -->
[fetch_url url="https://qiita.com/fallout"]

<!-- 24時間キャッシュを有効にする -->
[fetch_url url="https://qiita.com/fallout" lifetime="86400"]
```

--------------------------------------------------------------------------------

## Q&A

- Q.◯◯というプラグインがあるよ
	- A.WordPressって便利ですね。
<br><br>
- Q.`<iframe src="url">`とかで良いのでは？
	- A.それで良いならそうなんでしょう。
<br><br>
- Q.これの使い道って他所のコンテンツをパクるのが目的？
	- A.それが目的なら、もっと賢いやり方があるでしょうね。
<br><br>
- Q.キャッシュファイルのパスをハードコーディングしちゃダメでしょ。
	- A.そうですね。WordPressの仕様的にどこに保存するのが相応しいのかは知らないです。
<br><br>
- Q.`file_get_contents()`でURLを取得するのは止めた方が良いよ？タイムアウト処理すらできてない。
	- A.WordPressには[HTTP API](https://codex.wordpress.org/HTTP_API)というのがあるらしいので、そちらを使った方が良いですよ。HTTPの応答ヘッダも理解して無駄なリクエストが発生しないようにするべきですね。頑張ってください。
<br><br>
- Q.キャッシュファイルがどんどん溜まるよね？
	- A.適当に`tmpwatch`とかで消せば良いんじゃないでしょうか。
<br><br>
- Q.`md5()`はもう使わない方が良いのでは？
	- A.この用途なら別に良いでしょ。たった3文字の関数名って…素敵やん。
<br><br>
- Q.10分で実装できた？
	- A.これを「実装した」と呼べるのなら。なお、コードにコメントを付けてQiitaの記事にするのにかけた時間は、コードを書く時間の10倍以上。
<br><br>
- Q.これだからPHPerは…
	- A.言語やそれを使う人へダメ出しをしたら君の価値が上がるの？もっと他にやるべき事があるんじゃないかな。(ミサワ風)
<br><br>
- Q.ひょっとしてWordPressを舐めてる？
	- A.滅相もない。PHPといえばWordPressが有名なので無理やりネタを捻り出しただけです。
<br><br>
- Q.Qiitaは「プログラミングに関する知識を記録・共有するためのサービス」だよ？
	- A.いつもお世話になってます。
<br><br>
- Q.反省してる？
	- A.見ての通りです。

--------------------------------------------------------------------------------

## 結論

Qiita向けの記事を真面目に書くのは大変。
TermuxでSSH Serverを起動する

TermuxでSSHサーバを建てる手順を整理しました。[公式のドキュメント](https://termux.com/ssh.html)では、やるべきことは示してありますが、手順にはなっていないので…。

## 動作環境

+ BlackBerry KEYOne Black Edition(BBB100-6)
+ Android 7.1.1
+ Termux ver.0.54

## 事前準備

生成した保存鍵をPCなどに吸い出したり、AndroidのSSHアプリから参照するために、ストレージの設定を済ませておくとよい。

```shell-session
$ termux-setup-storage
```

詳細は、[Internal and external storage - Termux Help](https://termux.com/storage.html) (公式)を参照のこと。


## 実施手順

### 1. opensshのインストール

```shell-session
$ apt install openssh
```

### 2. 鍵の作成と権限付与

```shell-session
$ ssh-keygen
$ cat ~/.ssh/id_rsa.pub > ~/.ssh/authorized_keys
$ chmod 600 ~/.ssh/authorized_keys
$ chmod 700 ~/.ssh
```

### 3. 鍵をストレージにコピー

```shell-session
$ cp ~/.ssh/id_rsa ~/storage/downloads
```

### 4. SSH Serverの起動

```shell-session
$ sshd
```

## 接続するときのポイント

- SSHクライアントには、上記3.で作成したid_rsaを噛ませる
- ポートは8022
- ユーザ名は無指定で良いが（そういう仕様）、クライアントソフトによっては、ユーザ名が入力必須になっている。その場合は、"a"でも"aa"でも"hoge"でも"hage"でもなんでも良い
- 起動しているSSH Serverを終了する場合には、`$ pkill sshd`

## 参考文献

- [Using SSH - Termux Help](https://termux.com/ssh.html) (公式)
- [termuxでssh - drag n drop](http://yellowarrow.hatenablog.com/entry/2016/09/18/015715)
- [Run an SSH server on your Android with Termux](https://glow.li/tech/2015/11/06/run-an-ssh-server-on-your-android-with-termux.html)
bootstrap-honoka を Rails5 + webpack 環境に導入する手順

▼Honoka - 日本語も美しく表示できるBootstrapテーマ
http://honokak.osaka/

を Rails5 の webpack 環境に導入する手順です。

# 1. npm にあるか確認します

```
$ npm search bootstrap-honoka
NAME                      | DESCRIPTION          | AUTHOR          | DATE       | VERSION  | KEYWORDS
bootstrap-honoka          | Honoka is one of…    | =windyakin      | 2017-07-29 | 3.3.7-a  | css bootstrap sass scss lovelive web front-end framework theme
bootstrap-rin             | Rin is one of the…   | =raryosu        | 2017-08-01 | 3.3.7-2  | css bootstrap sass scss lovelive web front-end framework theme
```

ありました。

なお、bootstrap で検索すると出てきません。なぜでしょう？

```
$ npm search bootstrap | grep bootstrap-honoka | wc -l
0
```

多すぎると出てこない仕様なのかわかりませんが、当初、見つからないので npm には対応していないものと考えてしまいました。

あと honoka の派生バージョンには umi nico rin の3つがあるのですが npm では rin しか見つかりませんでした。 npm や yarn を使って導入できないパッケージはどのようにして導入したらいいのかよくわかっていません。

とりあえず bootstrap-honoka は npm で見つかったので次に進みます。


# 2. インストールします

```
$ yarn add bootstrap-honoka
```

インストールするので install と書いたらエラーになりました。
実は add だったというのがややこしいところです。

# 3. application.js で css と js を読み込みます

```javascript:app/javascript/packs/application.js
import "bootstrap-honoka/dist/css/bootstrap.min.css"
import "bootstrap-honoka/dist/js/bootstrap.min.js"
```

`import ...` は `require(...)` と書いてもよかったです。

# 4. レイアウトに *_pack_tag を書きます

```app/views/layouts/application.html.slim
= stylesheet_pack_tag "application"
= javascript_pack_tag "application"
```

なお、application.js で css を何も読み込んでない状態で先に stylesheet_pack_tag 行を書いてしまうと **/packs/application-xxx.css が見つからない** という例外がでてびっくりすることになるのでやや注意です。

これだけです。
SourceTree:今いるブランチが更新されたのにプルにバッチが表示されない時の対処例

※初めにお断りしておきますが、これは確実にこうすれば直るというものではなく、
こうすれば直る時もあるという記事です。
純度の低い情報で申し訳ありません。

# 環境

OS: OS X EL Capitan 10.11.6
SourceTree: Version 2.6.3より前(すみません、バージョン記録せずupdateしてしまいました。。。)

# どういうこと？

自分のいるブランチが他の誰かによってプッシュされ、更新されたとします。
その時に以下のようにプルにバッチが表示されると思います。
<img width="256" alt="スクリーンショット 2017-11-14 11.21.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/149412/ac522d44-5b7d-c8bc-ca9d-c89af8d91c00.png">
ところが、時々バッチが出ない時があります。

# 対処法

上から順に実行し、変わらなければ下の方法をやるという感じです。

## 1.リフレッシュする

Macの場合はショートカットキーcommand+Rです。

<img width="271" alt="スクリーンショット 2017-11-14 11.12.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/149412/e6b37f05-ff2e-c741-a3cc-8ab036d35b69.png">

リフレッシュし、数十秒待ちます。

これで無事に表示されればかなり楽なのですが、そうならないことがしばしばあります。

## 2.今いるブランチ以外のブランチに移り、また戻る

ブランチを別のブランチに切り替えしてから戻ると、何故か上手くいくことがあります。

## 3.一度リポジトリを閉じて、また開く

面倒ですが、一回画面を閉じて
<img width="96" alt="スクリーンショット 2017-11-14 11.12.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/149412/efdb7d03-47e5-a57c-c95f-1ad908b436a6.png">

リポジトリの選択画面に戻ると、
<img width="1279" alt="スクリーンショット 2017-11-14 11.12.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/149412/c2da7edd-ac12-a46e-1092-bc13837bf022.png">
このスクショの右上のように無事に「新規コミットがあります」と表示されたり、
別のリポジトリに切り替えた瞬間に「新規コミットがあります」と表示されたりすることがあります。謎ですね。

## 上記のどの方法でも解決しない場合

諦めて、普通にプルします。
別に何も問題は起こりません。
だったら最初からそうしろよ！という話ですが、
バッチが表示されていないと気持ち悪いと思う人間なので、すみません。

## 最初からコマンドラインでやれば？というご意見

ごもっともだと思います。
当方、可視化されているものじゃないと不安なのと
まだGit歴半年の初心者なもので。。。
Laravel5.5　withInputがエラった件

最近、開発に集中したい、かつ、急いでいる・という時はボカニコを聞きます。またはテキサムのCDを。
まぁ、それはいいとして。


Validationのところで。

```InqueryController.php
if ($validator->fails()) {
    return redirect('inquiry/')
        ->withErrors($validator)
        ->withInput();
}
```
で、

```inquery.blade.php
<input type="text" class="required" name="name" value="{{Input::old('name')}}"></div>
```
ってやったら「Inputなんてないよ」ってエラーになってしまった。

正解は......

```InqueryController.php
if ($validator->fails()) {
　　　　return redirect('inquiry/')
  　　　　  ->withErrors($validator)
    　　　　->withInput($request->all);
}
```

```inquery.blade.php
<input type="text"　class="required" name="name" value="{{old('name')}}"></div>
```

でした。
Requestを渡してあげないといけないんですね。まぁ、確かにそうですよね。
他にいい方法あるのかなぁ……


Validationと言えば、電話番号の桁数指定でハマりました。
minとmax使ったら桁数ではなくて数値として判断されてしまいまして。結局のところ、digits_betweenを使用することで解決しました。
[test011] dt-ddのアコーディオンメニューでセパレートの線を引く

# dt-ddのアコーディオンメニューでセパレートの線を引く

## 仕様

dt-ddのアコーディオンメニューでセパレートの線を引く

### 動作
- dtを押すとddが開き再度押すと消える。
- またddが開いている状態で別のdtを押すとすでに開いているddは消える

### パターン

パターンは3つ。

- menu1

ddには常に下線がついていて開くと下線がみえ、閉じると消える

- menu2

dtを押すとddに下線がつき、別のdtを押すと自分のddに下線がひかれ、元のddの下線が消えてからスライドする

- menu3

dtを押すとddに下線がつき、別のdtを押すと、まずスライドしてから自分のddに下線がひかれ、元のddの下線が消えてからスライドする

## ソース

### html

```html:test_11.htm
<html>
<head>
<link rel="stylesheet" type="text/css" href="test_11.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/j<script type="text/javascript" src="test_11.js"></script>
<title>test11 dt-ddのアコーディオンメニューでセパレートの線を引く</title>
</head>
<body>
<h1>test11 dt-ddのアコーディオンメニューでセパレートの線を引く</h1>
<h2>menu1</h2>
<dl id="menu1" class="accordion">
  <dt>アコーディオン１</dt>
  <dd>
    <p>アコーディオン１の内容１</p>
    <p>アコーディオン１の内容２</p>
  </dd>
  <dt>アコーディオン２</dt>
  <dd>
    <p>アコーディオン２の内容１</p>
    <p>アコーディオン２の内容２</p>
  </dd>
  <dt>アコーディオン３</dt>
  <dd>
    <p>アコーディオン３の内容１</p>
    <p>アコーディオン３の内容２</p>
  </dd>
</dl>
<h2>menu2</h2>
<dl id="menu2" class="accordion">
  <dt>アコーディオン４</dt>
  <dd>
    <p>アコーディオン４の内容１</p>
    <p>アコーディオン４の内容２</p>
  </dd>
  <dt>アコーディオン５</dt>
  <dd>
    <p>アコーディオン５の内容１</p>
    <p>アコーディオン５の内容２</p>
  </dd>
  <dt>アコーディオン６</dt>
  <dd>
    <p>アコーディオン６の内容１</p>
    <p>アコーディオン６の内容２</p>
  </dd>
</dl>
<h2>menu3</h2>
<dl id="menu3" class="accordion">
  <dt>アコーディオン７</dt>
  <dd>
    <p>アコーディオン７の内容１</p>
    <p>アコーディオン７の内容２</p>
  </dd>
  <dt>アコーディオン８</dt>
  <dd>
    <p>アコーディオン８の内容１</p>
    <p>アコーディオン８の内容２</p>
  </dd>
  <dt>アコーディオン９</dt>
  <dd>
    <p>アコーディオン９の内容１</p>
    <p>アコーディオン９の内容２</p>
  </dd>
</dl>
</body>
</html>
```

### css

```css:test_11.css
.accordion dd.bor{
  border-bottom: solid 1px;
}
```

### javascript

```javascript:test_11.js
$(function(){
  $('.accordion dd').hide();
  $('#menu1.accordion dd').addClass('bor').prev('dt').on('click',function(){;
    $(this).next('dd').slideToggle().siblings('dd').slideUp();
  });
  $('#menu2.accordion dt').on('click',function(){
    $(this).next('dd').addClass('bor').slideToggle().siblings('dd').removeClass('bor').slideUp();
  });
  $('#menu3.accordion dt').on('click',function(){
    var dd=$(this).next('dd');
    $.when(dd.slideToggle().siblings('dd').slideUp()).done(function(){
        dd.addClass('bor').siblings('dd').removeClass('bor');
      });
  });
});
```
## 関連

- 元ネタ：https://teratail.com/questions/100714
arduinoでregex

#概要
arduinoで正規表現やってみた。
regex.hが見つからないので、slre.hやってみた。

#写真

![image](https://qiita-image-store.s3.amazonaws.com/0/18104/0a335ee0-5615-a7ee-a581-94b569f32f7e.png)

#サンプルコード

```
#include "slre.h"

void setup()
{
 	Serial.begin(115200);
	while (!Serial) delay(250);
	Serial.print("ok");
	Serial.println();
	const char * request = " GET /index.html HTTP/1.0\r\n\r\n";
	struct slre_cap caps[4];
	char t[64];
	if (slre_match("^\\s*(\\S+)\\s+(\\S+)\\s+HTTP/(\\d)\\.(\\d)", request, strlen(request), caps, 4, 0) > 0)
	{
		//Serial.println(caps[0].len);
		//Serial.println(caps[0].ptr);
		//Serial.println(caps[1].len);
		//Serial.println(caps[1].ptr);
		//Serial.println(caps[2].len);
		//Serial.println(caps[2].ptr);
		strncpy(t, caps[0].ptr, caps[0].len);
		t[caps[0].len] = '\0';
		Serial.print("method : ");
		Serial.println(t);
		strncpy(t, caps[1].ptr, caps[1].len);
		t[caps[1].len] = '\0';
		Serial.print("url : ");
		Serial.println(t);
		strncpy(t, caps[2].ptr, caps[2].len);
		t[caps[2].len] = '\0';
		Serial.print("http : ");
		Serial.println(t);
	}
	else
	{
		Serial.print("Error parsing: ");
		Serial.println(request);
	}
}
void loop()
{
}
```

#ライブラリ
https://github.com/ohisama/slre

以上。