typeof Diary

VimとかJSとか。

NativeScript-Vueを触った

久々の更新。

2月にこんな発表がありました。
Announcing NativeScript-Vue 1.0

要約。「nativescript-vueの1.0が出たよ」

NativeScript

JavaScriptとかTypeScript、Angularを使って、ネイティブなモバイルアプリを作ることができるフレームワークです。
詳しいことは公式参照

JavaScriptでモバイルアプリと聞くと、React Nativeなんかもありますね。

で、今回はそれをVueで書けるでっていうやつです。
最近Vue推しの自分にとっては格好のおもちゃですね。

早速遊びます。

準備

まずはNativeScriptがないと始まりません。

npm install -g native-script

次にモバイルアプリなので、こっちもやっておいてください。
IOSだけなら、JDKは入れなくてもまぁOK。
NativeScript Advanced Setup: macOS

長いのでカット。

次に、vue-cli放り込みましょう。プロジェクトのテンプレート作ってくれます。

npm install -g @vue/cli @vue/cli-init
vue init nativescript-vue/vue-cli-template <project-name>
cd <project-name>
npm install

npm installまで終わったら、npm run watch:<platform>を実行します。
今回はIOSなので、npm run watch:iosとします。

すると、シミュレーターが開くはず。
f:id:lisia:20180310220241p:plain

ひとまずここまで。
基本はここの通りです。

アプリを動かす

シミュレーター動いたのは良いけど、アプリないやん!って話ですよね。
多分そもそもビルドされてないから・・・?

package.jsonのscript内を見てみると、使えるコマンドが分かります。
package.json抜粋

  "scripts": {
    "build": "webpack --env.tnsAction build",
    "build:android": "npm run build -- --env.android",
    "build:ios": "npm run build -- --env.ios",
    "debug": "webpack --watch --env.tnsAction debug",
    "debug:android": "npm run debug -- --env.android",
    "debug:ios": "npm run debug -- --env.ios",
    "watch": "webpack --watch --env.tnsAction run",
    "watch:android": "npm run watch -- --env.android",
    "watch:ios": "npm run watch -- --env.ios",
    "clean": "rimraf dist"
  },

それっぽいnpm run debug:ios叩いてみます。

f:id:lisia:20180310220514p:plain

こんな感じでサンプルアプリが立ち上がりました。
(この後、watchしたら大丈夫でした。)

ちょっとサンプルを作ってみる

APIも叩きたいので、GiphyのAPI叩いてgifを表示するようなものにしてみます。
Vuexのサンプルで作ったことがあるこれが元ネタ。

サンプルなので、ひとつのコンポーネントにまとめてしまいます。

とりあえず画面を作る

src以下がコードを書くところです。
src/components以下にGiphy.vueを作成します。
touch src/components/Giphy.vue

<template>
 <Page class="page">
    <ActionBar class="action-bar" title="Giphy">
      <NavigationButton
        text="Go Back"
        android.systemIcon="ic_menu_back"
        @tap="$router.push('/home')"
      />
    </ActionBar>

    <StackLayout>
      <label text="Welcome to GiphyPage!"/>
    </StackLayout>
  </Page>
</template>

HelloWorldを真似て、こんな感じでtemplateを書いておきます。
次に、ページへのルーティングが必要なのでsrc/router/index.jsに書き加えます。

// ...
import Giphy from '../components/Giphy'

const router = new VueRouter({
  pageRouting: true,
  routes: [
    // ...
    {
      path: '/giphy',
      component: Giphy,
      meta: {
        title: 'Giphy'
      }
    }
  ]
}) 
// ...

homeの画面もボタンを追加しておかないとですね。

<StackLayout>
  <Button class="btn btn-primary" @tap="$router.push('/counter')">Counter</Button>
  <Button class="btn btn-primary" @tap="$router.push('/hello')">Hello World</Button>
  <Button class="btn btn-primary" @tap="$router.push('/giphy')">Giphy</Button>
</StackLayout>

画面を確認してみましょう。
f:id:lisia:20180310220536p:plain

タップして、画面が遷移することを確認します。
f:id:lisia:20180310220549p:plain

文字見えにくいけど気にしない。とりあえず、画面遷移を文字が表示できました。

処理とか入れていく

