4月に読んだ本

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

以下、質問力の感想。

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

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

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

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

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

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

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


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

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

3月に読んだ本


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

--


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

--

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

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

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

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

--

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

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


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

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

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

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

--

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

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

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

Nuxt.jsでOGPをSSRする。

バックエンド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やルーティングがいい感じだったり、 特に設定なくファイルの変更でリローディングしてくれたりと気が利く感じはビシバシ感じました、そういうの好きです!

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

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

ウェッブフロントではありがちなスクロールして無限にコンテンツを読み込んでいくアレを作る時にあっというまに実現できたのでメモ。 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内の下部にこんな感じに設置。
この要素の下部にロードするイベントのラインがあるようで、 スライダーだの位置だのとりあえずは気にになくても動くものが書けちゃうのはかなりいいなって思います。

js

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);
                    )}
            }
        },
    });
};

ここでは使っていませんがcompleteでイベントを終わらせたとしても、$InfiniteLoading:resetとすればまた下部のボーダーを超えると読み込みます。 こんな感じでロード終了時の出力を簡単にカスタムできたり、ロード中のくるくるもカスタマイズができます。

ここで使っているAPIのレスポンスがwordpressで作られたHTMLタグ混合のなかなかテキストだったけれど
v-htmlで簡単に表示できて感動したという話はまたいつか。

vue.js 試し書き

シンプルに取得したベーコン画像をバインドする。

spanタグとかで作られた枠内に表示するって時に:style="hogehoge として、 computedで'background-image': `url(${this.image})`を返すのもできた。