読者です 読者をやめる 読者になる 読者になる

Bye Bye Moore

猫マンション建築の野望を胸に零細事業主として資本主義の荒波に漕ぎ出したアラサー男の技術メモ

Vueのイベントトリガをデバックコンソールで直接設定・発火させる

Vueのイベントトリガをデバックコンソールで直接設定・発火させる

実際のところ

vm.$on('test', function (msg) {  console.log(msg) })

vm.$emit('test', 'hi')
//=> hi

一回だけしか実行しないONCEというのもあります

vm.$once('testOnce', function (msg) {  console.log(1) })

vm.$emit('testOnce', 'hi')
//=> 1
vm.$emit('testOnce', 'hi')
// *なにもでない*

コンポネントで作成した子要素をアレコレしたい場合は
別途工夫が必要です。

参考もと

Vue.js
jp.vuejs.org

ハマり傾向のある私でも何とかゲームとは共存できるという話

私は昔から一つの物事に集中すると何も見えなくなるタイプの人間です。
たとえば、CIV4にハマったときにはPCの前から動かず半日、飯も喰わずにプレイするような有様。
最終的に大学の単位を落としまくり酷い目にあいました。
その事件以降、これを自分の欠点と理解し極力ゲームは避けていました。
そして、余った時間資源を生産活動*1にブチ込むようにすると、それなりに成果が見られるように成りました。

さてそんな中、弊社休憩ブースにバケモノゲームが入荷されます。
ゼルダの伝説ブレス・オブ・ザ・ワイルドです。

末恐ろしい事に「見てるだけで楽しい」という大傑作。
私の中でホコリを被っていた「ゲームやりたい」という感覚が数年ぶりに蘇ります。

たまたま営業から早く帰ってきた日に社員さんに煽られる形で、同ゲームへの進出と相成りました。
当初は実務への悪影響を心配していたのですが……実際には

  • 出社が2時間早くなり、1時間半やって30分早くメール対応開始に
  • 翌日朝のために早めに仕事を切り上げるようになった
  • クオリティを限界以上に上げる無茶な行動を控えるようになった
  • 脳のリソース割り当てから「経営リスク」というストレス要因の割合が減った
  • ストレス割合が減り、解消法も得られたため仕事の質が上がった

など、明らかに好影響が見えるように成りました。


今にして思えば、これまでの仕事だけモードというのはADHD特有の「成り行き上の仕事一筋」だったのかなと思います。
shuzo-kino.hateblo.jp

「仕事一筋」と「成り行き上の仕事一筋」は異なる

*1:学業だの経営だの

【読書メモ】スペース金融道

スペース金融道

スペース金融道

ツイッターだか二階建てだかで見かけ、
欲しいものリストにぶっ込んでいたものをついカッとなってポチり
金融系SFとは新しい切り口のように感じます

取引速度が高速を超える
アンドロイドが酒を飲む
住んでいる惑星が金を借りる

そういった不条理極まりない話を「そこを突っ込むのは止めよう」というカンタンなセリフのみで華麗にかわされてズンズンお話が進んでいきます。

伏線もしっかり回収&のちのエピソードでもしっかりフォロー

とても質の高い作品で、一気に読みきっちゃいました

