2019-05-03

4月に読んだ本

興味の傾向は3月に読んだコーチングの基本にかなり引っ張られてる感じがします。
今月は図書館で平積みされててパッと借りた2冊を読了。
著者が同じこの2冊には共通しているところがあって「考えること」も「知りたいことを話させること（質問力）」もスキルであり、習熟させていくさせていくものという考え方にある。（教育畑の人らしい表現だし、読みすすめていくと納得感がある。
更にもうひとつ共通するポイントがあって一つの考え方に対してそれを複数の座標軸で表現して整理していくのもよくやるし、わかりやすい。これは結構パクりたい。

以下、質問力の感想。

大半を占める過去の対談を引き合いに「この質問はこういう文脈があって成り立っていて高等」とか、 "「同意」「うなずき」で相手に沿う"みたいなテクニック系の話はそれなりの納得感がありつつも退屈。ただ日頃面談をするものとして、

質問力の無さを決定づけるのは勉強不足である。相手に関する情報がなければいい質問はできない

と言われれば身が引き締まる思いして、

現在の文脈に沿い過去の経験世界にも沿う質問相手の思考を整理させていく質問相手の専門性を尊重する質問

あたりは「（ムム、アレンジして使えるかも知れへん）」というような学びもあった。
こっから実践質問力おじさんになる。

考え方の教室 (岩波新書)

作者: 齋藤孝
出版社/メーカー: 岩波書店
発売日: 2015/11/21
メディア: 新書
この商品を含むブログ (1件) を見る

質問力ちくま文庫(さ-28-1)

作者: 斎藤孝
出版社/メーカー: 筑摩書房
発売日: 2006/03/10
メディア: 文庫
購入: 9人クリック: 43回
この商品を含むブログ (86件) を見る

2019-03-31

3月に読んだ本

１分で話せ　世界のトップが絶賛した大事なことだけシンプルに伝える技術

作者: 伊藤羊一
出版社/メーカー: SBクリエイティブ
発売日: 2018/03/14
メディア: Kindle版
この商品を含むブログを見る

他の本立ち読みしている時に結構短い時間で何冊か売れて、どんな本かと思って読んでみた。
短く話すことの重要性の説明は、いにしえから良いとされるメリットが挙がっていて冗長。
後半はそこからの発展で面白かった。
・短くXXする（話すから離れるけどこれが一番興味深かった）
・ロジカルに話を構成する
・プレゼンでの実践的なアドバイス
あたりはイラスト満載でさくさく頭に入ってくる（感覚になる）。
４月から１分で話す！

新版　コーチングの基本　この１冊ですべてわかる

作者: コーチ・エィ
出版社/メーカー: 日本実業出版社
発売日: 2019/01/18
メディア: Kindle版
この商品を含むブログを見る

会社に初版があって週末パラっと見た時に”セルフコーチング”なるワードがあって、内省の質あがりそうやな〜なんて気持ちで新版買って読んでみた。（買った本は積まないですぐよむ不思議
死ぬほど簡単に言う”コーチングとはなんぞ”は、他者の目標への到達をアシストする伴走のようなもの。
とても奥が深く、面白い本だった。
布教したい。コーチングしたいしされたい。

“複雑なタイトルをここに"

作者: ヴァージルアブロー,倉田佳子,ダニエルゴンザレス
出版社/メーカー: アダチプレス
発売日: 2019/03/07
メディア: 単行本
この商品を含むブログを見る

ヴァージル・アブローのハーバード大での公演を書籍化した本。
この人がデザインするNIKEのスニーカーはどれも3倍以上のプレミア価格がつくし、自分自身いつになっても買えなさすぎてフラストレーションが溜まりすぎた結果、なぜこんなに魅力があるのかって興味に昇華されたので、穏やかな気持で読んでみた。
作品にアートを落とし込む前のロジカルな部分や取り組み方も面白いし、デザイナーのルーツについても話してて魅力を知るには十分すぎる本。エートスとアイロニー。
あとNIKEの話いっぱい書いてあって最高、やっぱりNIKEは最高。

アドレナリンジャンキープロジェクトの現在と未来を映す86パターン

作者: トム・デマルコ,ピーター・フルシュカ,ティム・リスター,スティーブ・マクメナミン,ジェームズ・ロバートソン,スザンヌ・ロバートソン,伊豆原弓
出版社/メーカー: 日経BP社
発売日: 2009/10/22
メディア: 単行本
購入: 10人クリック: 156回
この商品を含むブログ (46件) を見る

昨今のエンジニア界隈のEMムーブメントにのっかっておすすめされてたので読んでみた。ソフトウェアの現場において、人に着目したエピソード集。というか失敗談集。プロジェクトの”あるある”を面白く切り取った短編集だった。失敗談は割と出尽くしてる感があってどれもなんか聞いたことあるような話。＋でも面白い物もあった。

アイコンタクト：
「フルタイムの熱心なプロジェクトメンバーが1か所に集まると、ある種の奇跡が起こる。ほかのメンバーのニーズや能力を理解するようになり、それにともない、チームの力を最大限生かせるように自分自身のやり方を修正していくのだ。」

かかし：
「クライアントは、実物を見るまで、そして「これは違う」と思うまで、自分が何が欲しいのかわからない。」

現職では”フルリモートは今は違うよね”ってしているんだけどそれはアイコンタクトにかかれていることを期待しているのだろうな、と言語化できて腹落ちした。

色々インプットしたけれどコーチング入門が今読めたことは大きい。誰かに対するメンタリング、コーチング、教育やオンボーディングのサポートはどれも"スキル"であると認識した。これまでの経験や成功体験は自分にとってはかけがえのないものだけれど、それが他の人にとってもそでうであるとは限らない。

