軽い気持ちでslack上のhubotからdokkuをいじれないか試していました。
dokku appsとdokku lsの結果を知らせている犬の様子です。
何か犬がそれっぽく喋ってて楽しいし、DevHubとか動いたし大変便利そうでした。
調べてみるとdokkuのメインコントリビュータさん...ﾜｧｫ...
ぼくのツイートを見たと言っています。多分このツイートだろうと思われます。
内容はすごい便利なことを言っていたので実際に試してみてわからないことを聞いてみました。
すごいびっくりして動揺しましたが、嬉しかったです。
大したこともしてないのでGitHubは便利なソースコード置き場件、なんかスゴイ人たちがすごいものを作ってるところ としか見てなかったのすが、こういうこともあるんだなぁとしみじみしました。
すごい緊張しながら返信しましたがいい経験になった気がします。
あーびっくりした。
hubot-dokkuについてはまた記事書く気がします。
Ubuntuでこの赤いエラーが出たときの対処法です。
(見出しがリンク先になってます)
いくつか書いてある手順のどれかで解決できる可能性が非常に高いと思われます。
libefl関係のエラー"The package system is broken"して困っていて、ググっても簡単に解決できなかったときに出会って無事に解決しました。
その際は、ppaを減らしたら解決しました。
"The package system is broken"解決策についてすごく良くまとまっているので参考に。
こんにちは、Ergodox買おうの会を身近な人と始めようと声をかけてみましたが、興味はあれど一緒に買ってくれる人がいなかったので、とりあえず買ってみた人です。
購入までのことについてはgistにまとめてあります(購入の詳細、届くまでのこともコメント欄に書いてあります)。
軸はGreetechの赤軸です。軽くて静かを望んでいたので満足しています。
下の写真はｶｲｼｬの様子ですが、真ん中のはどのキーボード買おうか悩んでいたときにHHKBを試してみようと思い買ったHHKB Lite2です。まだ慣れない感じなので置いてありますがそのうち撤去される予定です(初日で撤去されました)。
なかなか慣れないのでまだ悩み中です。
設定に関しては以下の記事を参考にしました。
→ ErgoDox買ったったった（そしてハウツーConfigurator） - Make 鮫 noise
Massdropのアカウントを作ればErgodoxの基本的なキーマップをWebから作成できるようです。
→ Ergodox Configurator - Massdrop
作成したキーマップを保存、読み込みもできて便利な感じです。目的のキーマップが完成したら.hexファイルを作成します。
.hexファイルはTeensy Loaderを使用してErgodoxに適用します。
→ Teensy Loader Application - available for Windows, Linux and Macintosh systems
OSXでは問題なく出来たのですが、Ubuntuではうまくいかなくて困っているので知ってる方がいれば教えていただきたいです。
FalbaTechで購入したケースは滑りやすいのと、セパレートのキーボードは中央が高くなるように傾斜がついていたほうがタイピングしやすいと少し使ってわかってきました。
→ 漢(オトコ)のコンピュータ道: キーボードを新しくした話（ErgoDox）
この記事を参考にアクリル板を買ってもいいかもですし、四角いゴム角材的な何かを買ってもいいのでは...と言う感じです。
四角いゴム的な何かって...消しゴムなのでは...!!?となって今はいい感じの消しゴムを探しています。
Ergodoxを買おうと思った動機は、プログラマになってから肩こりするようになっていてセパレートのキーボードを見たときに、これを使えば姿勢が改善されそうので良いのでは!と思ったからです。
この記事もErgodoxで書いていますがのろのろです、まだまだ慣れないので積極的に使っていきたいです。
あと写真をよく見るとXキーの位置にVキーがあるということに気がつくと思います、VimmerにはVキーが2つ届くようです。
※まだ出撃してません
一般的な提督は情報戦が勝負だと思うので入念に情報収集しながらやります。
そしてすごい提督と違い戦力、装備、資材のリソースが限られています。この限られたリソースの中で如何に結果を最大化するか考えていきます。
E-1, E-4 : 連合(高速?)
E-2, E-3 : 輸送(強い軽巡駆逐)
E-5 : 謎
E-6 : 機動艦隊(空母多め?)
E-1: 戦闘糧食x2、給糧艦「伊良湖」x2、大発動艇(八九式中戦車＆陸戦隊)
E-2: 補強増設x2、九六式陸攻x1、一式陸攻
E-3: 改修資材x6、勲章、Bofors 40mm四連装機関砲
E-4: 一式陸攻、三式戦 飛燕、熟練搭乗員
E-5: 三式戦 飛燕(飛行第244戦隊)、雷電、改修資材x7
E-6: 一式陸攻(野中隊)、改修資材x8
E-7: 熟練搭乗員、勲章x2、甲種勲章x1
E-4までは敵艦隊的にも甲でいけそう報酬も欲しい。
E-5以降はヤバそうなので実際に突っ込んでみて考えたい。
E-1: 高速統一駆逐艦5(雷巡1)
戦艦、軽空、軽空、重巡、重巡、駆逐:対空
軽巡、駆逐、駆逐、駆逐、駆逐、雷巡
E-4: 水上高速統一戦艦1以下雷巡1
戦艦、軽空、軽空、重巡、重巡、重巡
軽巡、雷巡、駆逐、駆逐、駆逐、重巡
戦艦1, 軽空2, 重巡or航巡4, 軽巡1, 雷巡1, 駆逐5
1: Italia, 千歳, 千代田, 鈴谷, Zara, 初月
2: 神通, 時津風, 雪風, 島風, 天津風, 大井
E-4: 妙高, 熊野
E-2: ボスが陸上, 砲台
軽巡、駆逐、駆逐、駆逐、航巡、航巡
E-3: 輸送作戦, 駆逐艦8
航巡、水母、駆逐、駆逐、駆逐、駆逐
軽巡、駆逐、駆逐、駆逐、駆逐、航巡
航巡2, 駆逐8, 水母1
E-2: 阿武隈or川内, 潮, 初霜, 時雨, 最上, 三隈
E-3: 瑞穂, そこそこのレベルの駆逐艦4
ボスが陸上, 高レベル駆逐艦
航巡、航巡、駆逐、駆逐、駆逐、駆逐:対空
利根, 筑摩, 夕立, 暁, 綾波, 秋月
ボスが陸上(艦爆、瑞雲が有効), 空母の数でルートが変わる
航戦、航戦、空母、空母、航巡or軽空、あきつ丸
軽巡、駆逐、駆逐:対空、雷巡、航巡、重巡
1: 扶桑, 山城, 摩耶, あきつ丸, 加賀, 翔鶴
2: 大淀, ベールヌイ, 照月, 北上, 羽黒, 鳥海
E-1
E-4
E-2
E-3
E-6
主な戦力です。
扶桑改二(96), 山城改二(97), 大和改(85), 武蔵改(73), 長門改(75), 陸奥改(73), 金剛改二(79), 比叡改二(75), 榛名改二(90), 霧島改二(80), Bismarck drei(98), Roma(45), Italia(87)
加賀改(87), 赤城改(57), 瑞鶴改(88), 翔鶴改二(90), 飛龍改二(86), 蒼龍改二(89), 天城改(53), Graf改(75), 大鳳改(86)
瑞鳳改(60), 千歳航改二(59), 千代田航改二(64), 龍驤改二(88), 隼鷹改二(84), 飛鷹改(37)
鈴谷改(48), 熊野改(55), 利根改二(93), 筑摩改二(81)
Prinz改(87), 鳥海改二(78), 摩耶改二(83), 羽黒改二(81)
大井改二(81), 北上改二(85), 木曽改二(70)
川内改二(69), 神通改二(83), 阿武隈改二(81), 球磨改(67), 矢矧改(58), 大淀改(79)
時津風改(118), 雪風(87), 夕立改二(81), 時雨改二(89), ベールヌイ(81), 潮改二(80), 初霜改二(81), 暁改二(71), 天津風改(54), 秋月改(57), 照月改(66), 島風改(57), 綾波改二(82)
(進撃中)
買って2ヶ月近く経ったのとErgodox使ってると最高感しかないので、社内勉強会でErgodoxの良さを語ってきました。
Ergodox購入検討者向けのスライドなので参考になれば嬉しいです。
こちらは自分のErgodoxについての紹介です。
実際に使ってみて改善してきた歴史やキーマップを紹介してます。
ブコメでライザップ比較がほしいとあったので頑張って描きました(写真は恥ずかしいので...)。
横から見た感じがもっと偉そうにエビ反ってるときもある気がしますが、大体絵に書いた通りの感じです。
前かがみでタイピングすることは余りなくなりました。モニタとの距離も前より遠くなって目にも良さそうな感あります。
肩こりもHHKB Lite2を使用していた時と比較すると改善してます！
実は、Ergodox購入の目的はプログラマになってから悩んでいた肩こり改善がメインの目的だったので個人的に大満足しています。
最後に最近の僕の魂の声です。
プログラミング言語Rustを一通り読んだのでまずFibonacci数列書いてみたメモです。
Table Of Contents
Fibonacci以外にも色々やっていく予定なので、Rustの勉強用リポジトリを作ります。
$ cargo new exercise --bin
$ cd exercise
mainにﾄﾞﾊﾞﾄﾞﾊﾞ書いても良いのですがRustにはモジュールがあるので使ってみます。
$ cd src
$ touch lib.rs
$ touch fibonacci.rs
lib.rsにモジュールについての情報を書き込みます。
pubmodfibonacci;fibonacci.rsを書いていきます。外部から呼ぶ関数にはpubをつけて宣言します。
pubfnfib_match(n:i32)->i32{matchn{0=>0,1=>1,_=>fib_match(n-2)+fib_match(n-1),}}main.rsから呼び出すときは
externcrateexercise;useexercise::fibonacci;fnmain(){assert_eq!(8,fibonacci::fib_match(5));}のようにします。
fibonacci.rs内に続けてテストを書いていく方向でいきます。
// pub fn fib_match() ... の下#[cfg(test)]modtests_fibonacci{usesuper::*;#[test]fntest_fib_match(){assert_eq!(89,fib_match(10));}}$ cargo testRunning target/debug/exercise-aedb186b5607382a
running 1testtest fibonacci::tests_fibonacci::test_fib_match ... ok
test result: ok. 1 passed;0 failed;0 ignored;0 measured
Running target/debug/exercise-d96eb056e1d4faff
running 0 tests
test result: ok. 0 passed;0 failed;0 ignored;0 measured
Doc-tests exercise
running 0 tests
test result: ok. 0 passed;0 failed;0 ignored;0 measured
Fibonacci数列計算の時間を図りたさがあるのでベンチマークテストを使ってみます。
注意して欲しいのはRust 1.9時点ではベンチマークテストはnightly buildでしか使えないということです。
nightlyの入手方法は以下にあります。
$ curl -s https://static.rust-lang.org/rustup.sh | sh -s -- --channel=nightly
これでベンチマークテストができます。
テストはfibonacci.rsに書いていくことにしたのでベンチマークテストを追加します。その前に、testアトリビュートとtestクレートをlib.rsに追加します。
#![feature(test)]externcratetest;pubmodfibonacci;fibonacci.rsにベンチマークテストを書きます。
#[cfg(test)]modtests_fibonacci{usesuper::*;usetest::Bencher;#[test]fntest_fib_match(){assert_eq!(89,fib_match(10));}#[bench]fnbench_fib_match(b:&mutBencher){b.iter(||fib_match(30));}}$ cargo bench
Compiling exercise v0.1.0 (file:///home/vagrant/works/exercise)
Running target/release/exercise-aedb186b5607382a
running 2 tests
test fibonacci::tests_fibonacci::test_fib_match ... ignored
test fibonacci::tests_fibonacci::bench_fib_match ... bench: 1,207 ns/iter (+/- 768)test result: ok. 0 passed;0 failed;1 ignored;1 measured
Running target/release/exercise-d96eb056e1d4faff
running 0 tests
test result: ok. 0 passed;0 failed;0 ignored;0 measured
これは便利。
パターンマッチを使った方法(O(2^n))はもう書いたのでそれ以外の方法でも書いてみます。
O(n)
Rustは関数内に関数を定義できます。
pubfnfib_one(n:i32)->i32{fnfunc(a:i32,b:i32,c:i32)->i32{ifc<2{returna;}func(a+b,a,c-1)}func(1,0,n)}クロージャを使って再帰を書けたほう便利そうですが
クロージャを使った再帰はできないみたいです。
O(n)
pubfnfib_dp_simple(n:i32)->i32{letmutf1=0;letmutf2=1;letmuttmp=0;for_in0..n-1{tmp=f1+f2;f1=f2;f2=tmp;}tmp}一度計算した結果を配列にメモする方法。
プログラミングコンテストチャレンジブック [第2版]にあるC++のコード
intmemo[MAX_N+1];intfib(intn){if(n<=1)returnn;if(memo[n]!=0)returnmemo[n];returnmemo[n]=fib(n-1)+fib(n-2);}これを素直に実装しようとすると、memoはstatic mut [i32; MAX_N]型の配列になると思うのですが、static mut型の値を変更するにはunsafeを使わざるを得ないのでアンチパターンな気がします。
という意見をもらったので実装してみました。
constMAX_N:usize=1000;structFibMemo{memo:[i32;MAX_N],}implFibMemo{fnnew()->Self{FibMemo{memo:[0;MAX_N]}}fncalc(&mutself,n:i32)->i32{ifn<2{returnn;}ifself.memo[nasusize]!=0{returnself.memo[nasusize];}self.memo[nasusize]=self.calc(n-2)+self.calc(n-1);self.memo[nasusize]}}pubfnfib_memo(n:i32)->i32{letmutf=FibMemo::new();f.calc(n)}ベンチマークテストしてみるとあまり速度が出ておらず、もっと良い実装ありそうですが正解がわかってません。
O(log(n))
プログラミングコンテストチャレンジブック [第2版]にのってる方法です。
フィボナッチ数列の行列表現を利用した手法です。
fnmul(a:&[i32;4],b:&[i32;4])->[i32;4]{letmutc=[0;4];foriin0..2{forkin0..2{forjin0..2{c[i*2+j]=c[i*2+j]+a[i*2+k]*b[k*2+j];}}}c}fnpow(muta:[i32;4],mutn:i32)->[i32;4]{letmutb=[1,0,0,1];whilen>0{ifn&1!=0{b=mul(&b,&a);}a=mul(&a,&a);n>>=1;}b}pubfnfib_repeat(n:i32)->i32{// a[0] = A[0][0]// a[1] = A[0][1]// a[2] = A[1][0]// a[3] = A[1][1]letmuta=[1,1,1,0];a=pow(a,n);a[2]}リファレンスやExampleを見るとビット演算やシフト演算もサポートされていました。
上のコードでは二次元配列ではなく一次元配列で処理してます。
O(1)
pubfnfib_formulas(n:i32)->i32{((((1f64+5f64.sqrt())/2f64).powi(n)-((1f64-5f64.sqrt())/2f64).powi(n))/5f64.sqrt()).round()asi32}Rustはf64などのプリミティブ型にimplで数値計算系のメソッドが定義されているので、こういった処理を直感的に書けて便利感を感じました。
matchの方法は遅すぎるのでのせてません。1000番目の計算時間です。
test fibonacci::bench_fib_one ... bench: 317 ns/iter (+/- 55)
test fibonacci::bench_fib_dp_simple ... bench: 321 ns/iter (+/- 59)
test fibonacci::bench_fib_memo ... bench: 8,525 ns/iter (+/- 1,039)
test fibonacci::bench_fib_repeat ... bench: 24 ns/iter (+/- 5)
test fibonacci::bench_fib_formulas ... bench: 0 ns/iter (+/- 0)
関数呼び出し1回と動的計画法はO(n)で同程度の時間、メモを使用した方法は結構時間かかっています。繰り返し二乗法はO(log(n))なので速いです。
一般項はO(1)なのでどんなnでも定数時間しかかからないので比較しても意味なさげです。
こういうアルゴリズム別に計算時間の比較とかしたいときにベンチマークテスト便利!便利!ってなりました。
色々学びがありました。
テスト関係が標準であるのはいいことですね。ベンチマークテストも簡単に使えて便利でした。
Rustはコンパイラ先生がかなり厳しくつらいので、まだ慣れが必要感がすごいです。がんばるぞい。
ソースコードは以下にあります。自分のやる気次第ですが他のこともやってみたい予定です。
リファレンスやドキュメントで時々出会う turbofish とは、"::<>"のこと
型を明記するのとturbofishの両方が使えるときってどっち使うと良いのかな?
letv:Vec<i32>=(0..10).collect();letv=(0..10).collect::<Vec<i32>>();この記事は、npm非依存でReactを使ったWebフロントエンド開発をしたい方向けです。
GitHub - reactjs/react-router: A complete routing library for React
react-routerがCDNで使用できると聞いてやってみました。
ReactのチュートリアルでもCDNのみを使用した例を使っているのでこれを雛形として、react-routerのCDNを追加します。
<!-- index.html --><!DOCTYPE html><html><head><metacharset="utf-8"/><title>React Router CDN Sample</title><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script><scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/react-router/2.5.2/ReactRouter.js"></script></head><body><divid="content"></div><scripttype="text/babel"src="main.js"></script></body></html>これでreact-routerが使えます。
CDNを使用した場合は、window.ReactRouterにライブラリが入っています。
let{Router,Route,Link,hashHistory}=window.ReactRouter;このように変数として宣言しておくと良いです。
簡単なreact-routerの例です。
// main.jslet{Router,Route,Link,browserHistory}=window.ReactRouter;classIndexextendsReact.Component{render(){return(<div><h1>HelloReact!</h1><ul><li><Linkto='/about'>About</Link></li><li><Linkto='/article'>Article</Link></li></ul>{this.props.children}</div>);}}classAboutextendsReact.Component{render(){return(<div>About</div>);}}classArticleextendsReact.Component{render(){return(<div>Article</div>);}}ReactDOM.render((<Routerhistory={hashHistory}><Routepath='/'component={Index}><Routepath='about'component={About}/><Routepath='article'component={Article}/></Route></Router>),document.getElementById('content'));index.htmlをブラウザで開くだけでreact-routerが動いているのを確認できます。
個人的にこれはすごく便利で、npmのあれこれを気にしなくて良いのはメリットです。あとはブラウザでimportが動くようになれば、依存関係を気軽にファイル分けできて良さそうな気がします。
historyにhashHistoryを使用していますが、サーバに乗せればbrowserHistoryも使えます。
こういう場合は、react-routerで作成したルーティングテーブルにリロードでアクセスすると404エラーになってしまいます。
redditやstackoverflowで議論されていて、解決策が提示されています。
fromflaskimportFlask,render_templateapp=Flask(__name__)@app.route('/',defaults={'path':''})@app.route('/<path:path>')defindex(path):returnrender_template('index.html')if__name__=='__main__':app.run(debug=True)FlaskでCDNのreact-routerを使用した例です。
サーバサイドをNodejs以外で書くとなると、2つのパッケージマネージャを使うことになり管理が大変になるのでnpm非依存になるように工夫してみました。
Nodejs界隈がビルドツールに強く依存していたりしてモダンなWebフロントエンド開発を始める際のハードルが高くなっているような気がしています、CDNでさっと始めるメリットもあると思いますので気軽にはじめたい方におすすめです。
Cppcheckはとても優れたツールですが、Windowsで使用する場合はSetupがありますが、Linuxで使用する場合は手動でのインストールになります。
ソースコードをダウンロードしてビルドすれば良いのですが、ビルドするツールをインストールできない場合などビルド困難な場合がありますので、RPMパッケージをインストールする方法を紹介します。
Note
1つ注意なのは、RPMパッケージでインストールするため必ずしも最新版のCppcheckを使えるわけではありません、新しいCppcheckがどうしても使いたい場合はソースコードからビルドしましょう。
紹介する方法はCentOS6を対象にしますが、別バージョンのCentOSに関しても目的のバージョンに置き換えればインストール可能だと思います。
cppcheck Download (DEB, RPM, TXZ)
上記のリンクから目的のCppcheckのRPMパッケージを探します。
CentOS6のx86_64のCppcheckを選択するとパッケージの詳細ページに行きます、下の方にDownloadという項目があります。
DownloadアイコンをクリックするとRPMパッケージへのリンクがあるページに行きますので、"Binary package"のリンクをコピーして、CppcheckをインストールするCentOS上でwgetします。
$ wget http://dl.fedoraproject.org/pub/epel/6/x86_64/cppcheck-1.63-2.el6.x86_64.rpm
あとはrpmコマンドでインストールします。
$ sudo npm -ivh cppcheck-1.63-2.el6.x86_64.rpm
残念なことに自分の環境では以下のようなエラーが出ました。
warning:cppcheck-1.63-2.el6.x86_64.rpm:HeaderV3RSA/SHA256Signature,keyID0608b895:NOKEYerror:Faileddependencies:libtinyxml2.so.1()(64bit)isneededbycppcheck-1.63-2.el6.x86_64libtinyxml2がないみたいです。
依存パッケージは最初に選択したパッケージのリンク先で確認できます。
cppcheck-1.63-2.el6.x86_64.rpm CentOS 6 Download
足りないパッケージは環境によって違うと思いますので適宜インストールします。今回のケースではlibtinyxml2が足りないので、Cppcheckと同じようにインストールしていきます。
DownloadからRPMパッケージへのリンクをコピーしてインストールします。
$ wget http://dl.fedoraproject.org/pub/epel/6/x86_64/tinyxml2-1.0.11-4.20130805git0323851.el6.x86_64.rpm
$ sudo rpm -ivh tinyxml2-1.0.11-4.20130805git0323851.el6.x86_64.rpm
これでCppcheckをインストールする準備ができたので改めてインストールします。
$ sudo npm -ivh cppcheck-1.63-2.el6.x86_64.rpm
エラーがでなければインストール完了です。
新しいバージョンをビルドしてインストールしたいなどで、パッケージをアンインストールする際には以下のようにアンインストールします。
$ sudo npm -e cppcheck-1.63-2
RPMパッケージを直接インストールすることで、リポジトリの追加やビルドツールのインストールなどが省けるメリットがあります。デメリットはバージョンが固定なことです。
状況に応じてインストール方法を選択していくことになると思いますが、RPMでのインストールは簡単だったので割りとおすすめです。
GitLab CIのquick startを読んでもしっくり来なかった人向けにGitLab CIの仕組みをまとめました。
特に「Runnerって何?」ってなった人向けです。
(※GitLab CIの導入方法や使い方については触れていません)
GitLab Continuous Integration | GitLab
上のページのArchitectureの図がとてもわかり易いです。
GitLab CI is a part of GitLab, a web application with an API that stores its state in a database. It manages projects/builds and provides a nice user interface, besides all the features of GitLab.
GitLab CIはGitLabの中の一つの機能でありWebアプリケーションとして動いていてprojectsとbuildsを管理するための良い感じのインターフェースを提供しています。
GitLab Runner is an application which processes builds. It can be deployed separately and works with GitLab CI through an API.
GitLab Runnerはビルドのための一つのアプリケーションで、別々の場所で動かすことができ、APIを通してGitLab CIと連携できます。
図を見て分かるように、GitLab RunnerはGitLab本体とは分離して別マシンや別コンテナに配置して、GitLabとGitLab Runner間はAPIで通信する仕組みになっています。
とてもシンプル。
GitLab RunnerについてはリポジトリのREADMEがわかりやすいです。
GitLab.org / gitlab-ci-multi-runner · GitLab
簡単にまとめると
Windowsにも対応してるのにびっくりしました。心配になりがちな、Windowsへのインストール方法も配置はGoのシングルバイナリをダウンロードして配置するだけで良いので簡単です。Goで書かれてる強みを感じました。
OSXに関してもバイナリをcurlでダウンロードして配置、Linuxに関してはリポジトリと追加してパッケージマネージャでインストールできます。
Dockerの場合はgitlab/gitlab-runnerというイメージが配布されているのでそちらをインストールして利用できます、基本的にUbuntu14.04のようですが、Aplineも使えるようです(gitlab/gitlab-runner:alpine)
GitLab Runnerという名前についてですが、プロジェクトの名前はGitLab CI Multi Runnerで、GitLab CI Runnerと呼ばれていることが多いですが、今は"GitLab Runner"と呼んで欲しいみたいです。
ArchitectureもシンプルでGitLab CI良いなぁとなりました。
Runnerについてのさらに詳しいことやわからないことは、GitLab Runnerの公式リポジトリを見てみると良いと思います。
個人的にはWindowsでのCIに悩んでいたので、Jenkinsに手を出さないでGitLab CIだけで全て収まりそうなのでテンション上がっています。
VM上にある開発サーバとかを自動起動したいのでやってみました。
~/Library/LaunchAgentsに好きな名前のplistファイルを作成します(ここではvagrant.startup.plist)
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"><plistversion="1.0"><dict><key>EnvironmentVariables</key><dict><key>PATH</key><string>/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin</string></dict><key>Label</key><string>vagrant.startup</string><key>ProgramArguments</key><array><string>sh</string><string>[Shell script名]</string></array><key>RunAtLoad</key><true/><key>StandardErrorPath</key><string>/tmp/vagrant.startup.agent.stderr</string><key>StandardOutPath</key><string>/tmp/vagrant.startup.agent.stdout</string><key>UserName</key><string>[ユーザー名]</string><key>WorkingDirectory</key><string>[Shell scriptを配置したディレクトリ]</string></dict></plist>Shell script
cd[VMのディレクトリ]&& vagrant up
cd[VMのディレクトリ]&& vagrant up
# 必要な数だけ起動ポイントは
StandardErrorPathとStandardOutPathはデバック時に役に立ちますがなくても良いです。
Macを再起動すれば自動的にplistが読み込まれますので、VMが起動していればokです。
気になるのは、VM起動したまま再起動すると起動時にVMが中断の状態になってしまうことです。
shutdown時にVMを安全にshutdownさせたいので調べてみると
など幾つか情報がでてきますが、今のところうまくいっていません。
とりあえず、中断状態からでも正常に起動してるみたいなのでこれでいいかという感じです。
WindowsでビルドやテストをするようなCIがGitLab CIで簡単に構成できるので紹介します。
簡単にわかるGitLab CIの仕組みで書いたように
GitLab RunnerはGitLab本体とは分離して別マシンや別コンテナに配置して、GitLabとGitLab Runner間はAPIで通信する仕組みになっています。
ということなので、ビルド環境のある物理WindowsマシンにGitLab Runnerを設置することでWindows版CI用Runnerを構築できます。
GitLab RunnerはGolangで書かれておりシングルバイナリとして配布されており、インストールはバイナリを配置するだけokです。
使用しているWindowsに応じてダウンロードします。
配置する場所に制限はないので好きな場所に配置します。
この記事ではC:\GitLab-Runnerにamd64のバイナリを配置したとして進めていきます。
まず登録する際に入力する情報をGitLabで確認します。
「CIをするプロジェクトページ > Settings > Runners」を開くと"URL"と"token"が書いてあります。
管理者権限でコマンドプロンプトを開き、先ほどバイナリを配置したフォルダに移動して登録していきます。
> cd C:\Gitlab-Runner> gitlab-ci-multi-runner-windows-amd64.exe registerPlease enter the gitlab-ci coordinator URL (e.g. https://gitlab.com/ci):{{確認したURL}}Please enter the gitlab-ci token for this runner:{{確認したtoken}}Please enter the gitlab-ci description for this runner:[<PC名>]: {{Runnerの説明}}Please enter the gitlab-ci tags for this runner (comma separated):{{Tag(任意)}}Registering runner... succeeded runner=XXXXXXPlease enter the executor: virtualbox, docker+machine, docker-ssh+machine, docker, docker-ssh, parallels, shell, ssh:shellRunner registered successfully. Feel free to start it, but if it's running already the config should be automatically reloaded!executerにはshellを選択してコマンドプロンプトでビルドするように指定しました。
次にユーザー名とパスワードを設定します。
この方のブログ記事にも書いてありますが、現状ユーザー名を指定するとうまく行きません。
パスワードの指定だけすると現在ログインしているユーザを自動で認識して設定するようなのでパスワードだけ指定します。
> gitlab-ci-multi-runner-windows-amd64.exe install --password ENTER-YOUR-PASSWORD
> gitlab-ci-multi-runner-windows-amd64.exe start
パスワードが正しく設定されていればstartできます。
startに成功していればGitLabのSettings>Runnersに登録したRunnerが表示されているはずです。
Note
Windowsにgitがインストールされていないとビルド時にgitがないのが原因で失敗してしまいます。
gitがインストールされていない場合は以下の記事を参考にgitをインストールすると良いです。
コマンドラインからGitを使う（for Windows） - Qiita
gitをインストールしたあとはRunnerをrestartさせる必要があります。
gitlab-ci-multi-runner-windows-amd64.exe restart
あとは.gitlab-ci.ymlを書いてpushすればCIが走ります。
実際に動かした様子です。
.gitlab-ci.ymlのtagsを使えば複数環境でCIさせることが可能です、マルチプラットフォームでのCIが必要な場面に便利。
scriptでバッチファイルを起動するようにすれば手の込んだビルドもできそうなので今後試していく予定です。
3,4年前にgentooに挑戦して挫折しましたが、再び挑戦してみます。
公式のハンドブックが日本語訳もついていて良い感じなのでこれを読みながらインストールを進めていきます。
以前やったときより格段にわかりやすい感あるぞ...
和訳はamd64が充実していますが、今回は後述しますがx86を選ぶことになるので、amd64のハンドブックを参考にしながらx86のインストールをしていきます。
Processor Intel® Atom™ Processor N2600 @ 1.60GHz × 4
Memory 1GB
Disk(SSD) 120GB
Intel® Atom™ Processor N2600 (1M Cache, 1.6 GHz) Specifications
amd64アーキテクチャで構成したいのでintel® 64がサポートされていていけるかと思いましたが、BIOSの設定を見ると有効になっておらず設定を変えることができなかったのでx86を選択します。
(念のため試してみたamd64のインストールUSBもbootできなかった...)
x86のMinimal Installation CDを選んでダウンロードします。
USBをさしてデバイス名を確認します。
% diskutil list/dev/disk1だと確認できたのでここに書き込みます。
% sudo dd if=install-x86-minimal-20160830.iso of=/dev/rdisk1 bs=1m263+0recordsin263+0recordsout275775488bytestransferredin57.257382secs(4816418bytes/sec)F2を押したまま起動して、BootでUSBの起動順位をSSDより上にします。
設定を保存して起動すると無事起動しました。
次回からはインストールをやっていきます。
幾つかLinuxをインストールした経験がないとGentooのインストールは非常に難しいので、前提として多少の知識がある方がインストールをすると思います。
ので、コマンドと変更したファイルの内容をずらずらと書いていきます。
色気が...ない...
インストールメディアは前回作成したUSBメモリを使います。
前回 => 下準備 & インストールUSB作成(Macで) : Retry Gentoo 1
※ Gentooのインストールは基本的にコマンド入力で行われるのでひたすらコマンド列挙です
※ プロンプトの表記はインストールしたのときの実際の表示です
livecd ~ # ifconfig
livecd ~ # ping -c 3 www.gentoo.org
pingが返ってくれば問題なし。
livecd ~ # parted -a optimal /dev/sda
(parted) print
(parted) rm 1
(parted) rm 2
(parted) rm 3
(parted) rm 4
(parted) unit mib
(parted) mkpart primary 1 3
(parted) name 1 grub
(parted) set 1 bios_grub on
(parted) mkpart primary 3 131
(parted) name 2 boot
(parted) mkpart primary 131 1155
(parted) name 3 swap
(parted) mkpart primary 1155 -1
(parted) name 4 rootfs
(parted) print
Model: Virtio Block Device (virtblk)
Disk /dev/sda: 20480MiB
Sector size (logical/physical): 512B/512B
Partition Table: gpt
Number Start End Size File system Name Flags
1 1.00MiB 3.00MiB 2.00MiB grub bios_grub
2 3.00MiB 131MiB 128MiB boot
3 131MiB 1155MiB 1024MiB swap
4 1155MiB 114472MiB 113317MiB rootfs
(parted) quit
livecd ~ # mkfs.ext2 /dev/sda2
livecd ~ # mkfs.ext4 /dev/sda4
livecd ~ # mkswap /dev/sda3
livecd ~ # swapon /dev/sda3
livecd ~ # mount /dev/sda4 /mnt/gentoo
livecd ~ # mkdir /mnt/gentoo/boot
livecd ~ # mount /dev/sda2 /mnt/gentoo/boot
コマンドの結果はpartedのprintだけ記載しました。
livecd ~ # cd /mnt/gentoo
livecd gentoo # links https://www.gentoo.org/downloads/mirrors/
linksコマンドでテキストブラウザが開きます。ここでstage3のtar.bz2をダウンロードします。目的のファイルを見つけたらdボタンでダウンロード、qでブラウザを終了します。
stage3-i686-20160830.tar.bz2を近いミラーからダウンロードしました。
livecd gentoo # tar xvjpf stage3-i686-20160830.tar.bz2 --xattrs
livecd gentoo # nano -w /mnt/gentoo/etc/portage/make.conf
/mnt/gentoo/etc/portage/make.confにはMAKEOPT="-j5"を追加しました。
livecd gentoo # cp -L /etc/resolv.conf /mnt/gentoo/etc/livecd gentoo # mount -t proc proc /mnt/gentoo/proclivecd gentoo # mount --rbind /sys /mnt/gentoo/syslivecd gentoo # mount --rbind /dev /mnt/gentoo/devlivecd gentoo # chroot /mnt/gentoo /bin/bashlivecd / # source /etc/profilelivecd / # export PS1="(chroot) $PS1"(chroot) livecd / # emerge-webrsync(chroot) livecd / # emerge --sync(chroot) livecd / # eselect news read(chroot) livecd / # eselect profile list(chroot) livecd / # eselect profile set 3(chroot) livecd / # emerge --ask --update --deep --newuse @world(chroot) livecd / # nano -w /etc/portage/make.confUSEフラグの設定は以下のようにしました。
USE="-a52 -bluetooth -cdda -cdr -dvd -dvdr -fortran wifi networkmanager"
"emerge --info | grep ^USE"コマンドでUSEフラグを確認後、"/usr/portage/profiles/use.desc"ファイルでUSEの説明を見ながら調整しました。
(chroot) livecd / # echo "Asia/Tokyo" > /etc/timezone
(chroot) livecd / # emerge --config sys-libs/timezone-data
(chroot) livecd / # nano -w /etc/locale.gen
en_US UTF-8 UTF-8
ja_JP UTF-8 UTF-8
の2つをコメントアウトしました。
(chroot) livecd / # locale-gen(chroot) livecd / # eselect locale list(chroot) livecd / # eselect locale set 3(chroot) livecd / # env-update && source /etc/profile && export PS1="(chroot) $PS1"en_US UTF-8 UTF-8に設定しました。
(chroot) livecd / # emerge --ask sys-kernel/gentoo-sources
(chroot) livecd / # cd /usr/src/linux
(chroot) livecd linux # make menuconfig
マニュアルコンフィギュレーションでやってみました。
64bitのチェックを外して、CPUにIntel ATOMを選択。ファイルシステムでext2を追加しました。
(chroot) livecd linux # make && make modules_install
(chroot) livecd linux # make install
(chroot) livecd linux # emerge --ask sys-kernel/linux-firmware
(chroot) livecd linux # nano -w /etc/fstab
BOOT => sda2
ROOT => sda4 (ext3をext4に)
SWAP => sda3
ネットワークを設定します。
(chroot) livecd linux # nano -w /etc/conf.d/hostname
(chroot) livecd linux # emerge --ask --noreplace net-misc/netifrc
(chroot) livecd linux # nano -w /etc/conf.d/net
(chroot) livecd linux # cd /etc/init.d
(chroot) livecd init.d # ln -s net.lo net.enp4s0
(chroot) livecd init.d # rc-update add net.enp4s0 default
(chroot) livecd init.d # nano -w /etc/hosts
(chroot) livecd init.d # emerge --ask net-misc/dhcpcd
NIC名などはハードによって異なると思いますので、則した名前で設定します。
(chroot) livecd init.d # passwd
(chroot) livecd init.d # emerge --ask app-admin/sysklogd
(chroot) livecd init.d # rc-update add sysklogd default
(chroot) livecd init.d # emerge --ask sys-boot/grub:2
(chroot) livecd init.d # grub-install /dev/sda
(chroot) livecd init.d # grub-mkconfig -o /boot/grub/grub.cfg
Generating grub configuration file ...
Found linux image: /boot/vmlinuz-4.4.6-gentoo
done
Found linux imageとなっていればokです。
(chroot) livecd init.d # exit
livecd gentoo # cd
livecd ~ # umount -l /mnt/gentoo/dev{/shm,/pts,}
livecd ~ # umount /mnt/gentoo{/boot,/sys,/proc,}
livecd ~ # reboot
インストールできました！
しかし、起動時にエラーがｯ...!!?
...
enp4s0が認識されていないようです、ifconfig -aしてもloしか出てこないのでネットワーク周りのドライバがないのでは...感があります。
マニュアルコンフィギュレーションに挑戦してみたのですが失敗していたようです。
もう一度カーネルコンパイルしなおせばいけるかもしれないので次回はKernelの修正と復旧をしてみようと思います。
しかしその他のエラーは見受けられなかったのでネットワークの問題が解決すればいけそうな気がするのを励みに頑張ります。
"Settings > Language Supprt"を開きます。
"Install / Remove Languages"でJapaneseを選択します。
Applyすると、デフォルトでfcitxとfcitx-mozcがインストールされます。
"Keyborad input method system"でfcitxが選択できるようになるので選択します。
再起動するとfctixのKeyboardアイコンがPanelに表示されます。
アイコンをクリックして"Configure"を選択します。("Configure Current Input Method"は現在の設定なので再起度後反映されないので注意)
はじめはEnglish(US)しかないので、Mozcを追加します。
"+"ボタンをクリックして、"Only Show Current Message"のチェックを外してmozcを検索/追加してok。
Mozcが追加されていば完了です。
デフォルトではCtrl+Spaceで切り替えができます。
なんかはみ出していますがこれで日本語入力ができています。
gtk-rs/gtk: GTK+ 3.x bindings and wrappers for Rust
gtk-rs/gtkを使ってみます。
開発を始める前にビルドするためにGtkのツールキットが必要なのでインストールします。
$ brew install gtk+3
(LinuxやWindowsでも動作するみたいです)
を参考に簡単な例を作ってみます。
$ cargo new hello --bin
Cargo.tomlをexamplesのようにします。
[dependencies]glib="^0"gdk="^0"gdk-pixbuf="^0"gtk="^0"cairo-rs="^0"[features]#default = ["gtk_3_18"]gtk_3_10=["gtk/v3_10"]gtk_3_16=["gtk_3_10", "gtk/v3_16"]gtk_3_18=["gtk_3_16"] #for CI toolssrc/main.rsをexamplesのbasicと同じ内容で書きます。
externcrategtk;usegtk::prelude::*;fnmain(){ifgtk::init().is_err(){println!("Failed to initialize GTK.");return;}letwindow=gtk::Window::new(gtk::WindowType::Toplevel);window.set_title("First GTK+ Program");window.set_border_width(10);window.set_position(gtk::WindowPosition::Center);window.set_default_size(350,70);window.connect_delete_event(|_,_|{gtk::main_quit();Inhibit(false)});letbutton=gtk::Button::new_with_label("Click me!");window.add(&button);window.show_all();gtk::main();}$ cargo build
$ cargo run
あっさり動きました。
どこまで実装されているのかわかりませんが、触っていってみようかと思っています。
Vimに比べるとVSCodeのほうが引き継ぎのときに楽なのではと思い立ちVSCodeをはじめてみます。
素VSCodeを眺めて普段エディタに求めている最低限のことについて考えてみます。
基礎として理解しておきたい部分
求めること
しかし大事なのは余り複雑にしないことかもしれない。
(後述しますがIntegrated Terminalを使うことでgitコマンドやmakeなど普段Terminalで実行しているコマンドは全て実行することができます)
サイドバーの一番下のアイコンが拡張機能になっていて、ここからプラグインを追加できます。
設定は、メニューからユーザー設定を開くとjsonの設定ファイルが開きここで色々設定できます、見たところプラグインに関する設定もここに追加していくことになりそうです(今のところまだ込み入った設定はしていません)
キーボードショートカットもメニューから設定できて独自のキー設定ができます(これもjson)
公式のVimプラグインを使います。拡張機能でVimで検索して一番上に出てくるものです。
基本的なtext object操作と、:wで保存、:qで閉じる、:%s...で置換、/で検索、Ctrl+w+h/j/k/lでウィンドウ間移動、tnでタブ間移動など割りと動くなぁという感じです。
Termialがエミュレートされます。$SHELLを使っていてプロファイルも全て読み込まれています。なんとtmuxも動きます。
なんとtmuxも動きます。
大事なことなので二回言いました。
ビルドや開発サーバなどの起動、git操作などをここでできるのでもともとTerminalユーザの人には大変便利。
ショートカットキーでトグルすると便利なのでキーボードショートカットに設定します。
{
"key": "shift+h",
"command": "workbench.action.terminal.toggleTerminal"
}
Visual Studio Code Key Bindings
ドキュメントに詳しくまとまっているので必要なところを変更します。
自分の場合(できるだけ普段のVimに寄せていってます)
[
{
"key": "shift+h",
"command": "workbench.action.terminal.toggleTerminal"
},
{ "key": "ctrl+e", "command": "workbench.action.toggleSidebarVisibility" },
{ "key": "ctrl+l", "command": "workbench.action.focusNextGroup" },
{ "key": "ctrl+h", "command": "workbench.action.focusPreviousGroup" }
]
Integrated Terminalでwebpackのプロセスとかを上げたままにできて便利！
tmuxも使えるので他の開発サーバも普段と同じ感覚立ち上げられます。
補完もデフォルトで効くので便利です。
画面分割の際などTerminal+Vimのときよりマウス操作が多くなってしまうのはしょうがないですが、まずまず使えそうです。
少ない設定で十分使えて、拡張もプラグインで簡単にできるのがVSCodeの良い所だと感じました。
特に設定が少なくて済むのは引き継ぎなどの際に非常に有効だと思われる(Vimの設定は自分に特化されすぎている+肥大化していて他人にすすめるにもハードルが高い)ので個人的にはそこが一番良さだなぁと思っています。
ASUS Eee PC X101CHにXubuntuをインストールした際の設定です。
Xubuntuは軽量デスクトップのXfce4を使っていてマシンスペックの低いPC向けで、使ってみた感じ欲しい設定は一通りそろっていて使いやすい印象があります。
この記事では見た目や最低限使うための設定について書きます。
これ以外に開発用にTerminalで設定している項目がありますがVimだけにとどめてあります。
目次
リポジトリが古いので更新します。
updateしないとgitもインストールできないので最初にやると良いです。
How do you remap a key to the Caps Lock key in Xubuntu? - Ask Ubuntu
これを参考に以下の設定をします。
$ sudo vi /etc/default/keyboard
XKBOPTIONS="ctrl:nocaps"再起動後に結講になります。
Synapseはランチャーです、個人的にすごい気に入って使っています。
Softwareというアプリからインストールします。起動して検索窓にSynapseと入力すると出てくるのでインストールします。
ThemeをSide Doishにしたのが以下です。
Xfce4だと青くなるぽいです、見た目が綺麗です。
gyazo/Gyazo-for-Linux: Gyazo for Linux
公式リポジトリの通りにインストールします。
$ curl -s https://packagecloud.io/install/repositories/gyazo/gyazo-for-linux/script.deb.sh | sudo bash
$ sudo apt-get install gyazo
デスクトップの上または横にあるbarをPanelと言います。縦の解像度が厳しいPCなのでModeを横に配置している画像です。
barを右クリックして"Panel>Panel Preferense"から設定を変更できます。
幅や長さも変更できてPanelのカスタマイズ性がとても高いです。
Itemsで表示するItemを選択できるのですが割と欲しいものがそろっています。
設定後
"Settings>Workspaces"で設定できます。
Xfce4の場合は横にどんどん増えていきます。2画面あると便利なので2に設定しました。
切り替えはデフォルトでCtrl+Alt+十字キーです、Ctｒｌ＋Fn+Alt+十字キーでウィンドウの移動ができます。
"Settings>Desktop"の"Icons>Default Icons"で設定できます。
いらないので全部チェックを外しました。
"Settings>Keyboard"のRepeat Delay"と"Repeat Speed"を変更します。
250と55に設定しました(デフォルト500と20)
※ Vimerのみ
Vimはビルドしてインストールします。
$ sudo apt-get install git gettext libncurses5-dev libacl1-dev libgpm-dev libxmu-dev libgtk2.0-dev libxpm-dev libperl-dev python-dev python3-dev ruby-dev lua5.2 liblua5.2-dev
$ cd Downloads
$ git clone https://github.com/vim/vim.git
$ cd vim
$ ./configure --with-features=huge --enable-gui=gtk2 --enable-perlinterp --enable-pythoninterp --enable-python3interp --enable-rubyinterp --enable-luainterp --enable-fail-if-missing
$ make
$ sudo make install
実践中...
(情報は随時更新していきます)
@ひかりのこな おくびょう ゆきがくれ CS252
かなしばり/でんじは/たたりめ/ふぶき (うそなき|みちづれ)
かなしばりを有効に使いたい
@オボン ひかえめ ふゆう HC252
ふぶき/10万|ほうでん|ボルチェン/鬼火/でんじは
鬼火と電磁波を撒いてサポートしつつふぶき&一致電気技
@メガネ ひかえめ ふゆう HC252
ふぶき/10万/ボルチェン/トリック
与ダメージ計算
| C特化 | メガネ | メガネてだすけ | |
|---|---|---|---|
| H4メガリザY10万 | 86.2%～101.9% | 126.7%～150.3% | 189.5%～224.8% |
| H4メガリザボルチェン | 66.2%～79.2% | 98.7%～116.8% | 148%～175.3% |
| H252ハッサム10万 | 49.7%～59.3% | 74.5%～88.1% | 110.7%～131% |
| H4メガガルーラふぶき | 37%～43.6% | 55.2%～65.1% | 82.8%～97.7% |
メガネてだすけでびっくり火力になって良さ。
メガネ型は手助けができるグレイシアと組むときに採用するかもしれない。
@珠or襷 ようき プレッシャー AS252
はたき落とす/猫騙し/氷の礫/けたぐり|ちょうはつ|まもる|つららおとし|れいとうパンチ
与ダメージ計算
| A252 | 珠 | 鉢巻(てだすけ) | |
|---|---|---|---|
| H252ギルガルドはたきおとす | 68.2%～80.2% | 88.6%～104.1% | 100.5%～118.5% |
| H252ランドロス氷の礫 | 73.4%～87.7% | 95.4%～114.2% | 110.2%～130.6% |
| H252ボルトロス氷の礫 | 46.2%～55.9% | 60.2%～72.5% | 70.9%～83.8% |
| H252ボルトロスはたきおとす | 56.4%～66.6% | 73.1%～86.5% | 84.4%～100% |
| H4メガガルーラけたぐり(100) | 60.7%～71.8% | 79%～93.3% | 89.5%～106% |
| H4メガガルーラねこだまし | 12.1%～14.9% | 16%～19.3% | 18.2%～21.5% |
つららばり/ロックブラスト/シェルブレード|ドロポン|氷の礫
リザードンを強く見ていく型
殻を破る/つららばり/ロックブラスト/ドロポン|氷の礫
殻破エース
例. H220(16n+1) S96 B|D188
まもる/やどりぎのタネ/ふぶきorギガドレイン/みがわり
あられは1/16、やどりぎは1/8削る、まもるみがわりで苦手なポケモンに対して立ち回る
みがわりを使う場合素早さ調整をしたほうが良い
75 (120) メガハッサム
71 (88) メガバンギラス
70 (80) キリキザン/メタグロス(メガは110)
65 (40) ハッサム/
61 (8) バンギラス
60 (同速) ギルガルド/ニンフィア
50 マリルリ/クチート/メガクチート
ギルガルドは抜いておきたい、あとはバンギだけどそれは狙い次第
耐久
| H252 | HB/D252特化 | メガH252 | メガHB/D252特化 | |
|---|---|---|---|---|
| ファイアロー鉢巻特化ブレバ | 161.6%～190.6% | 111.9%～131.6% | 122.2%～146.1% | 90.1%～106.7% |
| ファイアロー特化ブレバ | 141.4%～166.8% | 74.6%～88% | 81.8%～97.4% | 60.1%～71.5% |
| ギルガ特化ラスカノ | 97.4%～115.7% | 68%～82.2% | 82.2%～97.4% | 60.1%～72.5% |
| ランドロスいわなだれ | 44.6%～52.7% | 30.4%～36.5% | 34.5%～40.6% | 24.3%～29.4% |
| ニンフィア特化ハイボ | 42.6%～50.7% | 29.4%～35.5% | 35.5%～42.6% | 25.8%～30.9% |
| ハッサム特化テクニバレパン | 73%～86.2% | 49.7%～58.8% | 55.8%～67% | 40.6%～48.7% |
不一致抜群や等倍はわりと受けれるかも、一致抜群は厳しいけど遅い相手には身代わりでなんとか立ち回れる可能性
ファイロー、ハッサムは無理なので逃げてほかで対処するしかない
ギルガルドはPGLのORASシーズン16ダブルだと特殊が多いよう(シャドボ90%,ラスカノ60%,アイヘ9%)なので特殊受けのが現環境ではいいかもしれない
BDどちらに振るかは他のメンバーと相談だが、ジュゴンを物理方面に固くする場合、ユキノオーを特殊にするのありかもしれない
@メガ ゆきふらし れいせい/ひかえめ/いじっぱり/ゆうかん HA|C252
ふぶき/ギガドレイン|エナボ/じしん|いわなだれ/まもる|氷の礫
耐久はそこそこ上がるのでSを捨てて後攻で殴っていく
@輝石 いじっぱり あついしぼう HA252
じしん/氷の礫/いわなだれ/ステロ|ひかりのかべ|リフレクター
与ダメ計算
| 無振り | 全振り | 特化全振り | |
|---|---|---|---|
| 無振りガブ礫 | 54.6%～65.5% | 67.7%～80.8% | 72.1%～87.4% |
| H252ランド礫 | 51%～63.2% | 67.3%～79.5% | 69.3%～85.7% |
| メガリザY岩雪崩 | 67.9%～81% | 88.8%～104.5% | 94.1%～112.4% |
| H252ファイアロー岩雪崩 | 60.5%～73.5% | 77.8%～92.9% | 84.3%～99.4% |
| メガリザX地震 | 50.9%～60.1% | 66.6%～78.4% | 70.5%～83.6% |
| メガリザX礫 | x | 17.6%～21.5% | 19.6%～23.5% |
A特化全振りであられ込みでやっとメガリザYが1ターンなので、A特化252確定ぽい。
非ダメ計算
| 無振り | 特化全振り | |
|---|---|---|
| メガリザY熱風 | 50.2%～60.8% | 32.8%～40.5% |
| メガリザXフレドラ | 52.1%～61.8% | 35.7%～43.4% |
| ファイアロー特化ブレバ | 32.3%～38.1% | 22.2%～26.5% |
あついしぼうと輝石のおかげで結構硬い。
@たべのこしorラムorカゴ ずぶとい(B↑A↓)/おだやかD↑A↓ あついしぼう HB|D252
かなしばり/ねこだまし|こごえるかぜ|アンコ|なかまづくり|零度|ねむる|まもる
たべのこしをユキノオーに持たせる場合、眠る+カゴorラムありかも
ハッサム対策検討 => かなしばり、なかまづくり、アンコール
氷ポケモンはハッサムにかなり弱い(氷技半減、鋼抜群、炎技はめざパしかない)
剣舞読みアンコを後攻で打てるかどうか、そもそもリスクを犯して打つ必要があるかどうか問題
=> 現状レーティングの状況を見てみると8割強のハッサムがいじっぱりなのでSはVで無振りor4振りor調整が多い予想される、下降補正はあまりいないと考えても良いかも...?
(ハッサムの剣舞搭載率は50%くらい)
バレパンかなしばりが一番安定しそう(後攻でかなしばりを打つことが多いので読みが必要)
鋼等倍氷は冷蔵庫ロトムもいてこっちは鬼火が打てる(氷パにとってハッサムはかなり重いので2体でハッサム対策しても良さそう)
非ダメ計算
| HB/D252特化 | H252 | |
|---|---|---|
| ハッサム特化テクニバレパン | 24.3%～28.9% | 34%～41.1% |
| ハッサム特化テクニ鉢巻バレパン | 35.5%～42.6% | 51.7%～61.4% |
| メガリザY熱風 | 21.3%～24.8% | 28.9%～34% |
結構堪える、電気格闘あたりが飛んできそうなのでイノムーユキメノコあたりとサイクルできそう
@メガネ ひかえめ ゆきがくれ HC252
ふぶき/れいとうビーム/シャドーボール/シグナルビーム
C130からひたすら殴っていく
@ひかりのこな ひかえめ ゆきがくれ HC252
てだすけ/つぶらなひとみ/ふぶき/ねがいごと|うそなき|あくび|なきごえ
ダブルのてだすけはかなり有効なので必須
つぶらなひとみは先制A下げができるので有効かもしれない。ほかの補助技は相談
@オボン? ようきHAD プレッシャー HD252
こころのめ/ぜったいれいど/おいかぜ|リフレクター|はねやすめ|氷の礫
こころのめ零度特殊受け
@ おくびょう ふゆう CS252
フリーズドライ/ふぶき/ラスターカノン/リフレクター|ひかりのかべ|じこさいせい
炎/岩/鋼/格闘
メジャー炎
メジャー鋼
メジャー岩格闘
その他メジャー
ドラゴン草地面飛行あたりに強くメジャー迷惑なポケモンの一部を牽制可能
防御性能は氷半減ないので壊滅...
グライオン
トゲキッス
フリーズドライを警戒して牽制できそうなポケモン
普通の相性
この記事は、Three.js Advent Calendar 2016 9日目の記事です。
たまたま空いていたので、まんがタイムきらら Advent Calendar 2016 9日目の記事でもありますが、きらら成分はステラのまほうのアニメ(しかもエンディングだけ)となっていますので気をつけてください。
✗目次
仕事の疲れをステラのまほうで癒やしているとき、エンディングのヨナカジカルを見ているとWebGLでやれそうだなぁ...となったので仕事の息抜きにやってみた話です。
普段からWebGL触っている系の職種ではないため過度な期待はしないで下さい。
結果として以下のようなものが出来上がります。
Demo => Yonakajikaru
Repo => yymm/Yonakajikaru
WebGLレンダリングもでき、APIがわかりやすいという印象を受けたので採用しました。
基本的に公式のドキュメントを参考にして作っていきました。
three.js - documentation - Manual - Creating a scene
上記のドキュメントの最後に書いてあるhtmlとjavascript部分をちょっといじってファイルにしたものです。
<html><head><title>My first Three.js app</title><style>body{margin:0;}canvas{width:100%;height:100%}</style></head><body><script src="js/three.js"></script><script src="js/app.js"></script></body></html>constscene=newTHREE.Scene();constcamera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);constrenderer=newTHREE.WebGLRenderer();renderer.setSize(window.innerWidth,window.innerHeight);document.body.appendChild(renderer.domElement);constgeometry=newTHREE.BoxGeometry(1,1,1);constmaterial=newTHREE.MeshBasicMaterial({color:0x00ff00});constcube=newTHREE.Mesh(geometry,material);scene.add(cube);camera.position.z=5;constrender=function(){requestAnimationFrame(render);cube.rotation.x+=0.1;cube.rotation.y+=0.1;renderer.render(scene,camera);};render();index.htmlをブラウザで見てみると緑のcubeがぐるぐるしているのがみえるはずです。
このサンプルコードをベースに作っていきます。
表示したいのはただの四角形なので四角形をドキュメントから探します。
図形はGeometriesにあり、PlaneGeometoryかPlaneBufferGeometryを使えば四角形を表示できるようです。
three.js - documentation - Reference - PlaneGeometry
PlaneGeometry(width, height, widthSegments, heightSegments)
width — Width along the X axis.
height — Height along the Y axis.
widthSegments — Optional. Default is 1.
heightSegments — Optional. Default is 1.
BoxGeometryをPlaneGeometryに差替えます、引数は必要なものだけBoxGeometryを同じ値で設定します。
- const geometry = new THREE.BoxGeometry( 1, 1, 1 );+ const geometry = new THREE.PlaneGeometry( 1, 1 );引数はwidth,heightなので1×1の四角になります。
普通のGeometryかBufferGeometryのどちらを使えばいいのか判断するためBufferGeometryのドキュメントを読みました。
three.js - documentation - Reference - BufferGeometry
BufferGeometryはGeometryよりも効率的だけど扱いが大変で、シェーダーなど使う場合はBufferGeomerty一択になるようです。
今回は複雑な使い方しないの+いっぱい四角を表示するのでGPU効率の良いBufferGeometryを使うことにします。
愚直にfor文をぶん回す方法で増やてみます、ひとつひとつ図形(Mesh:geometryとmaterial)を作ってSceneに追加していく方法です。
図形の位置はMeshのpositionを変更することで移動できます。positionのデフォルト値は(x,y,z)=(0,0,0)です。
for(leti=0;i<3;++i){constgeometry=newTHREE.PlaneBufferGeometry(1,1);constmaterial=newTHREE.MeshBasicMaterial({color:0x00ff00});constplane=newTHREE.Mesh(geometry,material);plane.position.x=i;plane.position.y=i;scene.add(plane);}
増えましたが、効率悪そうです。
three.js製パーティクルシステムの実装 | 技術コラム | つみきブログ
上記のブログにあるようにgeometryで四角いパーティクルを作ってシェーダーで色や動きをつけていくほうが効率的なように思えますが今後の課題とします。(パフォーマンスの測定方法とかも知らないのでこれも課題)
まず表示する範囲について考えます。
エンディングでカメラが動いた時に横にも四角が広がっているように見えるので、見えている範囲より広め(表示範囲の２倍くらい)に分布するようにします。
各話でエンディングムービーが若干異なりますが一話のエンディングの感じだと相当奥まで多くの四角が広がっているのでz方向が深めにとったほうが良さそうです。
以上を踏まえてxy方向、z方向についてカメラの範囲と位置や四角の大きさ、表示範囲を調整します。
constscene=newTHREE.Scene();constfar=10000;constcamera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,far);constrenderer=newTHREE.WebGLRenderer();renderer.setSize(window.innerWidth,window.innerHeight);document.body.appendChild(renderer.domElement);functiongetRandomInt(min,max){returnMath.floor(Math.random()*(max-min+1))+min;}constw=window.innerWidth*2;consth=window.innerHeight*2;for(leti=0;i<1000;i++){constgeometry=newTHREE.PlaneBufferGeometry(50,50);constmaterial=newTHREE.MeshBasicMaterial({color:0x00ff00});constplane=newTHREE.Mesh(geometry,material);plane.position.x=getRandomInt(-w,w);plane.position.y=getRandomInt(-h,h);plane.position.z=getRandomInt(0,far);scene.add(plane);}camera.position.z=far;constrender=function(){requestAnimationFrame(render);renderer.render(scene,camera);};render();
いい感じです、コードの説明をします。
まずカメラですが、ドキュメントを確認すると引数は以下のようになっています。
PerspectiveCamera( fov, aspect, near, far )
fov — Camera frustum vertical field of view.
aspect — Camera frustum aspect ratio.
near — Camera frustum near plane.
far — Camera frustum far plane.
fov(画角)を広げるか、frustum(円錐)を広げるか迷いますが、frustumのfarを変更するほうが直感的に分かりやすかったのでfovはサンプルコードの初期値のままにしました。
あと、cameraのz方向が元のサンプルコードのままだと近すぎて何も見えないので設定したfar程度に離します。
(fovやfrustumなど全く聞き慣れない単語なので検索ないとよくわからなかったです。画角 - Wikipediaや6. カメラ（processing 3D入門） | Yasushi Noguchi Classなどを参考にしました。)
四角の位置はランダムに配置するようにします、x,y,z方向で範囲が違うので任意の範囲で乱数生成しています。サイズは1のままだと近いものしか見えないので適度な大きさ(50)にしています。個数は1000個にしてますがカメラをもっと離して個数をもっと増やすと賑やかしくなりそうです。
(ちなみに、はじめのうちは調整する感覚がつかめず真っ黒な画面になることが多かったです、値を変更しながらイメージして試行錯誤してこの値になってます。)
色などはmaterialで設定します。
透過も一緒に設定します。
constcolor="#000000".replace(/0/g,function(){return(~~(Math.random()*16)).toString(16);});constmaterial=newTHREE.MeshBasicMaterial({color:color,transparent:true,opacity:0.6});
それっぽい感じになってきました。ちょっと変更するだけでそれっぽくなってテンションが上がります。
fovを2倍、個数を5倍にして賑やかしさも上げました、PCのファンも回り出します。
HEXを作っているコードはstackoverflowから拾ってきたものです(URLは忘れてしまいました...)
アニメーションは最後の方にあるrenderの関数内に記述します。
とりあえず、cameraのz方向を小さくしていくと近づいていきます。
constrender=function(){requestAnimationFrame(render);camera.position.z-=4.0;renderer.render(scene,camera);};xy方向はカメラが回転している感じに動いているので、mousemoveイベントを追加してカメラを連動させてみます。
document.addEventListener('mousemove',function(event){constx=window.innerWidth/2-event.clientX;consty=window.innerHeight/2-event.clientY;camera.rotation.x=y/500;camera.rotation.y=x/500;});画面中心を(0,0)としてマウスの方向に連動(x,yの指定が逆)して動くように設定しています。
rotationは角度(rad)で指定するため大きい数で割らないとぶっ飛んで行くので注意です。
カメラを回転して気づくことですが、通り過ぎていった四角を後ろから見ようとすると見えません何故か消えてなくなっています。これはMaterialのsideがデフォルトでTHREE.FrontSideになっており表しか見えなかったためです。T
HREE.DoubleSideを指定すると通り過ぎていった四角も見えるようになります。
three.js - documentation - Reference - Material
constmaterial=newTHREE.MeshBasicMaterial({color:color,side:THREE.DoubleSide,transparent:true,opacity:0.8});マウスに連動してカメラがぐるぐるしている様子です。
以下これまでの内容のapp.jsです。
constscene=newTHREE.Scene();constfar=20000;constcamera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,far);constrenderer=newTHREE.WebGLRenderer();renderer.setSize(window.innerWidth,window.innerHeight);document.body.appendChild(renderer.domElement);functiongetRandomInt(min,max){returnMath.floor(Math.random()*(max-min+1))+min;}functiongetRandom(min,max){returnMath.random()*(max-min)+min;}constw=window.innerWidth*2.5;consth=window.innerHeight*2.5;for(leti=0;i<5000;i++){constgeometry=newTHREE.PlaneBufferGeometry(50,50);constcolor="#000000".replace(/0/g,function(){return(~~(Math.random()*16)).toString(16);});constmaterial=newTHREE.MeshBasicMaterial({color:color,side:THREE.DoubleSide,transparent:true,opacity:getRandom(0.1,0.9)});constplane=newTHREE.Mesh(geometry,material);plane.position.x=getRandomInt(-w,w);plane.position.y=getRandomInt(-h,h);plane.position.z=getRandomInt(0,far);if(plane.position.z%5==0){plane.rotation.y=getRandom(-Math.PI/2.0,Math.PI/2.0);}if(plane.position.z%7==0){plane.rotation.x=getRandom(-Math.PI/2.0,Math.PI/2.0);}scene.add(plane);}camera.position.z=far*3/4;letisMouseDown=false;letzSpeed=5;document.addEventListener('mousedown',function(event){isMouseDown=true;});document.addEventListener('mouseup',function(event){isMouseDown=false;});console.log(camera.rotation.order);document.addEventListener('mousemove',function(event){constx=window.innerWidth/2-event.clientX;consty=window.innerHeight/2-event.clientY;if(isMouseDown){zSpeed=50;}else{zSpeed=5;}camera.rotation.x=y/500;camera.rotation.y=x/500;});constrender=function(){requestAnimationFrame(render);camera.position.z-=zSpeed;renderer.render(scene,camera);};render();
左ドラッグするとｷﾞｭｰﾝと近づきます。すごいそれっぽい。
透過と角度をランダムに指定しているのでキラキラ感が増した気がします。
背景の色はrendererのsetClearColorで変更できます。
three.js - documentation - Reference - WebGLRenderer
いい方法が思いつかないので非常に雑に白にしてみます。
constfadeColor=[0xffffff,0xdddddd,0xbbbbbb,0x555555,0x333333,0x111111];constrender=function(){requestAnimationFrame(render);camera.position.z-=zSpeed;if(camera.position.z==14800){renderer.setClearColor(fadeColor[0],1.0);}if(camera.position.z==14810){renderer.setClearColor(fadeColor[1],1.0);}if(camera.position.z==14820){renderer.setClearColor(fadeColor[2],1.0);}if(camera.position.z==14830){renderer.setClearColor(fadeColor[3],1.0);}if(camera.position.z==14840){renderer.setClearColor(fadeColor[4],1.0);}if(camera.position.z==14850){renderer.setClearColor(fadeColor[5],1.0);}renderer.render(scene,camera);};
雑ですが動いたのでok.....
サンプルコードをベースにして、コードを書く側としては無理なく作ってみました(ブラウザやGPUやCPUは無理してるかもしれません)。
普段ビジュアル的なプログラミングをしていない自分でも手軽にリッチな表現を扱えるThree.jsは面白いと感じました。
(欲を言えば音楽や星形や図形のアニメーションもやりたかったのですが仕事の息抜きの範疇を超え始めるので断念しました無念。)
余裕があれば最適なコードを勉強していきたい所存なので、有識者の方アドバイスあれば是非に。
もともとまんがタイムきらら Advent Calendar 2016の参加予定はなかったのですが、たまたま空いていたので急遽入れてみました。
きららアニメには毎期癒やされていますが、ステラのまほうは癒やし効果とプログラミングのモチベーション向上効果があって最高です、みなさん癒やされてプログラミングがんばりましょう。