テンプレートに関しては、検索用のテキストボックスと表示領域があれば事足ります。
処理の流れは、テキストが入力されたらGhipyのAPIを叩いて、その結果をテンプレートに表示する。

これだけです。
では早速、まずはテンプレート。

<template>
  <Page class="page">
    <ActionBar class="action-bar" title="Giphy">
      <NavigationButton text="Go Back" android.systemIcon="ic_menu_back" @tap="$router.push('/home')"/>
    </ActionBar>

    <ScrollView>
      <StackLayout>
        <SearchBar
          :text="searchWord"
          hint="Please input search word"
          color="#000"
          margin="20"
          v-model="searchWord"
          @textChange="handleChangeSearchWord"
        />
        <template v-if="gifList.length">
          <Image
            v-for="(gif, index) in gifList"
            :src="gif.images.fixed_height_still.url" stretch="none"
          />
        </template>
      </StackLayout>
    </ScrollView>
  </Page>
</template>

続いて、script部分。

export default {
  name: 'Giphy',

  data() {
    return {
      searchWord: '',
      gifList: []
    }
  },

  methods: {
    handleChangeSearchWord() {
      const params = encodeURIComponent(this.searchWord).replace(/%20/g, '+')
      const url = `https://api.giphy.com/v1/gifs/search?api_key=YOURAPIKEY&q=${params}`

      fetch(url)
      .then(res => res.json())
      .then(json => {
        this.gifList = json.data
      })
    }
  }
}

軽く説明。

テンプレート側は、スクロールさせたいので、<ScrollView>で囲んでいます。
検索は<TextFiled>を最初は使っていたのですが、ドキュメント読んでると、<SearchBar>なるものがあったので、こちらを採用。

script側も特に言うことはなくて、単純にAPIを叩いているだけです。
結果をdataのgifListに放り込みます。

完成!

f:id:lisia:20180310220403g:plain

まとめ

  • JavaScriptでモバイルアプリ書ける 便利
  • しかもVue使える 便利
  • 慣れ親しんだもので書けるのはやっぱり 便利

以上!

VimConf 2017に参加した話

2年ぶりの投稿。随分と放置していました。

さて、ようやくVim Confに参加することができました。 始発の新幹線はなかなか辛かったですが・・・。

f:id:lisia:20171104091741j:plain

高まるVim熱。 f:id:lisia:20171104091903j:plain f:id:lisia:20171104175813j:plain

会場に入ると、Osaka.vimで顔馴染みの方々と合流できました。

セッション

Vim, Me and Community

haya14busaさんによるセッション。

プログラミングを始めたころから、今までの活動のまとめといった内容でした。 数年前まで、一緒にOsaka.vimにいた気がするのですが、すごいものです。

いろいろな方の助けを借りながら、ひとつひとつ小さなことを積み重ねるのは大事だなと感じました。 incsearch、Vim本体に入って本当に良かった!

The Past and Future of Vim-go

fatihさんによるセッション。

vim-goについてでした。 開発理由の中に、いろんなライブラリが乱立していることもあり、始めるときにこれ全部入れないといけないの?があったと思います。 確かになーと思ったのを覚えています。

にしてもgoCoverageすごい。見やすかった・・・! 寄付の件についても触れられていました。 「積極的に寄付を受けるべきだよ」の理由に「自由な時間使って価値を生み出している」という話が印象的でした。

セッションが終わると、Go言語が書きたくなっていました。(不思議) Goは少し書いたことがあるのですが、このvim-goを入れて、もう少し踏み込んでみようと思いました。   vim-goのチュートリアルをやろう!

Round Table Discussion 鼎談

mattnさん、k_takataさん、そしてkaoriyaさんのトークショー

Vim.2.0~使われている話であったり、皆さんWindowsVimを使用していることもあり、Windows系の苦労話が多かったように思います。

vim-devじゃなくてvim-jpでやる理由の項で、「英語での意思疎通には間違いがおきる」ということでした。 「共通言語のC言語があるじゃないか」はイケメンすぎました。

Creating your lovely color scheme

cocoponさんによるセッション。

color scheme愛が溢れていたセッションでした。 発表している中でも、すごい楽しそうに見えました。

自分は、cocoponさんの書いた[vim] 黒背景好きの僕の心を揺さぶるカラースキーム「hybrid」を読んでからというもの、ずっとhybridを使っていたりします。