相手によって違う行動を加速させるスイッチを見つけるために相手をよく知り対応する必要がある。
個々の特性を理解した上で関わらなければ、良かれと思っても行動を阻害することになりかねない。

これは、コーチング三原則のうちの「個別対応」だけれど、もう２つの「双方向」、「継続性」もとても学びがあった。まだまだ深掘りしていく必要があると思っていて、今読んでいる中には教育学的な本が多い。あとは、エラスティックリーダーシップも読んでいる中。

2017-10-23

vee validate まとめ

Vuejs javascript

Qiitaにドロップしました。初投稿です！

qiita.com

2017-09-13

Nuxt.jsでOGPをSSRする。

javascript Vuejs Nuxt.js

バックエンドJavaでフロントがVue.jsのSPAなコンテンツを作っている時に、 APIで取ってきた値でOGPの値をバインドしてもSNSでクロールできず悲しい問題にあたってしまった。 ※こちらの記事でとてもわかりやすく現象がまとめられていた。

cly7796.net

色々な手段がありそうでない中、そもそもSSRすれば確実でしょうなってことで検証がてらトライ。
せっかくVue.jsで構成されているフロントだったので、Nuxt.jsをチョイスしました。

Nuxt.js - ユニバーサル Vue.js アプリケーション

検証環境準備

npm, vue-cli入れる辺りは省略… ※nodeがv6.* 以上でないとnpm run dev でコケるのでnodeのversion要確認。
Running in Node v5.12.0 doesn't work · Issue #1276 · nuxt/nuxt.js · GitHub

公式で用意されているsampleを使ってやります。

$ vue init nuxt/starter nuxxxt
? Project name nuxxxt
? Project description Nuxt.js project
? Author pdo99 pdo@example.jp

   vue-cli · Generated "nuxxxt".

   To get started:
     cd nuxxxt
     npm install # Or yarn
     npm run dev

↑通りやっていきましょう。
起動

$ npm run dev
DONE  Compiled successfully in 6390ms                                                                                                                23:44:28
OPEN  http://localhost:3000

f:id:pdo99:20170913013932p:plain 起動できました。

vue-metaをつかってメタ情報をvueから書き換える

Nuxt.jsではnuxt.config.jsにこのアプリケーション共通の設定が追加できる。とのこと
例を参考にとりあえずtitleは「page名 - site名」か、くらいなのでそこだけ修正。

  head: {
    title: '%s - nuxxxt',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],

ここで予めproperty: 'og:title'みたいなのは特に追加せずとも,vue側で

export default {
  head: {
    title: 'TEST',
    meta: [
      { property: 'og:title', content: 'Home page description' },
      { hid: 'description', name: 'description', content: 'Home page description' }
    ]
  }
}

といきなり突っ込んでみてもちゃんと

<head>
    <meta data-n-head="true" charset="utf-8"/>
    <meta data-n-head="true" name="viewport" content="width=device-width, initial-scale=1"/>
    <meta data-n-head="true" property="og:title" content="Home page description"/>
    <meta data-n-head="true" data-hid="description" name="description" content="Home page description"/>
    <title data-n-head="true">TEST</title>
...

と入れてくれていました。

コレでやるとpages/以下のvueすべてで↑みたいなのやらなきゃいけないので、head用のcomponentsを作って
:metaInfo=hogehogeして呼び出すのがいいかなっておもいました。

まとめ

ローンチ前に知りたかった。

…とは言え、自分含め他のメンバーが学習コストを割いてまで採択するかはなんとも言えない感じです。個人的にはVuejsに慣れてきたこともあってVueVue！フー！って感じで楽しいんですけどね。 SSRは勿論vue-metaやルーティングがいい感じだったり、特に設定なくファイルの変更でリローディングしてくれたりと気が利く感じはビシバシ感じました、そういうの好きです！

まあこんなところです、こちらからは以上です。

2017-08-28

Vue-infinite-loadingがとても便利だった話

Vuejs javascript

ウェッブフロントではありがちなスクロールして無限にコンテンツを読み込んでいくアレを作る時にあっというまに実現できたのでメモ。 ReactjsやろうやろうとしてたらVuejsになっていました（？）

peachscript.github.io

導入

npm install vue-infinite-loading --save

あとはimportしてレッツトライ

import Vue from 'vue'
...
import InfiniteLoading from 'vue-infinite-loading';

動かす

html

<infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">
    <span slot="no-more">
        no more contents dorobow.
    </span>
</infinite-loading>

HTML内の下部にこんな感じに設置。
この要素の下部にロードするイベントのラインがあるようで、スライダーだの位置だのとりあえずは気にになくても動くものが書けちゃうのはかなりいいなって思います。

window.onload = () => {
    vue = createVue();
};

const createVue = () => {
    return new Vue({
        el: '#list-listtt',
        data: {
            contents: [],
        },
        created() {
            //初期表示分はここで
            hogeAPI.GET_CONTENTS_INDEX()
                .then( res => {
                    this.contents = res
                }
        },
        components: {
            //↑でimportしたやつです
            InfiniteLoading,
        },
        methods: {
            //画面下部に行った時の処理はここに。
            onInfinite() {
                hogeAPI.GET_CONTENTS_MORE()
                    .then((res) => {
                        if(res.length > 0) {
                            this.articles.push(...res['posts']);
                            //記事読み込み終了する
                            this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
                        } else { 
                            //記事がなかったらロード自体終了する                          
                            this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                        }
                    })
                    .catch(( err) => {                    
                            this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                            console.log(err);
                    )}
            }
        },
    });
};