OmniAICreator/Qiita-1.07M huggingface dataset:
Vue.jsで可変長なテキストフィールドを作る


この記事は[Vue.js #1 Advent Calendar 2017](https://qiita.com/advent-calendar/2017/vue)の16日目の記事です。

もともとは「Vuetifyを使って爆速でマテリアルデザインのコンポーネントをつくる」という記事をあげる予定でしたが、間に合わなかったので過去に社内Qiitaに載せたものを紹介します。(`Vuetify`に関する記事はいずれ書きます)

# はじめに

基本的にHTMLのテキストフィールドは固定長で作られますが、
現在取り組んでいるプロジェクトで可変長のテキストフィールドが必要になり、探してみても意外となかったのでつくってみました。

# 設計方針
設計というほど大げさなものではないですが、基本的なアイディアはこんな感じ。

- `visibility: hidden`にした`span`を用意
- 可変のテキストフィールドと同じスタイルを適用
- テキストフィールドの文字を`span`のテキストと同期させて長さを得る
- 長さをテキストフィールドに反映

はじめは入力されているテキストの文字数をカウントして長さを変えようかと思いましたが、
全角半角がまざると面倒なので却下しました。

# 実装
`Vue.js`を使った実装の上でのポイントはこんな感じ。

- `v-model`を使っても`input`文字のバインドはできるが、全角入力中の文字がとれないので`@input`を使って入力イベントをフックする
- `span`は`position: absolute (or fixed)`にしないと`clientWidth`が`0`になる
- `span`に`white-space: nowrap`をつけないと`span`が改行してしまい、正常な幅がとれない
- `vm.$nextTick`を使わないとdomの更新前に幅の計算が走ってしまう
- 入力しやすいように少し幅を大きく取る(今回は`+10px`)

# コード
`pug`と`sass`を使っています。

```html+lasso:template(pug)
#flexible-input
  input(
    type="text"
    v-bind:value="text"
    v-bind:style="style"
    @input="input"
  )
  span(ref="hidden") {{text}}
```
```js:script(js)
new Vue({
  el: '#flexible-input',
  data() {
    return {
      text: "初期値",
      style: "",
    }
  },
  mounted() {
    this.updateStyle() 
  },
  methods: {
    updateStyle() {
      this.style = `width: ${this.$refs.hidden.clientWidth + 10}px;`
    },
    input(e) {
      this.text = e.target.value
      this.$nextTick(() => this.updateStyle())
    }
  }
})
```
```sass:style(sass)
input
  border: 1px solid lightgrey
  min-width: 100px

span
  visibility: hidden
  position: fixed
  white-space: nowrap
```

# デモ

## GIF

テキストの変化が分かるように`span`を表示させています。

![9bb3af12-fafc-6de6-71b3-6c85cbfbcca5.gif](https://qiita-image-store.s3.amazonaws.com/0/97227/252b596b-0755-2f86-8288-34fa4035d9a4.gif)

## Codepen
https://codepen.io/totto357/pen/vpOzdK

<p data-height="265" data-theme-id="0" data-slug-hash="vpOzdK" data-default-tab="js,result" data-user="totto357" data-embed-version="2" data-pen-title="Flexible Input" class="codepen">See the Pen <a href="https://codepen.io/totto357/pen/vpOzdK/">Flexible Input</a> by totto357 (<a href="https://codepen.io/totto357">@totto357</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

# まとめ

今回は`Vue.js`で可変長のテキストフィールドを作成しました。
必要な機能を追加してこのコンポーネントを`npmパッケージ`として公開できるようにしたいですね。

17日目は @SatohJohn さんの[Vue-Routerのナビゲーションガードを使ってみる](https://qiita.com/SatohJohn/items/cd7067ac64d8e45da4dd)です!
PandocでPowerPointスライド(pptx)を出力する

Pandoc 2.0.5が[リリースされました](https://github.com/jgm/pandoc/releases/tag/2.0.5)。

その目玉として、**PowerPoint出力機能**(pptx writer)が挙げられます。

まだ不完全ですが（特にデザイン面）、簡潔に紹介します。

## Markdown（入力文書）

- 記法は[Pandoc's Markdown](https://pandoc.org/MANUAL.html#pandocs-markdown)に従います。
    - スライド用のMarkdownは[Producing slide shows with pandoc](https://pandoc.org/MANUAL.html#producing-slide-shows-with-pandoc)も参照
- タイトル・氏名・日付などは、ファイルの先頭に[YAMLメタデータブロック](https://pandoc.org/MANUAL.html#metadata-blocks)を作って記入します。
    - スライド用のYAMLメタデータは [Variables for slides](https://pandoc.org/MANUAL.html#variables-for-slides) も参照
    - 注意：PowerPoint向けは対応していないものも多いです

### Markdownの例

```
---
title: MarkdownでPowerPointスライド
subtitle: サブタイトルをここに書く
author: sky_y
date: 2017年12月16日
---

## 1枚目

- おはよう
- こんにちは
- こんばんは

## 2枚目

- ほげ
- ふが

## 画像

![](sample.jpg)
```

## 出力例

ソースはGitHubに置いています: [sky-y/qiita-sample-pandoc-pptx](https://github.com/sky-y/qiita-sample-pandoc-pptx)

![スライド1.JPG](https://qiita-image-store.s3.amazonaws.com/0/10473/ee47771f-c0ab-55a3-7f41-87ef9b99279e.jpeg)
![スライド2.JPG](https://qiita-image-store.s3.amazonaws.com/0/10473/e4891ae7-ebe9-f297-e77f-204e4a9a36a2.jpeg)
![スライド3.JPG](https://qiita-image-store.s3.amazonaws.com/0/10473/726b369f-99df-ca2d-b802-7f77cfd39848.jpeg)
![スライド4.JPG](https://qiita-image-store.s3.amazonaws.com/0/10473/a76dba71-b1fb-dd7b-d3af-ac77142e65b7.jpeg)

## いまいちなところ

- 画像の細かい調整はできないっぽい？
- 画面比の設定ができないっぽい
    - YAMLメタデータに`aspectratio`という設定はあるので、今後に期待？
- デザインの調整が面倒そう

本来、デザインの調整については

- `$ pandoc --print-default-data-file reference.pptx > reference.pptx` でreference.pptxを出す
- reference.pptxをPowerPointで開きデザインを調整
- pandocコマンドに`--reference-doc=reference.pptx`で渡す

という手順を取れるはずですが、reference.pptxをPowerPointで開くと「コンテンツに問題が見つかりました」と言われてちゃんと開けるので厳しいです。

（なぜかLibreOffice Impressで開けるので、そっちで頑張る手はありますが・・・）

ひとまず以上です。他の方の試用レポートをお待ちしております。
【エンジニア】文系新卒がエンジニアになってみて思ったこととか

##はじめに

1年の終わりだし、新卒でエンジニアとして働いた今年のことをまとめたかったのと、
エンジニアになりたい人の参考（特にモバイルアプリエンジニア）、になればと思って書きました！

##エンジニアになろうと思った経緯は？？
大学に入ったぐらいからプログラミングには興味があったものの、勉強とかは特にせずダラダラと大学生活していて、「エンジニアになりたい」って思ったのは大学4年の春ぐらいです。で、「iOSアプリつくりたい！」と思い就活中に1ヶ月間「TECH::CAMP」のiOSアプリ開発コースを受講したのがちゃんとしたのがプログラミング勉強のスタートでした。「TECH::CAMP」が終了したのが9月ぐらいでそこから就職活動を再開（この時点でSIer に内定していたが、SE嫌だ、アプリつくりたいと思い内定を断り就活再開）して、現在の会社に至ります。

##どうやって勉強してたの
「TECH::CAMP」を卒業してからは独学で勉強を進めていました。入社まで「TECH::CAMP」で作成したサンプルアプリの復習したり、オリジナルアプリを作ってみたりしていました。分からないとことがあったらググって調べる感じでした。ただ、実装のスキルが上がったと感じたのは実際に案件に携わってからでした。これは人に依るところが大きいと思いますが、自分は独学だとどうしてもやったりならなかったりで、知識の定着はあまりしていなかったような気がします。今思えばエンジニアインターンとかすれば良かったなと思います。。

調べ物や勉強の際に参考にしていたサイト
・Qiita
・[stackoverflow](https://stackoverflow.com/)
・[udemy](https://www.udemy.com/)： オンライン動画学習サービスです。プログラミング初心者でも学んでいけますし、VRのアプリや、簡単なSNSアプリを作成するコースもあります。めっちゃおすすめです。

##どんなことしてたの今年
4月に入社してからは3ヶ月ほど外部で研修を受けました。IT業界の基礎や、グループワーク演習、ビジネスマナーを2ヶ月ぐらいやって最後の1ヶ月はjavaの勉強でした。
研修から会社に戻ってきてからはずっとモバイルアプリ開発していました。
Android のサンプルアプリの作成 → 新規開発アプリ開発（Android ） → 既存アプリの改修案件いくつか（iOS（objective-c, swift）, Android(java)）→ iOS新規開発アプリの実装お手伝い（swift）
大まかな今年の流れはこんな感じでした。iOS : Android = 4 : 6 ぐらいでやっていたイメージです。

iOSの開発は独学でやっきてましたが、Android は全くやったことありませんでしたし端末に触れることも今までほとんどなかったので、最初にAndroid アプリの新規開発案件を担当した時は本当に毎日新鮮でした。Android のライフサイクルも知らない状態からスタートし、なんとかリリースまでこじ付けました。
入社してからできるようになったことを簡単にまとめるとこんな感じでしょうか。
・iOS アプリの基本的な実装（Swift, Objective-c）
・Android アプリの基本的な実装（Java）
・gitでのソース管理
・Xcode のデバッグ機能の活用
・Android Studio のデバッグ機能の活用

##思ったこと
###継続は力なり
Android 始めた時は3日コード見ないと、書き方とか実装忘れてました。少なくても良いので草生やし続けること大事です。

###お手本となる人、コードを見つけること大事
最初にインプットすることは、その後の基礎になったりコード書いていく上での癖に影響を与えたりと、エンジニア人生に大きくインパクトを与えると思います。だからこそ、できる人のコードを真似したり、レビュー内容を忠実に守ることが大事だと思いました。なるべく良い癖を身につけていきたいものです。

###アウトプットしよ！
これはQiitaに投稿するようになって気づいたことですが、実装してみてうまく動くけど、いざ実装内容まとめてみるとコードで分かっていない部分が意外とあったりします。「何でこのメソッド使ってるんだろう（ほかのメソッドでも同じことできそうなのになんで？）」とか、「この引数いつもnil に設定してるけどなんでやねん」とかとか、アウトプットとして文字にまとめようとすると今まで有耶無耶にしていたところがはっきりしてきます。エンジニアとして働いていると、何をどう実装して対応したかをマネージャーの人に説明するとこがあるんですが、動けばいいや精神で実装してるとそういう時に困ります。それを防ぐためにもQiita とかメモにアウトプットするのは良いなと思ってます。
また、自作アプリをリリースするとかライブラリを開発するとかいったことは技術力が上がることに直結するので積極的にやって行くべきだなと感じています。


##これからどうするの
エンジニアになって約8ヶ月程経ちましたが iOS, Android ともに基本的な機能に関しては（調べながらではありますが）ある程度実装できるようになりました。で、今関心があるのは実装の設計部分です。自分で作ったアプリの実際内容を後で見ても理解に時間がかかったり、改修のしやすい設計になっていなかったりと思う箇所が多いので、みんなに分かりやすくて・堅牢で保守性の高い設計をできるよう今後は勉強していきたいと思っています。
あとKotlin、Rx-swift デファクトスタンダードなのでは早めに書けるようになっておきたいですね。

##おわりに
色々書いてますが、想像通りにエンジニという仕事は楽しいし、クリエイティブだし、クールでセクシーなイケてる仕事だと思います！（←語彙力） 働くようになってからもその考えは変わりませんでした。あと、文系や経歴なんて関係なく活躍できます。コード書きまくってスーパーエンジニアになりましょう。
![40_それでは、良いエンジニアライフを。.png](https://qiita-image-store.s3.amazonaws.com/0/138735/36f1b979-f093-c5c5-8653-c944310c5500.png)
Python で SQLITE3 の Parameterized query のパラメータを渡す順序

[CodeIQ 「進捗まあまあマーク」問題 闇落ち解答版](https://qiita.com/KAZAMAI_NaruTo/items/9992ad1c6cbf81ab0af9) 作成中に躓いたこと。

さて、python 3.6 で次のコードの最後の実行結果はどうなるでしょう?

```
>>> import sqlite3
>>> conn = sqlite3.connect(':memory:')
>>> strSQL = 'SELECT :1, :2, :1;'
>>> conn.execute(strSQL,(1,2)).fetchall()
[(1, 2, 1)]
>>> strSQL = 'SELECT :2,:1, :2, :1;'
>>> conn.execute(strSQL,(1,2)).fetchall()
```

1. [(2, 1, 2, 1)] になる
2. [(1, 2, 1, 2)] になる

・・・

```
>>> strSQL = 'SELECT :2,:1, :2, :1;'
>>> conn.execute(strSQL,(1,2)).fetchall()
[(1, 2, 1, 2)]
```

正解は 2 でした。

しかし、ドキュメントを当たってみた。
[PEP 249 -- Python Database API Specification v2.0](https://www.python.org/dev/peps/pep-0249/)

```
numeric | Numeric, positional style, e.g. ...WHERE name=:1
```

positional ってところが :1, :2 がパラメータの順序と対応することを期待しているのではないかなと思うがどうなんだろ？

バージョンが上がったら挙動が変わるかもしれない。

なお、postgreSQL に接続する psycopg2 、mysql に接続する mysql-connector-python-rf はどちらもこの numeric paramstyle には対応していませんでいした。
IEでconsole.log()を記載するとエラーになる件とその処方箋

# 聞いてくれよ

先日Webアプリを作っているとき、妙な現象に悩まされていました。
**各種ブラウザのうち、IEでのみ動かない。** 
**原因を調べようと開発者ツールを開くと何故か動く！** 👈❓

# 原因は？

どうやら、IEでは **通常 window.console オブジェクトが生成されない**
ソース上の `console.log()` 行でエラーとなり、処理が中断されてしまう

困ったことに **開発者ツール展開時は window.consoleオブジェクトは生成される** ため
デバッグ時は動くという謎の減少に悩まされるのだ


# 対処法は？

 `console.log()` を削除するか
スクリプト内で console.log() を無効化（無害化）するといい

```javascript
if (typeof(window.console) === "undefined") {
  window.console = {
    log: function(){}, // 何もしない関数 とする
  }
}
```

面倒なら、以下のライブラリを導入してください。

[(github) tmak-tsukamoto/noop-console.js](https://github.com/tmak-tsukamoto/noop-console.js)

とりあえず入れとけ、ってモノにできたと思う
ぜひ導入してね
Ruby技術者認定試験 Silver (2.1): 練習問題（コマンドラインオプション編）

#はじめに
筆者
　　趣味レベルでRubyを使っていたアマチュアプログラマ
この記事の趣旨
　　筆者がRuby技術者認定試験Silver2.1の勉強をする過程で
　　理解が不十分だった内容をクイズ形式で紹介します。
　　　　解答+簡易解説は”▶解答”をクリックで開きます。
参考文献
　　[Rubyリファレンスマニュアル（2.1.0）](https://docs.ruby-lang.org/ja/2.1.0/doc/index.html)

#問題
・次のうち、存在しないコマンドラインオプションはどれ？（一つ選択）
　a.　-a
　b.　-b
　c.　-c
　d.　-d
　e.　-e

<details><summary>解答</summary>
　**-b**：存在しないオプション。
　　-a：オートスプリットモードをONにする（-n, -p と同時に指定）
　　-c：実行せずに文法をチェック。問題なければ"Syntax OK"と出力。
　　-d：デバッグモードでスクリプトを実行（$DEBUGをtrueにする）
　　　　　--debug でも同じ
　　-e：コマンドラインからスクリプトを指定
　　　　　-e 指定時は引数からスクリプトファイル名を取らない
</details>

<br><br>

・次のうち、後ろにディレクトリ名をとれないのはどれ？（一つ選択）
　a.　-C
　b.　-I　 (大文字の i )
　c.　-S
　d.　-x

<details><summary>解答</summary>
 **-S**：環境変数PATHの値を使ってスクリプトを探すように指定。
　　-C directory  ：スクリプト実行前に指定したディレクトリに移動
　　-I directory  ：ファイルをロードするパスを指定（追加）
　　-x [directory]：メッセージ中のスクリプトを取り出して実行。
　　　　　　　　　ディレクトリ名を指定すると
　　　　　　　　　スクリプト実行前に指定したディレクトリに移動
</details>

<br><br>

・次のうち、存在しないコマンドラインオプションはどれ？（一つ選択）
　a.　--copyright
　b.　--disable
　c.　--encoding
　d.　--help
　e.　--verbose
　f.　--version

<details><summary>解答</summary>
 **--disable**：--enable, --disable は 2.2 から
　　--copyright：著作権を表示
　　--encoding ：デフォルトの外部エンコーディングと内部エンコーディングを
　　　　　　　　　ex[:in]　で指定（-E ex[:in]でも可）
　　--help　　：コマンドラインオプションの概要を表示（-h でも可）
　　--verbose　：冗長モード。組み込み変数 $VERBOSE をtrueにセット
　　--version　：Rubyのバージョンを表示
　　　　-v について
　　　　　　-v のみが指定されたときはバージョンを表示して実行を終了。
　　　　　　-v 以外にも引数がある場合はバージョンを表示し、冗長モードになる。
　　　　-w はバージョンを表示せずに冗長モードになる。
</details>

<br><br>

・次のうち、グローバル変数に関係しないものはどれ？（一つ選択）
　a.　-0数字
　b.　-Fregexp
　c.　-l
　d.　-n
　e.　-p

<details><summary>解答</summary>
　　**-n**　　　：プログラム全体が　while gets; ...;end　で囲まれているように動作する。
　　　　　　　　グローバル変数には関係しない
　　-0数字　：入力レコードセパレータ(\$/)を8進数で指定
　　-Fregexp：入力フィールドセパレータ(\$;)に regexp をセット
　　-l　　　：行末の自動処理を行う。
　　　　　　　　\$\ を \$/ と同じ値に設定、printでの出力時に改行を付加する。
　　　　　　　　-n フラグまたは-pフラグが指定されていると
　　　　　　　　gets で読み込まれた各行の最後に対して String#chop!を行う。
　　-p　　　：-nフラグとほぼ同じだが、各ループの最後に変数 $_ の値を出力する。
</details>

<br><br>

・次のうち、オプション単体でしか動作しないものはどれ？（一つ選択）
　a.　-i
　b.　-r
　c.　-s
　d.　-T
　e.　-W
　f.　-y


<details><summary>解答</summary>
 **-y**：コンパイラデバッグモード（ --yydebug でも可）
　　-i[extension]：引数で指定されたファイルの内容を置き換える(in-place edit)
　　　　　　　　　　extensionを指定すると元のファイルを拡張子をつけた形で保存
　　-r feature　：feature で指定されるライブラリを Kernel.#requireする。
　　-s　　　　　：スクリプト名の後ろにおいた `-'で始まる引数を解釈し、
　　　　　　　　　　同名のグローバル変数に値を設定
　　-T[level]　　：不純度チェックを行う。levelは安全度レベルの指定
　　-W[level]　　：冗長モードを三段階のレベルで指定
</details>


#あとがき
しんどかった(›´ω`‹ ) ｹﾞｯｿﾘ
コマンドラインオプションはほとんど使ってこなかったため、
「どれも理解が不十分だから、いっそのこと問題で全部登場させてみるか」
と思ったのが運の尽きでした。
しかも苦労した割に完成度は低いという…問題を作るのって難しいんだなぁ。
OctoberCMSでLaravel Duskをもっと簡単に使うプラグイン

先日「[OctoberCMSでLaravel Dusk + Seleniumを使ってE2Eテストをする](https://qiita.com/pikanji/items/9b82f772e06ac285f806)」に書いた内容をできるだけ自動化するために、Duskを利用するためのOctoberCMSのプラグインを作った。

[pikanji/oc-dusktests-plugin](https://github.com/pikanji/oc-dusktests-plugin)（[日本語のREADMEはこちら](https://github.com/pikanji/oc-dusktests-plugin/blob/master/README_ja.md)）

インストール・使用方法はREADMEに書いてある。
LiveDiagツールで簡単画面遷移図作成

# LiveDiagツールで簡単画面遷移図作成

テキストで画面遷移図を作成したくて、色々ツールを探してました。
そして、ついに見つけました。
LiveDiagです。
http://dataich.github.io/LiveDiag/

## インストール in mac
1.コンソールでblockdiagをインストール
```
brew install freetype
sudo easy_install blockdiag
```

2.以下のファイルをDL
https://github.com/dataich/LiveDiag/releases/download/1.2.0/LiveDiag.app.zip

3.LiveDiagを起動しPathを設定
Pathはアプリを起動し最初に聞かれるので以下を設定
```
/usr/local/bin/blockdiag
```

## 使い方
1.LiveDiagを起動し左側にテキストで画面遷移図を書く。
-画面定義
　画面名の変数 [label = 画面名]  
-画面遷移
　画面遷移を->で指定

```
blockdiag {
  top [label = TOP画面];
  help [label = HELP画面];
  list [label = 一覧画面];
  detail [label = 詳細画面];
  top -> list -> detail;
  top -> help;
}

```

2.図が表示されれているところで右クリックをし、Download Imageで画像をDLする。

参考作成画面
![LiveDiag.png](https://qiita-image-store.s3.amazonaws.com/0/25382/907957ac-b430-3820-4a76-7a8ca4f4b5d5.png)
【Go】Ginのvalidationが失敗時に400を返すって言って聞かないので、抜け道を探した話

# Ginのvalidationが400を返すって言って聞かないので、抜け道を探した話
とタイトルを書いていますが、公式の[README](https://github.com/gin-gonic/gin)にやり方がコミットに追加されていたので、それについて少し書きます。10月23日のことです。

当時はそのチュートリアルがなかったので、自力で探しました。あと2ヶ月早く書いて欲しかった(泣)

## Ginのbindについて
Ginにはパラメータを構造体に結びつけるメソッド(bind)が存在します。
**当然、ステータスーコードを自分でハンドリングしたい時ってありますよね！？**

というわけで、チュートリアルを前に見た時はmust bindの説明しかありませんでした。
(must bind は失敗時に必ず400を設定します。)
が、今では以下のような説明が追記されています。

## bindメソッドの種類
### must bind
ステータス400と、text/plain; charset=utf-8をセットする
- Bind
- BindJSON
- BindQuery

### should bind
エラーが帰ってきたとき、それを元に自分でエラーハンドリングを行う
- ShouldBind
- ShouldBindJSON
- ShouldBindQuery

## まとめ
細かくはリファレンスに書いてあるので割愛しますが、
200にして返してあげたい時は、should bindメソッドを使えばOKです。

この情報もっと早く書いておいて欲しかった(2度目)
wrapt を使ってラッパーを書く

wrapt は Graham Dumpleton (mod_wsgi の作者) による、ラッパー記述を補助してくれるライブラリです。

* ドキュメント: https://wrapt.readthedocs.io/
* ソース: https://github.com/GrahamDumpleton/wrapt
* PyPI: https://pypi.python.org/pypi/wrapt

functools.wraps のサンプル
 (https://docs.python.org/3/library/functools.html#functools.wraps) は wrapt を使うと次のように書けます(functools.wraps のように入れ子の関数を書かなくていい)

```pycon
>>> import wrapt
>>> @wrapt.decorator
... def my_decorator(wrapped, instance, args, kwargs):
...     print('Calling decorated function')
...     return wrapped(*args, **kwargs)
...
>>> @my_decorator
... def example():
...     """Docstring"""
...     print('Called example function')
...
>>> example()
Calling decorated function
Called example function
>>> example.__name__
'example'
>>> example.__doc__
'Docstring'
```

ラップ済みかどうかは wrapt.ObjectProxy のインスタンスかどうかで判定できます。

```pycon
>>> isinstance(example, wrapt.ObjectProxy)
True
```

インスタンスメソッドをラップする場合には、引数 instance にインスタンスが渡ってきます。

```pycon
>>> @wrapt.decorator
... def wrap_instance_method(wrapped, instance, args, kwargs):
...     print('method {} of {}'.format(wrapped.__name__, instance))
...     return wrapped(*args, **kwargs)
...
>>> class Example(object):
...     @wrap_instance_method
...     def example(self):
...         """DocString"""
...         print('Called example method')
...
>>> obj = Example()
>>> obj.example()
method example of <__main__.Example object at 0x10cdd53d0>
Called example method
```

ラッパー関数の引数が wrapped, instance, args, kwargs の4つと決まっていて、慣れてしまえばどう書けばいいんだっけと悩むことなしに一定のリズムで書いていけるのがとてもよいと感じています。

wrapt の利用事例としては、Webアプリのパフォーマンス監視サービス Datadog APM を使うためのライブラリ [dd-trace-py](https://github.com/DataDog/dd-trace-py) があります。ここでは計測対象のライブラリにフックを仕込むためにモンキーパッチをあてるのに使われています(私はそれで wrapt を知りました)。 モンキーパッチを補助する機能については
 https://github.com/GrahamDumpleton/wrapt/blob/develop/blog/11-safely-applying-monkey-patches-in-python.md に説明があるので興味のある方は参考にしてください。
Mobiscroll 4 betaを試す。Webコンポーネント標準仕様へ準拠されより使いやすく！

#はじめに
Mobiscrollを新規インストールすると、β版のVersion4がダウンロードされるようになっています。（2017/12/16現在）

[Ionic/Angularを拡張するWebコンポーネントmobiscroll](https://qiita.com/felicidadept/items/58e5d9f440b2878660d8)

V3時代の過去プロジェクトコードをそのままV4で動かしてみようとしたのですが、
エラーが大量にでてしまい、最低限ですが、V4での変更点を確認しました。

#Version4 新規導入の方法

```
npm install -g @mobiscroll/cli
mobiscroll config ionic
```
既にライセンス購入済の場合は、以下のコマンドにて、ライセンス認証が完了するようになっています

```
npm login --registry=https://npm.mobiscroll.com --scope=@mobiscroll
```
上のコマンド投入後、
> Username: 
> Password:
> Email:

を確認してきますので、全てを入力すると認証が完了します。

#Version4ではカスタムタグとしてコンポーネントを利用可能

Version3では、HTML5標準エレメントへの属性として、コンポーネントが動作していましたが、
Version4では、完全なWebコンポーネントとしてカスタムタグ実装になってきています。

```html:home.html#Version3.x
<input mbsc-numpad-decimal [options]="myOptions" [(ngModel)]="birthday">
```

```html:home.html#Version4.x
<mbsc-numpad-time [options]="myOptions" [(ngModel)]="birthday"></mbsc-numpad-time>
```

TS上の記述は変更ありません。

```js:home.ts
import { Component } from '@angular/core';
import { MbscDatetimeOptions } from '@mobiscroll/angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor() {}

  birthday : null;
  myOptions: MbscDatetimeOptions = {
    display: 'center',
    timeFormat:'hh:ii'
  };
}
```

![スクリーンショット 2017-12-16 16.16.01.png](https://qiita-image-store.s3.amazonaws.com/0/34871/d0a4112a-ca90-cfcb-d51c-456b047e4102.png)


[Numpad - Mobiscroll 4 API Documentation - Mobiscroll for Angular](https://docs.mobiscroll.com/angular/numpad)

以下は、日付選択UI。

```html
<mbsc-date [(ngModel)]="birthday" [options]="mbscDateOptions"></mbsc-date>
```

```js
/**
 * MobileScroll Date オプション
 */
mbscDateOptions: MbscDatetimeOptions = {
  display: "center",
  lang: 'ja',
  animate: 'fade',
  dateFormat: 'yy/m/d(D)',
  buttons: [
    'cancel',
    { handler: "set", text: "反映する" }
  ]
};
```

![スクリーンショット 2017-12-16 17.44.12.png](https://qiita-image-store.s3.amazonaws.com/0/34871/944916b6-28e2-487e-4717-4fc505d494b1.png)

[Date &amp; Time - Mobiscroll 4 API Documentation - Mobiscroll for Angular](https://docs.mobiscroll.com/angular/datetime)

便利！
印象に残っている不具合


この記事は[Android Advent Calendar 2017 - Adventar](https://adventar.org/calendars/2257)の16日目です。
知見にならないものもありますが、Android開発を続けてきた中で特に印象が残っているバグについて記録しておこうと思います。本当は10個くらい書きたかったのですが案外よく覚えている不具合というのは少ないもので、今回思い出したのは3つだけでした。

## メインスレッド上でアニメーションを行っている
とあるアプリの起動がとても遅いということで、原因を調べた際に遭遇したものです。開発経験のある方ほど表題の意味が理解できないと思います。
それは確かこのようなコードでした。

```kotlin
var tick = 100 //数字は超適当
while (tick == 20000) {
    view.x = tick.toFloat() / 100
    tick += 1
}
```

こういうものがActivityのonCreate()で実行されていたため、描画前にメインスレッドがブロックされていたのです。他にもツッコミどころはあるのですが、まずAndroidではViewのアニメーションを簡単に実行するする方法がたくさん用意されています。フレームワークのAPIを使えば、安全にライフサイクルに沿った描画を行ってくれます（きっと）。アニメーションに限らず、自力で実装する前には標準APIで同じような機能がないか公式リファレンスを読んでおきましょう。この実装はなかなかにびっくりしたので、未だに印象に残っています。

## Rippleアニメーションが止まる
LollipopからはMaterial Designを取り入れたコンポーネントが増えました。
ほとんどのユーザーにとって、クリッカブル領域のタップを視覚的にフィードバックさせるRippleエフェクトはお馴染みのものでしょう。
あるアプリでそのエフェクトが途中でフリーズしてしまう、という不思議な現象が発生していました。
原因はとあるデバッグ用外部ライブラリのスクリーンショット撮影機能でした。詳細は追っていないのですが描画への割り込みをしていたのでしょうか？
この原因を突き止めた時には、まず問題のプロジェクトでボタンのみのシンプルなActivityを作成し、特定のActivityのみで発生する問題ではないことを確認しました。その後、エフェクトが正常に動作する別プロジェクトを作成し、gradleの設定などを問題プロジェクトのものに近付けていきました。結局特定のライブラリのセットアップを実行するか否かで挙動が変わることがわかったため原因が特定できました。
標準の環境では起きえないけど原因が不明なバグというのはしばしばあるもので、その時には同じように正常なものと不具合が起きる最小構成のものを用意して差分を確認するようにしています。これを説明すると嫌な顔をされることもあるのですが問題の整理もできたりついでに別の問題も発見できたり、何より確実なのでしっかりやっていきたいです。

## TransactionTooLargeException
開発者の方であれば、一度は見たことがあるのではないでしょうか（遭遇したことがないという方は、しっかりガイドラインに沿った設計を心がけていると思います）。MarshmallowからはonSaveInstanceState()で保存可能なデータに上限が設定されるようになったため、何も考えずにデータを保存していると死にます。
当時携わっていたプロジェクトでもこの問題に遭遇しました。該当するActivityの実装はこのようなものでした。

```kotlin
override fun onSaveInstanceState(outState: Bundle?, outPersistentState: PersistableBundle?) {
    outState?.putString("key", "短い文字列")
    super.onSaveInstanceState(outState, outPersistentState)
}
```

おや？文字列しか保存してませんね…。
そう、犯人はFragmentのonSaveInstanceStateです。
Activityでデータを保存していないように見えたとしても、その上で表示されているFragmentで巨大なデータを保存していればこの例外に引っかかってしまいます。例外が発生するのはActivityなのでやっかいです。こういう状況では混乱しますが、落ち着いてフレームワークの実装を読むことでクラッシュの原因がわかると思います。

以上3つだけですが、簡単にまとめました。
みなさま、今年もAndroidと共に良いクリスマスをお過ごしください。
SystemVerilog 2017

#System Verilogの改版
IEEEのページをみると
IEEE Approved Draft Standard for SystemVerilog--Unified Hardware Design, Specification, and Verification Language
STANDARD by IEEE, 03/15/2018
とかいてあります。

DraftがApproveされ、STANDARD by IEEE, 03/15/2018とあるので来年の3月に正式に発行されるということですかね？

今までのIEEE 1800-2012の方は
Superseded by: 1800-2017
となっているので新規格はIEEE 1800-2017となりこちらがActive standardになっています。

SVAの部分はどう変わったのでしょうか？
Vim のエラーメッセージから Vim script を追う

環境は Windows。

そろそろ Python2 とはお別れして Python3 とだけ仲良くしたいので、Python2 のない生活を送っていたところ、Vim から gist を編集できる便利プラグインの [vim-gista](https://github.com/lambdalisue/vim-gista) でエラーが出てしまった。

```
function gista#autocmd#call[14]..<SNR>159_on_BufWriteCmd[13]..gista#command#patch#call[14]..gista#resource#remote#patch[17]..gista#resource#remote#get[19]..159[9]..157[34]..<SNR>137_request[33]..166 の処理中にエラーが検出されました:
行   94:
E887: このコマンドは無効です,ごめんなさい. Python の site モジュールをロードできませんでした.
```

`gista#autocmd#call[14]` は gista#autocmd#call の 14 行目を読めばいいのじゃろ？　くらいはわかるのだけれど末尾とか追うの辛すぎる……と思っていた。

Vimmer の集う [Meguro.vim](https://megurovim.connpass.com/) で質問したところ thinca さんに一瞬で便利情報をいただけた。

エラーメッセージの `157[34]` から `:verbose function {157}` を実行すると、対象の関数がわかる。

```
   function 157(...) abort dict
最後にセットしたスクリプト: ~\_vim\dein\repos\github.com\lambdalisue\vim-gista\autoload\vital\__vim_gista__\Web\API\GitHub.vim
1    if a:0 == 3
2      let settings = a:3$
3      let settings.method = get(settings, 'method', a:1)$
4      let settings.url = get(settings, 'url', a:2)$
5    elseif a:0 == 2$
6      if type(a:2) == type({})$
7        let settings = a:2$
8        let settings.method = get(settings, 'method', 'GET')$
9        let settings.url = get(settings, 'url', a:1)$
10     else$
11       let settings = {}$
12       let settings.method = get(settings, 'method', a:1)$
13       let settings.url = get(settings, 'url', a:2)$
14     endif$
15   else$
16     let settings = a:1$
17   endif$
18   let settings.url = settings.url =~# '^https\?://' ? settings.url : self.get_absolute_url(settings.url)$
21   let settings.headers = extend( s:_get_header(self.get_token()), get(settings, 'headers', {}),)$
25   " Most of API request is json$
26   let settings.headers = extend({ 'Content-Type': 'application/json',}, settings.headers)$
30   " neovim currently does not support 'bindeval'$
31   if has('nvim')$
32     let settings.client = ['curl', 'wget']$
33   endif$
34   return s:HTTP.request(settings)$
   endfunction
```

ファイル名だけなら `:filter 157 scriptnames` で。

```
157: ~\_vim\dein\repos\github.com\lambdalisue\vim-gista\autoload\gista\util.vim
```

便利。

~~んで、結局 [VimからPython 3\.xを使うと落ちることがある · Issue \#610 · vim\-jp/issues](https://github.com/vim-jp/issues/issues/610) と同じ原因で Python2 との付き合いが続くということかな？~~
自分が意図して入れた Python2 以外が悪さをしていそう。
QiiTrendの振り返り

[クソアプリ Advent Calendar 2017](https://qiita.com/advent-calendar/2017/kuso-app2017) 16日目の記事です。

# はじめに

今年作ったQiiTrendというWebサービスについて語ります。
クソアプリとまでは思っていないのですが、ユーザー数を見るととても成功しているとは言えないので。

# QiiTrendとは

2017年３月に公開したWebサービスで、Qiitaの投稿件数を時系列チャートで表示するだけのツールです。
heroku上で動いてます。

[QiiTrend](https://qiitrend.herokuapp.com/)
[ソース](https://github.com/tag1216/qiitrend)

<img width="600" alt="QiiTrend_トップ画面_2017_02_27.png" src="https://qiita-image-store.s3.amazonaws.com/0/35192/09b0c45e-a401-13dd-2388-c1e735bfdae0.png">

<img width="600" alt="QiiTrend_チャート画面_2017_02_27.png" src="https://qiita-image-store.s3.amazonaws.com/0/35192/152358ea-889b-d012-2f9d-1edae879819b.png">

詳細はこちらを参照してください。

- [QiitaトレンドをリニューアルしてQiiTrendを作った - Qiita](https://qiita.com/tag1216/items/e65496b932ca6790268b)
- [QiiTrendを使ったチャートの例 - Qiita](https://qiita.com/tag1216/items/ae2f197b211213410602)

# 作ったきっかけ

「自分が欲しかったものを作った」というのが一番の理由ですが、他にも

- 仕事ではイマドキのフロント開発をやる機会が少なかったのでReactとか触ってみたかった
- 仕事では開発が中心でサービスを公開・運用することがなかったので、一度自分でやってみたかった

というのもあります。

# 苦労したところ

ユーザーからの1アクセスでバックエンドからQiitaへ大量のリクエストが発生する事になるので、Qiitaに負荷をかけないような仕組みを考えるのに苦労しました。

他にはデプロイ周りですね。
当初はフロントとバックエンドを別プロジェクトとしていたのですが、これではherokuにデプロイできない事に気づき、作り直したというのがありました。

# アップデート

公開以降ほぼやってません。

# ユーザー数

<img width="600" src="https://qiita-image-store.s3.amazonaws.com/0/35192/3c4ff5ef-cf86-baa6-b67e-631be37050e2.png">

3月は400人近いユーザーがいましたが、それ以降は30〜50程度で推移しています。

毎日使うようなアプリとは違うので仕方がないのですが、もうちょっと使ってもらえるかと思ってましたが残念な結果です。

# 最後に

みなさん、[QiiTrend](https://qiitrend.herokuapp.com/) を使ってください。
よく使うからメモするHTMLのヘッダーテンプレ

# 概要

超絶自分用メモ

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Template</title>

    <!-- Bootstrap core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
    
 </head>
  <body>


    <h1>Hello, world!</h1>

    
  </body>
</html>



```
UI > メッセージ は全角で入力して下さい。> 全角の"（”と"）"と"．"はダメ、の意味 | Python3: 半角チェック

とある宅急便の問合せページでメッセージを書いて送信しようとした。

> メッセージ は全角で入力して下さい。

全ての文字を「全角」にしたが、エラーは消えない。

試しに「全角」の"（”と"）"と"．"を消してみたところ送信できた。

### 不備

1. 特殊記号の全角が使用不可であるならば、その旨を記載すべき
    - 全角の"「"と"」"は問題ない
2. どの文字が全角でないかのエラーメッセージを表示した方が良い
    - そうでないため、「どの文字がエラーなのか」とユーザが探すことになる

## Python3 半角チェック

### v0.1 > .isalnum()使用

参考: [[修正] Python 文字列の英数字判定でハマった](https://qiita.com/fujiy/items/f738aa9d0bb7427e07a4) の @shiracamus さんの[コメント](https://qiita.com/fujiy/items/f738aa9d0bb7427e07a4#comment-50923cff81e8fe409128)

https://ideone.com/zcY78d

```py3
words = '''あいう'1２"３4５６'''

print("半角の文字は以下です")
for elem in words:
    if elem.encode('utf-8').isalnum():
        print(elem)
	
```

```txt:run
半角の文字は以下です
1
4
```

### v0.2 > len()使用

https://ideone.com/jdWN42

```py3
words = '''あいう'1２"３4５６'''

print("半角の文字は以下です")
for elem in words:
    if len(elem.encode('utf-8')) == 1:
        print(elem)

```

```txt:run
半角の文字は以下です
'
1
"
4
```

まだ未対応の半角文字もありそう。

### v0.3 > unicodedata使用

https://stackoverflow.com/questions/23058564/checking-a-character-is-fullwidth-or-halfwidth-in-python

https://ideone.com/7WIXdX (Python 3.5)

```py3
import unicodedata

words = '''あいう'1２"３4５６'''

print("半角の文字は以下です")
for elem in words:
    res = unicodedata.east_asian_width(elem)
    if res == 'Na':
    	print(elem)
    	
print("全文字のeast_asian_width()結果")
for elem in words:
    res = unicodedata.east_asian_width(elem)
    print(elem, res)
    
```

```txt:run
半角の文字は以下です
'
1
"
4
全文字のeast_asian_width()結果
あ W
い W
う W
' Na
1 Na
２ F
" Na
３ F
4 Na
５ F
６ F
```
CakePHP3 日付のフォーマットで平成表示


```php
$t = new \Cake\I18n\Time('2017-12-25 19:13');
echo $t->i18nFormat('平成y年MM月dd日(E) ah時m分', 'Asia/Tokyo', 'ja@calendar=japanese');
// 平成29年12月25日(月) 午後7時13分
```

次の元号どうすんだろ :sweat: 


## 追記

### 平成

```php
$t = new \Cake\I18n\Time('1989-1-8');
echo $t->i18nFormat('平成y年MM月dd日(E)', 'Asia/Tokyo', 'ja@calendar=japanese');
// 平成1年01月08日(日)
```

### 昭和

```php
$t = new \Cake\I18n\Time('1989-1-7');
echo $t->i18nFormat('昭和y年MM月dd日(E)', 'Asia/Tokyo', 'ja@calendar=japanese');
// 昭和64年01月07日(土)

$t = new \Cake\I18n\Time('1926-12-25');
echo $t->i18nFormat('昭和y年MM月dd日(E)', 'Asia/Tokyo', 'ja@calendar=japanese');
// 昭和1年12月25日(土)
```
### 大正

```php
$t = new \Cake\I18n\Time('1926-12-24');
echo $t->i18nFormat('大正y年MM月dd日(E)', 'Asia/Tokyo', 'ja@calendar=japanese');
// 大正15年12月24日(金)

$t = new \Cake\I18n\Time('1912-7-30');
echo  $t->i18nFormat('大正y年MM月dd日(E)', 'Asia/Tokyo', 'ja@calendar=japanese');
// 大正1年07月30日(火)
```

### 明治 

1868/9/7 以前は不正確になる...

```php
$t = new \Cake\I18n\Time('1912-7-29');
echo $t->i18nFormat('明治y年MM月dd日(E)', 'Asia/Tokyo', 'ja@calendar=japanese');
// 明治45年07月29日(月)

$t = new \Cake\I18n\Time('1868-9-8');
echo $t->i18nFormat('明治y年MM月dd日(E)', 'Asia/Tokyo', 'ja@calendar=japanese');
// 明治1年09月08日(火)

$t = new \Cake\I18n\Time('1868-9-7');
echo $t->i18nFormat('明治y年MM月dd日(E)', 'Asia/Tokyo', 'ja@calendar=japanese');
// 明治4年09月07日(月)
```

## 参考

* [元号から西暦への変換表](https://ja.wikipedia.org/wiki/%E5%85%83%E5%8F%B7%E3%81%8B%E3%82%89%E8%A5%BF%E6%9A%A6%E3%81%B8%E3%81%AE%E5%A4%89%E6%8F%9B%E8%A1%A8)
* [IntlDateFormatter クラス](http://php.net/manual/ja/class.intldateformatter.php)

## 環境

- CakePHP: 3.5.7
- PHP: 7.1.10 by php-osx.liip.ch
- intl: 1.1.0
- ICU version: 58.1
- ICU Data version: 58.1
【Javascript】プレーンな感じでcssを追加する

##なにができるのか

css指定を、
{backgroundColor:"red"}
な感じでなく
"background-color:red;"
な感じで動的に設定できます。


##いる？
* JSON形式だとダブルクォーテーションとかCamel型とか面倒
* ターゲットが居なくてもスタイル指定できる。
datepickerなど呼び出したときにだけ生まれる要素に対してスタイルを付与する場合、
ファイルでやると動的に変更できないし、無関係の契機でスタイルを変更したくてもその瞬間にはターゲットの要素が存在しない・・・
みたいなときに役立ちます。



##仕組み
styleタグを作ってその中にcssをぺたり
名前をつければ書き換えもできます。


##ソースコード


```javascript:jquery.plaincss.js
;(function($, undefined){
  $.fn.extend({
    plaincss:function(o){

      if (typeof o !== 'object') {
        var _plaincss = o;
        o = {};
        o.plaincss = _plaincss;
      }

      o = o || {};
      var needs = {name:"", plaincss: undefined};

      $.extend(needs, o);

      var doc = "";

      if (typeof o.plaincss === 'function') {
        doc = o.plaincss.toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];
      } else if(typeof o.plaincss === 'string') {
        doc = o.plaincss;
      }

      var name = o.name || "__ncss" +(new Date()).getTime();

      this.find("#"+name).remove();
      if (doc) {
        this.append($("<style />").attr("id", name).html(doc));
      }
    }
  });
})(jQuery);
```

##使い方

```javascript
// あんまり意味ない書き方
$("head").plaincss("div{background:red;}");

// 通常の使い方
var _css = "\
div.red {\
background-color:red;\
}\
div.blue {\
background-color:blue;\
}\
";
$("head").plaincss({name:"hogehoge",plaincss:_css});

// ヒアドキュメント風も対応
$("head").plaincss({
  name:"hogehoge",
  plaincss:function(){/*
    div.red{
      background-color:red;
    }
    div.blue{
      background-color:blue;
    }
  */}
});
```
システム開発における「認知・判断・実行」とは


![soccer_daigo_.jpg](https://qiita-image-store.s3.amazonaws.com/0/224030/2e0d5ca6-5d84-616a-fcba-cf2c33cafc50.jpeg)

この記事は[iRidge Advent Calendar 2017](https://qiita.com/advent-calendar/2017/iridge)の17日目のエントリーです。



アイリッジではプロジェクトマネジメントを生業としています。
趣味はサッカー（観る/やる）です。
子供（１０歳/小学校４年生）が少年サッカーをやっていることもあり、たまにサッカーの育成に関する書籍や記事読むのですが、最近目についた「認知・判断・実行」について書いてみます。



# 「認知・判断・実行」
サッカーでは「認知・判断・実行」という言葉があります。

プレー１つひとつの局面で「認知・判断・実行」があり、「止める・蹴る・運ぶ」という個人のスキル（テクニック）とは別次元で重要な要素と言われています。

スキルが高い（ボールの扱いが上手い）だけではダメで、正しい状況判断がなければ有効なプレーにはならないよ、ということですね。
例えば、ドリブルが超絶上手いプレーヤーでも相手が密集した地帯に突っ込んでいってもボールを取られるだけで、逆にカウンターをくらいピンチを招くかもしれません。
個人スキルが高くてもチームを勝利に導くプレーをしているとは言い難いです。

この「認知・判断・実行」はサッカーでは重要な概念とされ、最近では育成年代（少年サッカー）でこの能力をいかに身に着けることができるのか、が活発に議論されています。

# 本エントリーのテーマ
私はサッカー選手でも指導者でもないので、本エントリーでは
**システム開発での「認知・判断・実行」**
とはどういうことなのかを考えてみます。


## 認知
サッカーではプレーの局面で状況を把握できるか、という文脈になります。
例えば敵と味方の位置、スコア、時間帯、自分の能力（テクニック/フィジカル）などが認知の要素でしょうか。
システム開発での**認知**と言うと、**開発プロジェクト自体の情報**と**リアルタイムでのプロジェクト状況**というように分類できそうです。
#### 開発プロジェクト自体の情報
- システム構成はどのようなものか
- 関連するシステムは何か
- ステークホルダーは誰か
- ステークホルダーがこのシステムに感じている価値は何か
- チーム、組織はどのように振る舞うべきか（サービスレベルや契約による制約がどのようなものか）

#### リアルタイムでのプロジェクト状況
- 開発の状況（工程、進捗）
- プロジェクトの今後の雲行きはどうか
- 周り（チームメンバー）の状況はどうか


## 判断  
認知できている状況から選択肢をいくつか持つことができ、それをどのように判断するかが重要です。
サッカーではどのようなプレーを選択するのかということになります。
ドリブルをするのかパスをするのか。それともシュートか。左右前後どちらに進むべきか。

システム開発では、

- 設計や実装の方式をどのようにすべきか
- 要件や仕様をどのようにすべきか
- テストはどこまでやるのか

などなど予算と期間が有限なのですべての側面で判断をしていくことになります。
誰も使わない機能を作るべきではないですし、過剰な品質もまたしかり。
バグは決してゼロにはならないのでやろうと思えばテストを無限にすることができます。
（費用対効果を忘れてしまったかのように品質強化を執拗に求めるマネージャーもいますし）

プロジェクトはトレードオフとの闘いです。
判断をするために**認知**ができていることが重要ですね。
サッカーでは認知と判断のことを「個人戦術」と呼んだりします。
刻一刻と状況が変化するサッカーのゲーム中において、常に認知と判断を繰り返し、有効なプレーをし続けられる選手が良い選手です。
システム開発でも認知と判断がしっかりできることが重要ですね。

## 実行
認知と判断が正しければあとは実行するだけですが、実行する際にも考慮すべき要素があるでしょう。
サッカーは足でボール扱うという性質上、ミスのスポーツと言われています。実行にはミスが伴うことが多いため、ミスを少なくする努力とミスした場合のことを考えます。
システム開発ではも同じように、

- 実行に伴うリスクは何か
- そのリスクが顕在化した時のアクションは何か

を考える必要があるでしょう。 システムでもミスはつきものですし。


# まとめ
サッカーでもシステム開発でも同じように状況を理解し、適切な判断をすることが求められます。
いくらテクニック（技術力）が高くとも、認知と判断で拙いようではチームを勝利に十分貢献できないでしょう。

サッカーでは練習やトレーニングマッチ（練習試合）で能力の向上を行いますが、システム開発の現場での**練習**となるのはどういうもなのでしょうか。


そのあたりはチームビルディングや人材育成の話になってくると思うので別の機会に考えたいと思います。
Galaxy で、CWLを試す

# はじめに

(*追記2018/1/18 大幅更新中*)

これは、[CWL Advent Calendar 2017 \- Qiita](https://qiita.com/advent-calendar/2017/cwl) と [Galaxy Advent Calendar 2017 \- Qiita](https://qiita.com/advent-calendar/2017/galaxy) と、２４日目の記事です。

# Galaxy で CWL を使うには

現在、CWLが使える Galaxy は、以下の場所で開発されています。

[common\-workflow\-language/galaxy: Fork of Galaxy \(http://galaxyproject\.org/\) attempting to implement the CWL spec\.](https://github.com/common-workflow-language/galaxy)

CWLのサポートされたGalaxyについてのドキュメントは、この PullRequest のコメント部分をみてください。このPRで開発が続いています。

[Implement a subset of the Common Workflow Language\. by jmchilton · Pull Request \#47 · common\-workflow\-language/galaxy](https://github.com/common-workflow-language/galaxy/pull/47)

Codefest 2018 Winter で、このPRの人に聞いてきました。

# 試す方法

上で紹介した

[Implement a subset of the Common Workflow Language\. by jmchilton · Pull Request \#47 · common\-workflow\-language/galaxy](https://github.com/common-workflow-language/galaxy/pull/47)

によると、以下の手順で起動できます

```
% git clone https://github.com/common-workflow-language/galaxy.git
% cd galaxy
% git checkout cwl-1.0
% GALAXY_RUN_WITH_TEST_TOOLS=1 sh run.sh
```

この方法で、Galaxyが立ち上がります。

## テストについて

conformance test を実行するためのコマンドがいくつかのっています。

これらを実行するとテストのためにあらたに Galaxy インスタンスをたちあげて、それに対してテストをおこないます。

そのため、メモリの小さなマシンで、Galaxyサーバーを立ち上げた状態でテストを実行すると、メモリが少ないことによるエラーがでます。

中の人にきいたところ、テスト自体は、そんなにメモリを食うものはないので、2GBもあれば、テストで問題がおこることはないのではないかということでした。
もし、Galaxyインスタンスも立ち上げてつつ、テストするなら、2GB*2=4GBくらい確保しておけばよいのかなと思います。


# 手っ取り早く実行する方法、Vagrant 編

以下の場所に、Vagrantfile を、おいておきました
CWLツールがパネルに表示されなかったので、されるようにしたバージョンをおいておきます。

#
起動するときに、

TODO: 書いて失った部分を追記する。
TODO: きちんと動くものを作る（どうもいまうまくいっていないが、これは、ブランチをまちがえていたためだとおもわれる）

開発中のレポジトリ
* [manabuishii/vagrant\-galaxy\-development](https://github.com/manabuishii/vagrant-galaxy-development)
Autodesk Stingray追悼小ネタ




[Autodesk Stingrayを活用する１【未完】]
(https://qiita.com/takarabako18/items/de59fd905bb7382a01b0)

Stingrayさんが千の風になってしまったので
上記の投稿に関連した話で、元々余談くらいに書こうと思ってたネタを書きます。



# テトリス作った時の小話

StingrayでカメラをLevel（UnityでいうHierarkey）に置くと初期の設定はこんな感じです

![キャプチャ_2017_12_06_01_05_55_560.png](https://qiita-image-store.s3.amazonaws.com/0/208645/e7028995-3513-eec2-c859-6eb8312def8b.png)


とりあえず現行のバージョンでもGUIで設定できるカメラのプロパティはこれだけ。
こんなに少なくて大丈夫なのかと思うのですがそもそもGUIの使い勝手に見向きもしていないのだろうか…

まあ、それは置いておいてUnityに慣れていたら大体それぞれの設定がをどういうものを指すのかはイメージできると思います。

ProjecttionTypeは透視（Perspective）と投影（Orthographic）の選択可
NearRange、FarRange　はカリングですね。これもまあ
問題はVertical Fov 。まあデフォの数値的にも画角ですよね。.0001が謎ですが
それ自体の認識は正しいです。

このままカメラに自分のテトリス映すとこんな感じになります
（ブロック一個の辺が１カメラは距離100程離してます）

![キャプチャ_2017_12_06_01_47_45_656.png](https://qiita-image-store.s3.amazonaws.com/0/208645/9de2f32d-f882-0f74-17ba-edaec897039a.png)




ふむ・・・ちょっと画角広すぎですよね
試しにVertical Fov　を２０にしてみる


![キャプチャ_2017_12_06_01_50_36_935.png](https://qiita-image-store.s3.amazonaws.com/0/208645/edd77b12-8168-f40d-c7b3-e4c4c6165223.png)


んーどうもほとんど変わってない？どこかで上書きしてるのかな
とりあえず１０を入れてみる

![キャプチャ_2017_12_06_01_58_22_465.png](https://qiita-image-store.s3.amazonaws.com/0/208645/c9f0f77b-0d9a-dfcf-29b9-8e680b504e52.png)



反転した！？そのうえ画角が広がった、だと…
…じゃあ、ということで恐る恐る－１０を入れてみる

![キャプチャ_2017_12_06_02_03_40_670.png](https://qiita-image-store.s3.amazonaws.com/0/208645/50231db7-68cd-b314-b02b-f46c375806ed.png)



元に戻ったが…どういう、ことだ…
当時意味が分からずかなり混乱しました。
とりあえず見て上記の状況を見てどういうことか分かった人いるのかな…？


![キャプチャ_2017_11_20_02_59_20_209.png](https://qiita-image-store.s3.amazonaws.com/0/208645/2d2124ed-fc0e-9bf0-54f4-85fc3aa7e178.png)



結論を言いますとどうもこれ、度数法ではなく弧度法の計算になってるようで
つまりは3.14で180度に相当しているらしいです。
今回のケースだと表示に妥当な数値は0.28（度数法で15度くらい）となりました。
どういうことかなかなか発想が湧いてこず、これを体験した後寝込みました

Stingrayに近い界隈では弧度法の数値で入れるのが普通なのか…？
と疑いましたがそれならなんでデフォで45.0001とか度数法っぽい数値を入れてるんだよ…という話になります。
開発停止が明言されたものを悪くいうのは気が引けますけど、きっとメンテ全然されてなかったんだろうなあ

ちなみに投影ビューに変更しようとしてもUnityのように上記GUIのVerticalFovがSizeに変わったりはしません。
また、残ったVerticalFovを変更しても描画範囲に変更はなく、
Luaのset_orthographic_viewを使わなければいけないらしいく、
ビジュアルスクリプティングにはノードがそもそもなかった

というお話でした
jQuery Mobile グリッドを利用する時の注意点


結果としてたいしたことではないが、結構ハマったので覚え書き。

## Grid を使用する時

Gridを使用する時、`jQuery Mobile`のサイトからそのままコピペすると不具合が生じる。

![スクリーンショット 2017-12-16 15.19.49.png](https://qiita-image-store.s3.amazonaws.com/0/3184/bf84ce92-0b4c-5dc3-e471-aa6142020c30.png "スクリーンショット 2017-12-16 15.19.49.png")

こんな感じです。

![スクリーンショット 2017-12-16 15.27.12.png](https://qiita-image-store.s3.amazonaws.com/0/3184/d18d0e06-9be8-2fa6-6fa4-9de8f9a2e4ad.png "スクリーンショット 2017-12-16 15.27.12.png")


Gridの最後列(一番右の列)ズレるのである。

jQuery Mobileのサイトからそのままコピペしたソースをよく見ると空白が入っている。

![スクリーンショット 2017-12-16 15.24.38.png](https://qiita-image-store.s3.amazonaws.com/0/3184/8791b6ca-0533-993f-dcc1-8fa8867258a5.png "スクリーンショット 2017-12-16 15.24.38.png")

この空白を削除してあげる。

![スクリーンショット 2017-12-16 15.33.04.png](https://qiita-image-store.s3.amazonaws.com/0/3184/6a811205-e15f-fcd6-ff1f-1944ea603521.png "スクリーンショット 2017-12-16 15.33.04.png")

なおった。

![スクリーンショット 2017-12-16 15.34.24.png](https://qiita-image-store.s3.amazonaws.com/0/3184/c0e51000-87c1-6dc0-cfa5-fdb90f75af8d.png "スクリーンショット 2017-12-16 15.34.24.png")


世界中にハマっている人がいることでしょう。
Parcel で VueのSFC（単一ファイルコンポーネント）をビルドしてみる

## これはなに

話題の[📦 Parcel](https://parceljs.org/)でVueの[単一ファイルコンポーネント](https://jp.vuejs.org/v2/guide/single-file-components.html)（SFC; Single File Components）をビルドしてみた記事です。Parcelの基本的な情報は他記事を参照してください。

サンプルコードは [corocn/parcel-vue-sfc-sample](https://github.com/corocn/parcel-vue-sfc-sample) に置きました。

## 環境構築

yarn or npmでサクッと入れちゃいます。

parcel単体では、VueのSFCが使えないので、[parcel-plugin-vue](https://github.com/lc60005457/parcel-plugin-vue)が必要です。

```
yarn add parcel-bundler parcel-plugin-vue vue babel-preset-env
```

# コード

Hello Worldしてみます。
各種ファイルを用意します。全部ルートにべた置きです。
コンポーネントは.vue形式でないと読み込んでくれませんので注意。

```html:index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Sample</title>
</head>
<body>
  <div id="app"></div>
  <script src="./index.js"></script>
</body>
</html>
```

```js:index.js
import Vue from 'vue';
import Hello from './Hello.vue'

const app = new Vue(Hello);
app.$mount('#app');
```

```html:Hello.vue
<template>
  <div>{{greeting}} World!</div>
</template>

<script>
  module.exports = {
    data: function() {
      return {
        greeting: 'Hello'
      }
    },
    mounted: function() {
      console.log('mounted!')
    }
  }
</script>

<style>
  div {
    color: red;
  }
</style>

<style scoped>
  div {
    font-size: 32px;
  }
</style>
```

```json:.babelrc
{
  "presets": ["env"]
}
```

## 実行

```
yarn parcel index.html
```

http://localhost:1234/ で確認しましょう。

![SS.png](https://qiita-image-store.s3.amazonaws.com/0/66417/5b9dd661-5004-c59a-9df3-822bff72046e.png)

scoped cssも効いてますね

![Sample.png](https://qiita-image-store.s3.amazonaws.com/0/66417/9fc0524f-86f3-0f68-aea5-3c8a3a096414.png)


## parcel-plugin-vue

まだ不安定なので、Productionでの使用はオススメできないとのことです。今後に期待。

> Stability: 1 - Experimental This feature is still under active development and subject to non-backwards compatible changes, or even removal, in any future version. Use of the feature is not recommended in production environments.



## 感想

驚くほど簡単に動く。ぱぱっと動かしたい時に便利だなぁ、と思いました。
Velodyne LiDAR の3次元データをPCDファイルに出力 

## はじめに
レーザー測距センサー [Velodyne LiDAR VLP-16](http://velodynelidar.com/vlp-16.html) を使ってみる機会に恵まれたので、3次元点群処理ライブラリ [PCL (Point Cloud Library)](http://pointclouds.org/) で、測距データをリアルタイムに可視化しながら、PCD (Point Cloud Data)ファイルに出力してみました。

## Point Cloud Library with Velodyne LiDAR

まずは Velodyne LiDAR VLP-16 PCL で検索してみると、そのものずばりの記事「[Point Cloud Library with Velodyne LiDAR](http://unanancyowen.com/pcl-with-velodyne/)」が見つかりました。
PCL 1.8.0 に Velodyne LiDAR からデータを入力するための Grabber が追加されているとのことで、
[サンプルプログラム](https://gist.github.com/UnaNancyOwen/9f9459d3c10f7a6325ebebabda9865f7)まで公開してくださっています。ありがたいです。
早速、CMakeLists.txt と main.cpp をフォルダ D:/velodyne/ を作って保存しておきます。

## PCL 1.8.0 のインストール

手元の環境は PCL 1.6.0、Visual Studio 2013 なので、こちらの「[Point Cloud Library 1.8.0 has been released](http://unanancyowen.com/pcl18/)」から [PCL 1.8.0 All-in-one Installer MSVC2013 x64](https://1drv.ms/u/s!ApoY_0Ymu57sg5QmLR0CQS0oZJjtWA) をダウンロード、インストール。

環境変数 PCL_ROOT を変更します。
`PCL_ROOT=C:\Program Files\PCL 1.8.0`

## CMake

[CMake](https://cmake.org/) を起動して [ Configure ] からの [ Generate ]。
![cmake.png](https://qiita-image-store.s3.amazonaws.com/0/23598/1a8f1b7e-2c7b-67a5-d821-6da207bb4b28.png)

これで Visual Studio のソリューションファイルを生成してくれます。
[ Open Project ]で Visual Studio が起動して、ビルド、実行、無事サンプルプログラムが動きました。

## 定期的にPCDファイル出力

PCL では C++ライブラリ [boost](http://www.boost.org/) が多用されているので
boost::timer を利用して定期的にPCDファイルを出力してみます。

```c++
#include <boost/timer.hpp>
```

[main.cpp#L98-L110](https://gist.github.com/UnaNancyOwen/9f9459d3c10f7a6325ebebabda9865f7#file-main-cpp-L98-L110) の while ループの前でタイマー起動。

```c++
 boost::timer t;
```
ループの中でタイマーを定期的にリスタートして、`pcl::io::savePCDFile` で velodyne.pcd ファイルに出力します。

```c++
  if (t.elapsed() >= 5.0) { // 秒
      t.restart();

      pcl::io::savePCDFile("velodyne.pcd", *cloud);
  }
```
## おわりに

PCL付属の pcl_viewer で velodyne.pcd を開いてみると
![pcd.png](https://qiita-image-store.s3.amazonaws.com/0/23598/37b47c7c-435c-2605-7871-eee5b3b9203b.png)
上の方、部屋のドアが開いていて廊下の壁が見えているのが、なんとなく分かると思います。
競馬予測の時に参考にしたもの

# tensorflow 可変長RNNの使い方
dynamic_rnnの扱いを取り扱っている記事が少ないので助かりました。
[tf勉強会(5)](https://www.slideshare.net/tak9029/tf5)

こちらも上記の記事と同様にdynamic_rnnの使い方ですが、
> ポイントは入力をゼロ埋めした上で、tf.nn.dynamic_rnnの引数sequence_lengthにゼロ埋めする前の系列の長さを渡すことです。

この部分の説明がありがたかったです。
[tf.nn.dynamic_rnnでDynamic Recurrent Neural Network](https://qiita.com/p-baleine@github/items/262399318c88f5b069ba)

# 競馬 x 機械学習
aplhaimpactさんの記事ですが、PDFに研究をまとめられています。基本的な方針などは全て参考にさせて頂きました。必見。
[AlphaImpact 理論解説](https://alphaimpact.jp/publications/)

機械学習での競馬予測を詳しく解説されています。必見。
[AlphaImpact 発表文献](https://alphaimpact.jp/theory/)

Rでランダムフォレストを使っての分析を紹介しておられます。netkeibaという競馬サイトから、レースデータをスクレイピングしてきてSQLiteに保存するOSSを公開されておられます。
[競馬の予測をガチでやってみた](http://stockedge.hatenablog.com/entry/2016/01/03/103428)
【メモ】Realm+KotlinでequalToメソッドがコンパイルエラーになる時の対処

メモ書きです。
AndroidStudio3への移行に併せて各種ライブラリを最新版にしたら色々と罠を踏みました

## 環境
||バージョン|
|:--|:--|
|Android Studio|3.0.1|
|Realm|4.3.1|
|kotlin|1.2.10|

## 現象
```test.kt
Realm.where(hoge::class.java).equalTo("field", 0)

```

と普通にequalToを使っているだけなのに、

```
Error:(260, 30) Overload resolution ambiguity:
public open fun notEqualTo(p0: String!, @Nullable p1: Int?): RealmQuery<MaterialMaster!>! defined in io.realm.RealmQuery
```

とか言われる。

## 解決法
```test.kt
Realm.where(hoge::class.java).equalTo("field", 0.toInt())
```
はい。`0`を`0.toInt()`に変えただけです。
えー。Realmの中の人曰く、Kotlinのコンパイラのバグっぽい。

ちなみにnotEqualTo、Byte、Long、Shortでも同様の現象が起きます。
解決方法は一緒です。

### 参考
https://github.com/realm/realm-java/issues/5450
jQuery <textarea/>の罠

#&lt;textarea/&gt;のテキストの取得方法
今までCGI中心に作ってきたため、text()でもテキストを取ることができたので気にしたことはなかったが、&lt;textarea&gt;この中身&lt;/textarea&gt;実はval()で取らなきゃならないらしい。見た目的に$0の中に文章が含まれているのでtext()で取っていたのだが・・・

#jQueryのappend()で作られたTextareaの内容はval()でしか書換え/取得ができなくなる。
以下の画像をじっくりとご覧いただきたい。
jQueryで書き換えられた内容が完全に無視されているのがお分かりいただけるだろうか。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/102207/17db5772-e067-888d-d313-41ac26fd67d4.png)

最初バグかと思って3時間以上悩んだ挙句、あちこちググったらそれっぽい記事を発見し無事解決しました。
こんなの常識じゃんと思った方すみません。でもググってもなかなかヒットしなかったんです；；

参考：[jQueryでtextareaタグの値はtext()ではなくval()を使用する(jwb.jp様)](https://iwb.jp/jquery-textarea-text-val/)

ちなみに影響するブラウザはChrome Firefoxで、IEでは起きませんでした。Edgeは試していません。
要素から特定のクラス名を取得する方法

jqueryで要素から特定のクラス名を取得する方法を残します。

メモ的な感じで。

# まずはattr関数でクラス名の集まりを取得する。

要素からクラス名を取得するには、jqueryのattr関数を使用する。
以下のように。
$(セレクタ).attr('class');

上記の記述では、要素に指定されているクラス名が１つしか指定されていなければ問題ないが、
複数記述されている場合はattr関数で取得できるのは、スペースで区切られたクラス名あつまり。

main none show menu-item

上記のようなクラス名の集まりが文字列で取得できる。

ここから特定のクラス名を取得する必要がある。

#　正規表現で特定のクラス名を抽出する。

特定のクラス名を取得するには、正規表現を使用する。

例えば、menu-itemというクラス名を取得したいとする。

var rep = /menu-item/;

このように正規表現を指定して、stringオブジェクトのmatch関数に渡すことで取得が可能となる。

もし、クラス名が番号で割り振られているようなクラス名でも正規表現で取得することができる。

menu-item-47というような番号で割り振られているクラス名があったとして、以下のように正規表現を指定すれば簡単に取得することができる。

var rep = /menu-item-[0-9]+/;

こんな感じで正規表現を使用すれば、要素に複数のクラスが指定されたとしても簡単に取得することができる。
Stan.jl を動かしてみた

## 概要
- julialang で Stan.jl のサンプルを動かします
- cmdstan導入から
- julia v0.6 を前提にします
- [cmdstan入りdocker image](https://hub.docker.com/r/datarefine/julialang-docker/)
- ubuntu 16.04を前提にします

## cmdstan導入
```bash
make: clang++: Command not found
make: *** [bin/cmdstan/stanc.o] Error 127
```

[cmdstan v2.17.0 以降でclang++が見つからないというエラーが出たとき](http://discourse.mc-stan.org/t/clang-ubuntu-problems/1761/20)

`/path/to/cmdstan/stan/lib/stan_math/make/detect_cc` の１３行目をコメントアウトしました

```bash
mkdir -p /opt/cmdstan
curl -L https://github.com/stan-dev/cmdstan/releases/download/v2.17.0/cmdstan-2.17.0.tar.gz | tar -z -x -C /opt/cmdstan --strip-components=1 -f -
sed -e "13s/^/#/" -i.bak /opt/cmdstan/stan/lib/stan_math/make/detect_cc
cd /opt/cmdstan && make build
export CMDSTAN_HOME="/opt/cmdstan"
```

cmdstan のサンプルを動かしてみる

```bash
cd /opt/cmdstan/
make examples/bernoulli/bernoulli
examples/bernoulli/bernoulli sample data file=examples/bernoulli/bernoulli.data.R
bin/stansummary output.csv
```

## Stan.jl 導入
[Stan.jl の walkthrough](http://goedman.github.io/Stan.jl/latest/WALKTHROUGH.html) を追いかけます

```julia
Pkg.add("Stan.jl")
Pkg.add("Mamba.jl")

using Stan, Mamba

# bernouli の stanmodel を定義します
const bernoullistanmodel = "
data { 
  int<lower=0> N; 
  int<lower=0,upper=1> y[N];
} 
parameters {
  real<lower=0,upper=1> theta;
} 
model {
  theta ~ beta(1,1);
    y ~ bernoulli(theta);
}
"

# Stanmodel() で、stanmodel オブジェクトを作ります
stanmodel = Stanmodel(name="bernoulli", model=bernoullistanmodel);
stanmodel |> display

# input data を定義します
const bernoullidata = Dict("N" => 10, "y" => [0, 1, 0, 1, 0, 0, 0, 0, 0, 1])

# stan() 実行！ ProDir オプションは外しています
rc, sim1 = stan(stanmodel, [bernoullidata],  CmdStanDir=CMDSTAN_HOME)

# rc ( return code )　が成功 (rc==0) であれば、Mamba.jl の describe() 関数を実行
# walkthrough のコードのままでは getindex() の　error がおこる
if rc == 0
  rc, sim1 = stan(stanmodel, [bernoullidata], CmdStanDir=CMDSTAN_HOME)
  println("Subset Sampler Output")
  sim = sim1[1:1000, ["lp__", "theta", "accept_stat__"], :]
  describe(sim)
end

# sim1 の中身を dump してみます
dump(sim1)

# Mamba.jl から Gadfly.jl によるグラフ表示を描画します
println("Brooks, Gelman and Rubin Convergence Diagnostic")
try
  gelmandiag(sim, mpsrf=true, transform=true) |> display
catch e
  #println(e)
  gelmandiag(sim, mpsrf=false, transform=true) |> display
end

# log{T <: Number}(x::AbstractArray{T}) に関する warnning がでます v0.6
# ここを変更かな
# https://github.com/brian-j-smith/Mamba.jl/blob/ec76a8410a92893a53069607c591aef0868c03e6/src/output/chains.jl#L242)

println()

println("Geweke Convergence Diagnostic")
gewekediag(sim) |> display
println()

println("Highest Posterior Density Intervals")
hpd(sim) |> display
println()

println("Cross-Correlations")
cor(sim) |> display
println()

println("Lag-Autocorrelations")
autocor(sim) |> display
println()

# シミュレーション結果を plot します
p = plot(sim, [:trace, :mean, :density, :autocor], legend=true);
draw(p, ncol=4, filename="summaryplot", fmt=:svg) # svg で出力
draw(p, ncol=4, filename="summaryplot", fmt=:pdf) # pdf で出力
draw(p, ncol=4) # X に描画
cesiumで現在地

#概要
cesiumで現在地取得してみた。

#写真
![image.png](https://qiita-image-store.s3.amazonaws.com/0/18104/be353499-17f7-ae11-3c2e-d996fbfa0b23.png)


#サンプルコード

```
var viewer = new Cesium.Viewer('cesiumContainer');
viewer.canvas.addEventListener('click', function(e){
    var mousePosition = new Cesium.Cartesian2(e.clientX, e.clientY); 
    var ellipsoid = viewer.scene.globe.ellipsoid;
    var cartesian = viewer.camera.pickEllipsoid(mousePosition, ellipsoid);
    if (cartesian) 
    {
        var cartographic = ellipsoid.cartesianToCartographic(cartesian);
        var lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(5);
        var lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(5); 
        alert(lon + ', ' + lat);
    }
    else
    {
        alert('Globe was not picked');
    }	
}, false);
viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(139.60, 35.60, 100000.0),
});


```

#成果物
http://jsdo.it/ohisama1/ye8t

以上。