「人生の33%はカラースキームを見ている」が印象的でした。

個人的にはcolor schemeって意外とやる気に直結してしまう派なので、ためになるセッションでした。 お題はcolor schemeについてですが、デザイン方面の考え方(色であったり、カラーパレットの作り方であったり)も一緒に学べて良かったです。

  • カラースキームを作るときはコンセプトを決める
  • カラーパレットを決める
  • rgbで決めない。HSB/HSLの方が選び良い
  • 色相だけを変える

などなど。

vim-mode-plus: The most ambitious vim emulator in the world

t9mdさんによるセッション。

Atomの拡張、「vim-mode-plus」についての発表。 ただ単にVimの操作を追加しているだけではなく、さらに使いやすいように趣向が凝らされているのが印象的でした。

edgeモーションがすごい便利そうでした。

Vim and Compatibility

senopenさんによるセッション。

スピードが速かった・・・。勢いがありました。 POSIX原理主義の話?

いろんな環境で、そのまま使えるように書くためには、ものすごい労力がいるんだなと感じました。 さすがにどこかは切りたくなるレベル・・・。

neosnippet.vim + deoppet.nvim

Shougoさんによるセッション。

諸事情により、歌はありませんでした。残念。 暗黒美夢王の発音にも言及されてましたね。 アンコックビムオー?

スニペットにはタイプがあり、 マーカータイプのスニペットはバッファーにマーカーを埋め込んでジャンプ。→実装しやすい。 パフォーマンスの問題もないし、実装も楽。

neosnippetでバックする実装が辛い。さらにソースも辛い。 deoppet作るよ。といった感じだった模様。

それと、オマケで、deopleteがvim8で動く話。 その代わり、windowsではめっちゃ遅い(プロセス間通信使いまくるため)

deoplete入れてみよう。

How ordinary Vim user contributed to Vim

daisuzuさんによるセッション。

小さなことからコツコツととはこのことかと感じたセッションでした。

パッチを送るのに大事なのはパッション! パッチに自分の名前が入るのには憧れますね。

バグfixは取り込まれやすい?

自前にVimをビルドして使おうかなと思いました。

あと、会社でVimトークすると良いという話もありましたが、その前にVim使い増やさないとですね・・・。 3人?いや2人しかいないです。

The new syntax highlighter for Vim

pockeさんによるセッション。

iro.vimについて。 シンタックスハイライトが上手くいかないところがあるのを直したい。 だけど、問題を解決するのに正規表現を使うと問題が2つになる。 →人類に正規表現ははやすぎる。

iro.vimは、シンタックスハイライターのプラグイン正規表現よりは理解しやすい?

このセッションで、長文のファイルの最後がシンタックスハイライトされない理由を知りました。 勉強になりました。

You've been Super Viman. After this talk, you could say you are Super Viman 2 -- Life with gina.vim

トリはAlisueさんによるセッション。

gina.vimについて。 つい数日前にgina.vimを入れたばかりで、使い方というか、丁度知りたかったところで、すごい良いタイミングでした。

確かにいろいろ覚えるのは辛いのです。 gina.vim便利そうだなーと改めて思いました。 使っていきます。

会社の紹介で、フリードリンク良いなー・・・ビールとかビールとかビールとか!

次に、お昼と懇親会のことも触れておきます。

お昼!

今半さんの"すき焼弁当"!美味しかった! f:id:lisia:20171104122359j:plain f:id:lisia:20171104122856j:plain

白い恋人はお土産です。

コーヒー!

カップにはステータスバー。 f:id:lisia:20171104125237j:plain スリーブもVimConf。細かい。 f:id:lisia:20171104124942j:plain

懇親会!

f:id:lisia:20171104180406j:plain

LTが始まったりと終始良い雰囲気でした。 もっといろいろな人と話せたら良かったのですが、正直緊張してしまい断念・・・。 勿体無い。来年こそは!

まとめ

朝から晩までVim尽くしの1日でした。 こういったカンファレンスに参加すること自体が初めてでしたが、良い経験になりました。

最近、仕事以外でのプログラミングはあまりやっていなくて、やばいと思っていたところで、モチベーションも上がったように感じます。