特に終盤の展開がすごい(語彙喪失

gopherJs-vueでコンポネントをつかう

gopherJs-vueでコンポネントを活用刷る場合、NewComponentをつかいます

実際のところ

<!DOCTYPE html>
<html>

<body>
    <div id="app">
	<my-el></my-el>
    </div>


    <script type="text/javascript" src="basic.js"></script>
</body>

</html>
package main

import (
    "github.com/gopherjs/gopherjs/js"
    "github.com/oskca/gopherjs-vue"
)

type Model struct {
	*js.Object        // this is needed for bidirectional data bindings
	Result        string `js:"result"`
    Picked       string `js:"picked"`
}


func New() interface{} {
    //コンポネントを生成する
    m := &Model{
		Object: js.Global.Get("Object").New(),
    }
    
	m.Result = "as string"
    m.Picked = "One"
    return m
}

type controller struct {
    //テンプレートをつかうので、
    //初期化時は空っぽの構造体をおく。
	*js.Object
}

func main() {
	vue.NewComponent(New, template).Register("my-el")
	vm := vue.New("#app", new(controller))
	js.Global.Set("vm", vm)
}

const (
	template = `
<div>
    <input v-model="result"  />
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <div>
	<span>Picked: {{ picked }}</span>
        <div>Result:{{result}}</div>
    </div>
</div>
`
)

結果はこんな感じ
f:id:shuzo_kino:20170526223709p:plain

参考もと

jp.vuejs.org

【イベントログ】ワイヤレスジャパン2017に行ってきました

f:id:shuzo_kino:20170525132856j:plain
東京ビッグサイトで実施されているワイヤレスジャパン2017に行ってきました。

BLE接続トイレ利用監視ツール

BLEでつなぐタイプのトイレ利用状態チェッカーです。
子機が3000円台と相当リーズナブルなシステム。

子機その1、扉につける磁石タイプ。
ボタン電池駆動で2年保つそうです。
f:id:shuzo_kino:20170525133936j:plain
f:id:shuzo_kino:20170525133940j:plain
子機その2,フットマット。
列が並んでるか監視刷る時に使える?
f:id:shuzo_kino:20170525134219j:plain
ルータはLTEとBLEを中継する機能をもちます。
部屋に一個。
f:id:shuzo_kino:20170525133945j:plain
結果はブラウザで確認することもできますし、
必要であればライトが付くだけの仕様にもできるとのこと。
f:id:shuzo_kino:20170525134216j:plain

全身鏡とサイネージの融合「MIRADO」

www.mirado.jp
鏡とサイネージが融合した、めずらしいシステムです。
内部にWinPCが入っており、スマホのサブディスプレイとして使ったりする用途も考えられているそう。
技術的には、Linuxもいけるとの事でした。

f:id:shuzo_kino:20170525211818j:plain
f:id:shuzo_kino:20170525211821j:plain

v-forで要素にindexをつける

vue.js話。
Rubyと同様、インデックスつきのfor文を記述できます。

実際のところ

前の記事でやった内容に
インデックスをつける例を考えます。
v-for構文の中に"index"

	    <div>
		<ul v-for="(book, index) in bookdatas">
		    <li>ID{{  index }} :: {{book.title}} - {{book.content}}</li>
		</ul>
		<button v-on:click="AddNewBook">Add New Book</button>
	    </div>

参考もと

jp.vuejs.org

Gopher.jsとVue.jsを合わせてカンタンなWebアプリを作る その2:追記・確認が可能なTODOリストをつくってみる

Gopher.jsとVue.jsを合わせてカンタンなWebアプリを作る」第二回として、
追記・確認が可能なTODOリストをつくってみました。
……何? MarkDownエディタ? ……ちゃんとできたらアップロードします何卒何卒……

実際のところ

とりあえず、文字だけ並ぶやつ

package main

import (
	"github.com/gopherjs/gopherjs/js"
	"github.com/oskca/gopherjs-vue"
)

type BookData struct {
	*js.Object
	Title    string `js:"title"`
	Content string `js:"content"`
}

type Model struct {
	*js.Object        // this is needed for bidirectional data bindings
	Result        string `js:"result"`
	Flag            bool `js:"flag"`
	BookDatas  []*BookData      `js:"bookdatas"`
	InputTitle string `js:"input_title"`
	InputContent  string `js:"input_content"`
}

// this would be recognized as Inc in html
func (m *Model) Button() {
	m.Flag = !(m.Flag)
}

func NewBook(title string, content string) *BookData {
	t := &BookData{
		Object: js.Global.Get("Object").New(),
	}
	t.Title = title
	t.Content = content
	return t
}


func (m *Model) AddNewBook() {
// append利用は公式で非推奨
// 配列Pushがよい
	vm := vue.GetVM(m)
	bookdatas := vm.Get("bookdatas")
	vue.Push(bookdatas, NewBook(m.InputTitle, m.InputContent))
}

func main() {
	m := &Model{
		Object: js.Global.Get("Object").New(),
	}

	m.Result = "as string"
	m.Flag = true
	
	m.InputTitle = ""
	m.InputContent = ""
	
        m.BookDatas = []*BookData{ NewBook("first book", "Good Day"),
	NewBook("second book", "Nice one!"),
	}
	vue.New("#app", m)
}
<!DOCTYPE html>
<html>

<body>
    <div id="app" v-cloak>
        <div>str: {{ result }} </div>
	
	    <span v-bind:title="result" v-if="flag">
		Hover your mouse over me for a few seconds
		to see my dynamically bound title!
	    </span>
	    <div>
		<button v-on:click="Button">Button</button>
	    </div>
	    <div>
		Title:<input v-model="input_title" />
		Content:<input v-model="input_content" />
	    </div>
	    <div>
		<ul v-for="book in bookdatas">
		    <li>{{book.title}} - {{book.content}}</li>
		</ul>
		<button v-on:click="AddNewBook">Add New Book</button>
	    </div>
    </div>
    <script type="text/javascript" src="basic.js"></script>
</body>

</html>

CSSも何もないので、実にシンプルな概観ですf:id:shuzo_kino:20170523235547p:plain