その他、今回は同時通訳も入っていました。 sandkattさん、ujihisaさん、本当にお疲れ様でした。

ujihisaさんの通訳は、言い回しが独特である意味ひとつのコンテンツでした。

来年も参加したいです。

東京から新幹線の最終で帰路についたのですが、戻ったら朝までカラオケということになりました。。。 さすがに疲れた!

Gulpを触ってみた

ひっさびさにこっちのブログを書きます。
Gulpを少し触ってみたので、備忘録として、導入からJavaScriptの結合とミニファイまでを書いておきます。

Gulpってなんぞや。
フロントエンドのビルドツールで良いのかな。
Gruntで気になったところが改善されているとかされてないとか。。。
Gruntも一応、結合ミニファイぐらいまでは触ってはみましたが。

ひとまず、ググッてもらえれば!

ではでは先に進みましょう。

Node.jsは入れていること前提。
%brew install node

導入

%npm install -g gulp
gulp -vでバージョン確認しておきましょう。

ここでgulpとか打って、not found的なこと言われたら、%npm link gulpとかで多分。。。
あとは%npm initして、package.jsonも作っておきましょう。

準備

使い方を軽くやるだけなので、試すためのディレクトリを作成しておきます。 ここはなんでも。
中にはgulpfile.jsを作成しておきます。

タスクを作ってみる

お決まりのHello Worldやっておきます。

// gulpfile.js
var gulp = require('gulp');

// タスクを登録
gulp.task('hello', function () {
  console.log('Hello World');
});

gulp.task('default', ['hello']);

ここまでで保存して、%gulpを叩けば、Hello Worldと出力されるはずです。
%gulp helloでも構いません。

gulp.task('task_name', function () { /* 処理 */ });みたいなイメージ。
defaultに登録したものは%gulpとした場合に実行されます。

動くことが確認できたので、次いきます。

結合、ミニファイを行う

プラグインを導入

プラグインを導入します。
%npm install gulp-concat --save-dev
%npm install gulp-uglify --save-dev

タスクを書く

先ほどはgulpfileに直接書きましたが、今回はファイルを分けます。 さっき作ったディレクトリ内に、tasksディレクトリを作ります。(好きな名前で良いです) 今回は結合→ミニファイをするタスクということで、tasks/concat-minify.jsみたいにしておきましょう。

module.exports = function (gulp) {
  // プラグイン
  var concat = require('gulp-concat'),
      uglify = require('gulp-uglify');

  // タスク登録
  gulp.task('concat-minify', function () {
    gulp.src('js/*.js') // 対象ファイル
        .pipe(concat('sample.min.js')) // 出力ファイル名
        .pipe(uglify()) // ミニファイ
        .pipe(gulp.dest('js/min')); // 出力先ディレクトリ
  });
};

内容はコメント通りです。 今回はjs以下の.jsファイルをjs/min以下にsample.min.jsとして出力させます。

gulpfile.jsを書き換えます。

var gulp = require('gulp');

require('./tasks/concat-minify.js')(gulp);

gulp.task('default', ['concat-minify']);

こんな感じで。

実行

ここまでできたら後は実行するだけです。 %gulp concat-minifyまたは%gulpで。。。

すると、js以下のjsファイルが結合され、ミニファイされたものがjs/min以下に出力されているのが確認できるはずです。

// js/sample1.js
var sample1 = function () {};

sample1.prototype = {
  showSample: function () {
    alert('Sample1');
  }
};

// js/sample2.js
var sample2 = function () {};

sample2.prototype = {
  showSample: function () {
    alert('Sample2');
  }
};

↑例えばこんなファイル。

実行後に

// js/min/sample.min.js
var sample1=function(){};sample.prototype={showSample:function(){alert("Sample1")}};var sample2=function(){};sample.prototype={showSample:function(){alert("Sample2")}};

こんな感じになっていれば!

さいご

簡単にですが、結合ミニファイまで。 今回は簡単やりたいので、結合とミニファイを同時にやりましたが、 これを結合は結合、ミニファイはミニファイなど分けることも可能です。

また、watchなんかを使えば、ファイルを監視して、編集されたら自動実行なんてのも可能です。

結合→ミニファイを手動でやるのは正直手間ですし、不具合の元なので、 このように自動化できると便利ですね。

あと、まとめたものを即時関数で囲いたい!場合は、concatよりも、concat-utilプラグインが良さそうです。

また別のところで似たような記事を書きそうです・・・w

遅れました

遅くなりましたが、明けましておめでとうございます。 今年もよろしくお願いします。

昨年はVimの勉強会に参加したことがきっかけで、興味が増えに増えた年でした。
振り返りと、今年やりたいこととか書いておきます。

2014年

momonga.vim、osaka.vimといったVimの勉強会に参加したりと、
少しですが社内に留まらず、外へ出るようになりました。

興味が増えに増えたと書きましたが、
エディタ好きの集まりなので、それぞれやってることが違っていることが大きいです。
これ結構書いてますね。

勉強会以外で個人的なニュースは大きく2点…

  • 家でもサンプル程度のプログラムをするようになった
  • 訳ありでPHPを書くことが少なくなり、JavaScriptを書く機会が増えた
家でもサンプル程度のプログラムをするようになった

家で全くしてなかったんですよ今まで。
で、これが結構大きくて、何かを作るってわけではなく、あくまでサンプル程度というのがミソ。
のめり込んで何か作るのもそれはそれで良いとは思いますが、
引き出しを増やすというか、これ知ってる!ちょっとかじったことある!だけでも随分違いました。

訳ありでPHPを書くことが少なくなり、JavaScriptを書く機会が増えた

2014年1月から、JavaScriptを書くことが増え、
主にグラフ、地図系を中心に触ってました。
軽く触ったのも含めてざっとこんな感じ。

グラフ関係

  • Highcharts
  • Highstock
  • dygraphs
  • jqPlot
  • Google Charts

地図関係

その他

  • D3.js
  • AngularJS

こんな感じだったかと思います。
D3, OL3辺りは少しだけブログにも書いたような。
Angularは結局触りしたまだできてない状態です。

PHPもまた…

そして、またPHPも少しずつ。
Laravelが人気っぽくて、少し触ってたり。
何かあったら書くかもしれない。

2015年

今年も昨年と変わらず、勉強会には参加していこうかと思っています。
ちょいちょいかじるのも止めず、あわよくば何か作れたら良いなぁとも。

Vimぷらぎんは、本当に何も浮かばないのが辛いところ。
あ、「不便を見つける努力をする」こんな目標でも良いかもですね。

久々の記事、終わり。(ネトゲが止まらない...)

基本情報結果

基本情報の結果が出ました。

ついに受かりました。
9回目です。
もうアホかと・・・。

とりあえず、これで本当に開放されました。

f:id:lisia:20141117201751p:plain

応用・・・?

・・。

Osaka.vim #3に参加した話

ついに第3回が開催されました。
参加者がほぼ顔なじみになってきた感があります。良いことです。 新しい顔も是非・・・(追記w)

今回はもくもく会でした。

やったこと

地名から緯度経度取得する謎コマンドを弄りました。

6月ぐらいにwebapiを使って、GoogleAPI叩いて、
地名から緯度経度を取得してechoするだけの謎コマンドを作りました。

名前もまんま、:GetLonLat
引数に地名入れると、その地名の緯度経度が取れるだけです。

単純。
そして、何に使うのか分からない...。

がしかし、地図系のプログラムを書いていると、
例えば、ここにマーカーを打ちたい!とか、
ここからここまでpolyline引きたい!みたいなことが良くあります。

そんな時に、いちいちGoogle先生に「東京 緯度経度」なんて聞くのは面倒です。

段々、「あれ、意外と使うぞこれ」と、謎コマンドの意識が変化してきました。

改良点

今までただ単にechoするだけだったので、
insertモードとかに入ると、表示が消えてしまっていて、なかなか不便してました。

  • echomsgに変えて、:messageで後からでも見れるように

次。
表示が残るようになったのは良いけど、それをいちいち手打ちするのは不便。

Vimscript力はまるでないので、ヘルプと睨めっこしながらやってみました。
これで良いのが分かりませんが、一応こんな感じ。

let lonlat = dict.Lon . ', ' . dict.Lat
call setreg(v:register, lonlat)

ここまでのイメージ。

f:id:lisia:20141026114908g:plain

ラスト。
:messageで引いてきたの見れるようになったし、いちいち打たなくてもよくなった。
だけど、別のとこの緯度経度がほしい時に、また取得しなきゃならない。
不便!!!

過去に引いたやつは何らかの形で参照できたら...

  • はじめてのunite-source

unite-sourceの書き方を写経していました。

参考記事

この辺りを参考に。
引いてきたやつを、とりあえずtxtファイルに追記してて、
readfileしてるだけなんですけど...
もっと良さげな履歴管理方法を考えないとと思います。

未完ですが、こんなイメージ。

f:id:lisia:20141026115725g:plain

wordに地名 / Lon: Lat: で表示しておいて、実際に挿入されるのが、Lon,Latの値だけとか、
できるんでしょうか。

てか、そうしたいです。

以上!!!
地図系アプリのお供に、是非。みたいにできたら良いですが、なかなか難しいものです。

まとめとか感想

前回#2から、全くvimrcも触らず、lingrにも顔を出さず、読書会にも参加せず、
Vim活がまるでできてませんでした。

全てはあいつのせいです。
基本情報技術者とかいう、あれのせいです。

という感じで、久々にVim活できて楽しかったです。
ちょっとした進捗ですけど、なんとなく、こうしたい・ああした方が…!
と、少しずつVimscript書いて、改良する楽しさ、作る楽しさが分かってきたのも大きかったです。

あ、helpと睨めっこも良いですが、せっかくの勉強会の場なんだから、
質問すれば良かった感がかなりあります。。。

次回もよろしくお願いします!!

おまけ

実は、Vimの勉強会というのは見せかけで、ハードの勉強会なんですよ(大嘘)

なぜかはじまる、Kinesisの分解の図。

f:id:lisia:20141026115510j:plain

Kinesisにトラックパッド移植したら便利。

9度目の基本情報

受けてきました。
この試験会場何回目だって感じで、行き慣れたもんです。
迷いがない。

午前

やはり過去問からかなり出ていた印象。
H20〜H21ぐらいを反復すれば、同じ問題多かったと思います。

個人的に「え?」ってなったのが、
問23の「Wh」求める問題で、何言ってんだこれ。ってなりました。
100Vとか10Aとか、見たのが中学以来だった気がします。

自己採点は 58 / 80 でした。

最後のストラテジが10 / 20とかいう悲惨なことになっていて、ここでかなり削られた印象。

午後

毎回午後は、
・時間が足りない ・ネットワーク苦手 ・文章読解力のなさ ・アルゴリズム... この辺りが発動して、最高59.5、0.5点足らずで落ちるとか、50点台という、
あと一歩!な感じの苦いことがここ最近は多かったです。

問1のセキュリティは、どっかで見たことあるようなないような内容の問題だった気がします。

選択は、問2,3,4,5と順にとりました。

問2のハードウェア、JKフリップフロップはぱっと見謎すぎて、正直理解できてないです。
勘で解いた感あります。 問3のプロセススケジューリング、かなり分かりやすかったんじゃないかと。
問4のデータベースはSQL基本的にできたら簡単だったと思います。

で、だ。
問5のソフトウェア設計。
これがなんだか分かりにくかった。
UML系の問題で楽かと思ってやってみたものの...。
ここは惨敗でした。

で、毎回お騒がせの問8アルゴリズム
残り15分でやって、無理のなんの。
本当に何度やっても苦手です問8。

ラスト、プログラムのとこの選択はもちろんアセンブラです。
これ以外とったことないです。
内容はバブルソートで、設問1のabcdはくっそ簡単だった印象。
設問2が全滅してますが、まぁ・・・。ね。

自己採点は

  • 問1: 5 / 5
  • 問2: 5/ 6
  • 問3: 4/ 5
  • 問4: 4/ 4
  • 問5: 2/ 6
  • 問8: 2/ 6
  • 問12: 4/ 6

単純計算で、12 + 10 + 9.6 + 12 + 4 + 6.6 + 13.2 = 67.4、
問題数が38で、26 / 38なので、一応6割は超えてる計算に。

問5と、問8が自信なさすぎて、絶望してたのですが、他で稼げていたようで、安心しました。
あくまで自己採点なので結果出るまで分からないですが、
これで基本情報の呪縛から解き放たれたら良いなと思いますし、二桁乗らないこと祈ります...。