しぃぶろぐ。

仕事とか技術関係のこと。

BOTも居ないロンリーSlackのススメ

この記事はmohikanz Advent Calendar 2018 6日目の記事です。

モヒカン本家も総帥自らの一人Slackから始まりました。中にはBOTを飼ったりTwitterを流し込んだり本家みたいにRSSリーダーにしている方もいるそうですが、

私は一切!何も!!していません!!!


完全なるちょっと高機能なメモ帳として使い方をご案内します。

 

仕事のメモ

まずは基本の仕事のメモですね。

作業ログとか作業進捗のメモ(中断前にどこまでやったか)とか、gistするまでもないスニペットとかを、
案件ごとにチャンネル作って垂れ流してます。
何度も参照するようなコマンドとかスニペットは、別途個人キベラとかにまとめています。

 

物欲メモ

とりあえず欲しい!ってなったもののリンクをぺたっとする場所です。
数日後や数週間後に見直しても欲しかったものについては、購入を検討します。

完全なる物欲のはけ口。強いて言うなら、メンテされない欲しい物リスト。

見直すときに画像が展開してくれるので、もういいなってものに関しては再度ページを開く必要もないとこがいいですね。

あとは、自分の需要をよく忘れてしまうので、自分が何を求めていたのかのログにもなってます。

 

趣味メモ

中学から高校、大学にかけての趣味は小説を書くことでした。
最近ぽつぽつとリハビリ中です!

なので、ネタキャラシーンなんでも思いついたら即メモする用のチャンネルを用意してます。
作品またがってのイメージの断片とかもありますね。

さらに形にするときにアウトラインエディタとかを使います。

あと申し訳程度にブログネタチャンネルもあります。一応。

 

メモ

津田り場所や一旦の保存領域(Ctrl+v)も用意してあります。
ここはだーっと書いたりペタペタしたら見返しません。
基本消えるに任せています。

 

日記もしくはチラ裏

基本は今日やったこと思いついたときに残す場所ですが、Twitterにも呟けないような内容はここで叫んで吐き出してたりもします。
翌日居たたまれなくなってログ流します。はい。

 

何で個人Slackなのか

ここまで見てるとEvernoteでいいじゃん、とか、keepでいいじゃん、とか色々あると思うんですが、
個人Slackの良いところはログが消えていくことです。本当に必要な情報なら別のところに移せばよいし、不要な情報はそのまま消えていきます。

自分にとっての要不要の分類にちょうどいいです。

あとはカテゴリごとに時系列のログが見やすいので、次やるべきことに取り掛かりやすいです。

 

ようはカテゴリごとに時系列でログを残して適度にローテーションしてくれるわけです。

なおかつ、スマホからもタブレットからもパソコンからもいつでもどこでもアクセスできるので、メモの取り逃しがありません(すごく大事)。

 

同じことができるツールがあれば他でも良いかもしれません。
(が、使い勝手がかなりいいのでしばらくはこのままだと思う)

 

デメリットがあるとすると、メモした後についついモヒカンズもチェックしてしまってニャオスになるくらいです!

 

BOT飼わなくても個人Slack悪くないよー、という記事でした。

飯テロ写真の美味そうな撮り方

どうも、存在が概念化し飲み会に偏在する素粒子的な何かと言われました。shiranuikです。

今年もアドベントカレンダーの時期がやってまいりました。 その前に書かなきゃいけなかったエントリが多数ある気がしますが、まぁ、転職エントリとかはそのうち書くかもしれません。

この記事はmohikanz #2 Advent Calendar 2018の5日目の記事です。 明日はmohikanz Advent Calendar 2018の6日目の記事を書く予定です。

とりあえず今日は、飯テロ写真の撮り方についてです。 美味しいものを美味しそうに撮るにはポイントがあります。 ポイントを押さえれば、誰でもインスタ映えする飯テロ写真が撮れます。

みんなでレッツ飯テロしましょう。

3行で。

  • 全体をまんべんなく撮ってはいけない
  • シズル感大事
  • 構図は斜めに

全体を撮ってはいけない

飯テロ写真を撮る際には、全体をまんべんなく撮るのは基本NGです。

飯テロ写真は記録写真ではありません。 記録が欲しい場合は別撮りでお願いします。

飯テロ写真の目的は、インターネットの向こう側にいる誰かを悔しがらせることです。 イベント不参加勢にむかって、「こぉーんな美味いもん食べてるんだぜ、いーだろーーー(ドヤァ)」すること です。

そのためには、1にも2にもインパクトです。 インパクトを得るには情報が多くてはいけません。

肉なら焼き目、魚なら切れ目、チーズならとろけたところなど、 対象の魅力が最大限に出ているところを!画面いっぱいに!むしろあふれる勢いで!! どストレートに投げつけるのです!!!

↓サンプル。写真全体的にでかくてすみません。

シズル感は光と影から生まれる

業界用語で言うところのシズル感。

シズル感

英語の擬音語で、肉を焼く時のジュージューいう音のことをシズル(sizzle)と言う。そこから転じて人の感覚を刺激する感じのことを指し、広告やデザインの世界では、瑞々しさというような意味で使われたりする。

シズル感の意味や使い方 Weblio辞書

音が聞こえてくるような臨場感のある、という表現ですね。 こいつを引き出すのに必要なのは、光と影です。

とはいえ我々は物撮りのプロではありませんし、美味しいものは美味しいうちに食べてしまわなければなりません。 飯テロ投稿まで考えると、撮影は一瞬で済ませなければなりません。

ぱっと撮ってそれっぽい光と影を対象に与えるには、真上から撮ってはいけません。 対象の高さが喪失した、奥行きのないのっぺりとした絵になってしまいます。

通常照明は天井に付いているので、下から撮るのも良くないでしょう。 斜め上もしくは横から撮り、できれば対象物の向こう側がぼやけていると良いです。

さらにできれば対象物のつやっとしたところに自然な光が当たるようにし、その美しさを写真におさめられればベストです。

↓サンプル。

構図のバランス

3点目は前出の2つに比べると必須ではありません。努力目標です。

最も美しい黄金比(1:1.618)というものが存在するように、配置にも美しいとされる配置があります。 いくつかパターンもあり、美しさだけでなく楽しさや静かさ、不安を感じるものの配置もあります。

が、美味しいご飯を前にしてそんな計算はしてられません。 酔っ払っていたらなおさら無理です。 判断力が低下している場合でもそこそこおさまりよく撮るには、カメラを斜めにしましょう。

通常、カメラは縦長、お皿は横長です。 カメラを横に構えてもいいのですが、あえて斜めにすることで写真内の対象物の割合アンバランスにすることができます。 端的に言ってしまうと「画面に動きができる」ですね。

また、全体をおさめつつ、手前にピントを合わせて遠くをピンぼけさせるのにも有効です。

↓サンプル。フィルタかけてないです。(前にTwitterかなにかに上げたときはフィルタで色温度を上げた状態で流してた記憶)

対象を斜めにすることで、画面内に斜めの線ができます。もう一箇所なにかあると三角形の構図になり、大変バランスが良いです。 上の写真でいうと、黒いおわんがもうちょっと左にあるともっとバランスがよかったですね。

あとは色バランスの話とかもあるんですが、酔っ払ってる状態では私もそこまで考えていませんので割愛。

まとめ

美味しそうな写真を撮るには、とにかくアップで斜め上もしくは横からカメラを斜めに!

以上です。

今年も残りわずかとなりましたが、みなさま良い飯テロをエンジョイしましょう。

jQueryで時間が止まっている人がwebpackつかってVue.jsの単一コンポーネントを普通のjsにするところまで頑張ってみたよ

タイトルそのままです。

よくわかんないから避けて通ってたんですよね、ビルド。 ちょっともう色々限界を迎えてきたので(主にjavascriptのテスト。ブラウザで全関数通るように動かすとか無理ヤダ)、おばちゃん頑張ってみたよ。

ここ1,2週間、毎日ちょこちょこ進めていました。 今週とうとう.vueファイルのビルドに成功したので記録として残しておきます。 (先に去年から残してる最後の1回書けよ)

(完全に余談なんですが、仮面ライダービルドかっこ悪くないです?なんですかあのシャカシャカって。変身前のぴりぴりした雰囲気台無しじゃないです?しゃかしゃかってー)

環境

Windows10

まずは色々整える

1) Node.jsのインストール

Node.js

2) 適当なフォルダを作成

3) コマンドプロンプトでさっき作ったフォルダに移動

phpstormさんだとProjectで該当フォルダ右クリックしてrun cmd shell すると、そこのフォルダにいる状態でプロンプトがでてくる。もしくはterminalを開くとプロジェクトのルートフォルダで開いてくれる。便利。

4) npm initする

適当にenter押せばOK。おわるとpackage.jsonが生成される

5) webpackをインストールする

npm install webpack --save-dev

素のjsをビルドしてみる

6) コンソールにHelloWorldするだけのjsファイルをつくる

console.log("hello")

7) ディレクトリはこんな感じにして

vueApp
└dist
└src
 └index.js

8) webpack.configはこんな感じにしてみよう

const path = require('path');

module.exports = {
    entry: {
        "index":'./src/index.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    }
};

9) package.jsonはこんな感じ

{
  "name": "vueapps",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js",
  },
  "author": "",
  "devDependencies": {
    "webpack": "^3.10.0"
  },
  "dependencies": {
  }
}

10) 実行したよ!distディレクトリのindex.jsになんか色々書かれてるよ!

ポイントはね、webpackにはフルパスで指定するとこですよ。パス通ってないから……。(ここで数日費やした模様)

vueファイルをビルドしてみる

さあ!ここからが本番ですよー!

さっきは必要無かったファイルを追加で インストールします。

1) npm install --save vue

2) npm install --save-dev vue-loader

3) webpack.configに以下を追加

module: {
        loaders:[
            { test: /\.vue$/, loader: 'vue' },  //ここ気をつけて!!↓の6を読んでね!!!
        ]
    }

4) 大本のjsファイルを用意

import Vue from 'vue'
import test from './component/test.vue'

new Vue({
    el: '#app',
    components: {test},
    template:'<test></test>'
});

5) vueファイルを用意

<template>
    <div>
        <h1>test</h1>
        {{message}}
    </div>
</template>

<script>
    export default {
        name: "test",
        data:function(){
            return {
                message:"Hello Vue!"
            }
        },
    }
</script>

<style scoped>

</style>

6) ビルドだー! と思ったら、怒られました。

Module build failed: TypeError: this._init is not a function

これでまた数日止まりました(一日数十分ずつだからね)。検索しまくってわかったことは

stackoverflow.com

Into Webpack 2 omitting word loader when initializing some loader is not allowed.So you have explicitly define full name of loader including -loader, such as babel-loader, vue-loader, file-loader etc...

つまり、

Webpack2からローダー名の省略は使えなくなったよ。-loader込みの正式名称で書いてね

だってさ。わかってしまえば何だよもうな話……。

↑を修正してビルドしてみると、色々足りないので入れろと言われました。↓参考。

  • "css-loader"
  • "vue-html-loader"
  • "vue-loader"
  • "vue-style-loader"
  • "vue-template-compiler"

再度ビルドしたらexitが0で終了しーたよー!わーい!たーのしー!

最終的にこうなった

//package.json
{
  "name": "vueapps",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },
  "author": "",
  "devDependencies": {
    "css-loader": "^0.28.9",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^14.1.1",
    "vue-style-loader": "^3.1.2",
    "vue-template-compiler": "^2.5.13",
    "webpack": "^3.10.0"
  },
  "dependencies": {
    "vue": "^2.5.13"
  }
}
//webpack.config.js
const path = require('path');

module.exports = {
    entry: {
        "index":'./src/index.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },
    module: {
        loaders:[
            { test: /\.vue$/, loader: 'vue-loader' },
        ]
    },
    resolve: {
        extensions: ['.js', '.vue'],
        modules: [
            "node_modules"
        ],
        alias: {
            // vue.js のビルドを指定する
            vue: 'vue/dist/vue.common.js'
        }
    },
};

さいごに

ふろんとえんどえんじにゃーのみなさんのつらみを垣間見ました……。色々群雄割拠しすぎだわ情報が数ヶ月単位で使えなくなるわなんなのこの世界……。

あとプロダクションビルドしようとするとminifyできないのなんでなん…。いやもうそこはphpstormさんのFile watcherに一旦任せて、おとなしくwebpack4待つけどさ。。。

あと、肝心要の自動テストにたどり着いていないのでこれから頑張ります。

予定とタスクと実績の管理と記録について試行錯誤中

まあ、社会人になってからこっちずっと試行錯誤中なんですが。

しばらくこれでやってみよっかなという形がおぼろげながら固まってきたのでまとめてみます。

三行まとめ

  • 職種が職種なので予定もタスクも管理はぜんぶデジタル

  • todoist + GoogleCalendar + toggl (基本はブラウザ)

  • アナログは別のことに使うよ

今まで

ご多分に漏れずアナログからデジタルまでいろんな方法試してました。

手帳は毎年一冊買いますし、よさそうなサービスがあったら今でもさくっとアカウント作っちゃいます。

そんなこと続けていると、情報が分散→断片化→消失の憂き目に会うんですよね。 もっと言ってしまえば、更新たるくてメンテしなくなりメンテされないから開きもしなくなるという……。

まあ、そんなことを何年も何年も(今現在においても)繰り返しています。

流石に疲れてきたので、仕組みをルール化して少ない頭のリソースを少しでも他に振り分けるぞ!と今年は奮起したわけです。

大まかな説明

メインはブラウザ(Vivaldi)で開いた、todoistとtoggl です。

仕事中は常に開きっぱなし。togglのChrome拡張もいれてます。

todoist と GoogleCalendar の連携も有効にしています。

todoist

ja.todoist.com

オンラインのシンプルなTodoリストです。 仕事のタスクも家のタスクもぜーんぶ一元化してます。しないと意味が無いのでがんばります。

タスクは一元化できれば、モノはなんでも良いと思います。

タスク管理で大事なのは「何でやるか」ではなくて、

  • 個々のタスクの粒度を限界まで下げる
  • 仕事プライベート限らずすべてを一元化する

の2つが何より大事だと思います。(今もってできてないので頑張ってる最中ですけど)

なんでもいい中で今のところこれを使っている理由は、単純な見た目や操作性が気持ちいいからです。 何が気持ちいいかっていうと基本的なことは全部キーボードで終わるんですよ。もうね、こういう仕事してるとね。マウスのために手を離したくないんですよ。

そういう理由なので、他に良いのがあったらそっちに乗り換えるかもしれないです。

GoogleCalendar

これは説明要らないですよね?

今はやっていないですが、主人との予定の共有に大活躍していました。

注:今は家族間の予定管理はTimeTreeにシフトしちゃいました。これはこれで便利。

timetreeapp.com

共有をはずした+GoogleHomeさんを買った の2つが重なったので、もう予定管理にガッツリ使ってしまおうかと思い、todoistとの連携をいれました。

GoogleHomeさんにかならず朝「おはよう」と(天気とニュースのために)声をかけているのですが、そこに予定の読み上げが加わってくれました。嬉しい。

連携するとカレンダーで時間や日付をずらすとtodoistの時間や日付も移動してくれるのでありがたいです。

あとで再度書きますが、単純なリスト(todoist)になっている状態から予定(GoogleCalendar)にすることで、自分のキャパシティとか一日の流れのイメージとかつかみやすいです。

なにより次に何しようを考える余地がなくなるのがよいですよね!!

toggl

Toggl - Free Time Tracking Software

これはまぁ、不要な人には不要だと思います。

togglのchrome拡張を入れると、todoistのタスクにマウスオーバーするとタイマー起動できるようになるんですよ。

それとchrome拡張には簡単ではありますがポモドーロ機能もついているので、作業に集中するために使っています。(じゃないとすぐに生産性を下げる某所に入り浸っちゃいますからね!!!)

あと、個人の仕事のほうの見積もり精度がまだまだ甘いので、戒めのためにも計測しています。。。記録とっていると思えばあっちの作業したりこっちの生産性を下げたりしようと思えないですからね!

一日の流れ

GoogleHomeさんに天気とニュースを聞きつつ、今日の時間が決まっている予定を聞きます(読み上げてくれるのは、時間が決まっている予定を直近3件までなので注意)。

朝の電車内でtodoistを確認し、漏れている予定があれば追加し今日でなくても良い予定があれば別日に移動します。

オフィスに着いて始業時間になる前までの間に、GoogleCalendarで各タスクを適当に営業時間内にぽこぽこ放り込んでいます。 するとtodoistのほうも入れた順番通りにならびます。

仕事中

vivaldi でtodoistとtogglをタイリングして常に開いておきます。 タイリング便利ですよーーー。

こんな感じです↓ f:id:shiranuik:20180120220039j:plain

todoistの今日のタスクを粛々と順番通りにこなしていきます。

※GoogleCalendarは別のソフト(Franz)に表示させています。

帰る前に残りのタスクを明日以降に設定。

明日やる作業を明日の日付にします。

後は明日の朝まですべて忘れてしまいましょう。

今のところの不満

不満があるとすると、togglの拡張機能が拡張機能なので「ブラウザでしか連携できない」点、スマホのウィジェットの更新がラグいので、結局アプリを開かないと行けない点の2点が若干不満といえば不満。

togglなので不要になったら使わなければいいやと思いつつ、現在は基本はブラウザで使って、スマホでタイマーのON/OFFは避ける、移動中などパソコンでタイマーをいじらないときにスマホやスマートウォッチでタイマーを起動・終了させるようにしています。

デジタルにしない部分

デジタルはいろんなことを自動でやったりするには便利なんですが、

いかんせん一瞬で忘れちゃうんですよね。apacheのログのごとくほっとかれるんですよ、自分の中で。

なので忘れちゃいけないことはアナログで記録しようかと考え中。

読んだ本のタイトルとか、買ったものと金額とか、無意識に消費してるとこに意識を向けようかなと。 (手で記録を書くのが面倒で早くも挫折しそうです。うまく生活の一部にできるようにこっちも試行錯誤していきます)

あとはやっぱり手で文字や絵を書いたほうが考えがまとまるので、

思考過程を残したい類のものはノートに、

すぐに忘れていい内容や同僚に説明するときはヌーボードに書いています。

説明するときによく使うの↓

CANSAY nu board ヌーボード A4判 NGA403FN08

CANSAY nu board ヌーボード A4判 NGA403FN08

自分用のメモによく使うの↓

欧文印刷 ノート CANSAY nu board A5 SHOTNOTEタイプ White & Grid Edition シルバー

欧文印刷 ノート CANSAY nu board A5 SHOTNOTEタイプ White & Grid Edition シルバー

あと、これも気になっています。

まとめ

これは今の私の状態にはこれが良さそう、というだけなので来年あたりには変わってそうな気がします。

だって、専業主婦してたころはこんなん運用できなかったもん。パソコンの前に始終張り付きっぱなしだからできるんですよ。 また主婦に戻ったり、デジタル機器が行きと帰りのスマホのみになったりしたら、アナログ手帳に戻るかもしれません。

ちなみに手帳で良いなーと思って使っていたのは↓の手帳

ビジネスと生活を100%楽しめる!  陰山手帳2018(茶)

ビジネスと生活を100%楽しめる! 陰山手帳2018(茶)

時間枠の広いバーティカルが好きです(紙面が白くても罪悪感がない←)

延々と続く試行錯誤ですが楽しんで行きたいと思います(小学生感)。

マウスオーバーしたまま数秒後になんらかの処理をしたい

あけてます。

今年もよろしくお願いいたします。

今月中にはvue.js+d3.jsをまとめたいのですが、できるかどうかは私のやる気にかかっています。

(この時点で無理な気がする……)

マウスオーバーN秒後に処理を発火させたい

まぁ、昔からよくありますよね、こういう実装。

今回の要件は以下。

  • 要素マウスオーバーしたらサーバーと通信してメッセージ持ってきてツールチップとして表示したい。
  • でもマウスオーバーする度に通信してらんない。→からN秒静止したら取ってきて。
  • メッセージはすぐに変わっちゃうから都度取りたい(埋め込んでられない)。
  • Vue.jsね(はーと)
  • 一応タブレットとかスマホとかのタッチデバイスでも出るようにしてね。

問題点

N秒後に発火はいいんだけど、N秒以内にカーソル外れたら処理を中断しないといけない。

とりあえずgoogle先生に聞いてみる。

先生が教えてくれた結果

先生いろんな方法教えてくれたけど、結局使えたのは以下の方法。

// setTimeoutを宣言しておく(例は1秒後)
let sampleTimer = setTImeout(function(){
 // N秒後に処理したい内容
},1000);

//マウスが離れた時に以下の処理
clearTimeout( sampleTimer );

Vue.jsのv-onには mouseover(マウスがのっかったときに発火)と mouseleave(マウスが離れたときに発火)があるので、これでいけそう。

と思ったら。

スコープ違うからmouseleaveのメソッド内でmouseoverで宣言したsetTimeoutをリセットできない(´・ω・`)

そんならグローバルにしてやんよ!

というわけでグローバルで宣言しちゃいました(てへ

知識がない故の苦肉の策なので真似しないほうが多分よいと思います。

// グローバル(Vueの範囲外)で中身空っぽで宣言
var sampleSetTimeout = setTimeout(function(){},1000);

// 親Vueに通信するメソッドを用意(以下全体的にすごい略してるので適宜補ってください)
let vue = new Vue({
    data:{},
    methods:{
         getMessage:function(){
            return new Promise(function(resolve,reject){
                //なんかサーバーと通信してメッセージ持ってくる処理
            });
         },
    },
});

// コンポーネントのメソッドにmouseover時とmouseleave時の処理をそれぞれ用意
Vue.component("sample-component",{
    methods:{
        mouseOn:function(){
            // mouseover時に呼び出されるメソッド。
            // mouseleaveの反応が悪いので、ここでもクリアしちゃう。
            clearTimeout( sampleSetTimeout );
            // なんかいろいろ必要なら処理する
            sampleSetTimeout = setTimeout(function(){
                // ここでN秒後に発火させたい処理
                vue.getMessage()
                    .then(function(message){
                        //メッセージをツールチップで表示させる(略)
                    });
            },1000);
        },
        mouseLeave:function(){
            // mouseleave 時に呼び出されるメソッド
            clearTimeout( sampleSetTimeout );
            sampleSetTimeout = setTimeout(function(){},1000);
            // あと、ツールチップを消す処理
        },
});

ちなみに

マウスオーバーイベントって、タブレットだとロングタップで発火するんですね。知らんかった。。。

趣味の情報を収集する方法

今日の記事はmohikanz Advent Calendar 2017 の三日目です。

昨日はnawadaさんの情報収集についてでした

mohikanzとは、情報収集と雑談が好きなえんじにゃー(を中心としているようなしていないような多分してるんじゃないかなー?な)集団です。

日々、業務時間中に自分自身のみならず日本の生産性を下げる活動をしています(違)

詳しくはinductorさんの一日目の記事をご参考ください。

誰?

文系しすてむえんじにゃーで三児の母をしてます。

会社では社内SEしつつ、自社webシステムの運用保守開発しつつ、顧客のテクニカルサポートやらなんやらもしてます。

それとは別に、個人で開発も請け負ってます。ぎぶみー案件。大小問わずご相談はお気軽に。

趣味は読書を中心に多岐にわたっております。今日は私がどうやって情報収集しているかの話。(2日目と微妙にネタかぶりしてますが気にしないことにしました、まる)

概略

  • 情報が信頼できる人を見つける
  • 文明の利器に頼る
  • アウトプットも大事
  • 金を使えばある意味楽になる
  • 最後に頼るのは自分の足

情報を信頼できる人を見つける

情報過多な現代、人間は良質な情報を得るための最良のフィルターです。欲しい情報をくれる人を積極的にフォローしましょう。

例1:作者さんとか広報用の公式アカウント

本や漫画なら作者さんのSNSアカウントは必須です。新刊情報流してくれたり読み切りの掲載情報流してくれたり、電書化のアナウンスもしてくれる上に、時々落書きまで流してくれます!神!!

中にはSNSやブログをやってない作者さんもいらっしゃいますので、そういう時は編集部アカウントとかが良いかと。好きなバンドも好きなアニメも、今は大概何かしら公式アカを作ってくれるのでフォローしておくと幸せ。

各趣味用のリストを作って見れる時に見てます。

ポイントは、

全部見ようと思わない!!!

情報疲れのもとです。本当に自分に必要な情報だったら(こんだけアンテナはってたら)どこかでまた巡り会えます。 全ての情報に目を通す必要は無いのです。一期一会を大切にしましょう。

例2:自分の好みを把握している親しい人

いつもお世話になっています、と声を大にして言いたい。

家族とか学生時代からの友人とか、社会人になってからの趣味友達とか。もう超貴重。

何かあったら向こうから「これ好きでしょー?」ってpushくるんですよ?!

なんなの、天使なの?

感謝を忘れずに日々を過ごすとともに、自分の好みはオープンにしていきましょう。

例3:好みが似ている人

仕事やらニュースやらでは極力ニュースソースは偏らないようにしていますが、趣味はがんがん偏らせる方向です! 趣味なんだから好きなものだけ得てたいじゃないですか。

好みが似てそうな人はガンガンフォローリストに入れます。

おっかけるうちに合わなくなったら即リストから消します。 そこで悩むことはありません。有用な情報なら他の人からも得られます。

で、そもそもどこで見つけるの?

そこはそれ、芋づる式に……。と言いたいところですが、そもそもそれをメンテナンスしている暇があったらほかの事してたいんですよ。 玉石混交な中から自分にとっての玉だけを選りすぐるとか、面倒だしそこそこ労力かかるし、やってらんねですよ。

なので最近は突っ込むだけ突っ込んでメンテしません。 脊椎反射で追加はするけど削除しません。

強いて言うならTwitterで言えば、「この人玉だな?」と思ったらそれ用のリストに入れなおします。それだけ。

でもまぁ。何もないところから作るならおすすめはコミュニティに参加することです。趣味のコミュニティなら玉の割合も高くなります。

えんじにゃーならおすすめはmohikanzですよ!平日毎日たーのしー!ですよ!

(宣伝終わり)

文明の利器に頼る

前段でも書きましたが、情報化社会も進みに進んで、今や「砂一粒」と呼ばれる時代(参考↓の本)です。

情報を仕入れるにも文明の利器をつかって自動化していきましょう。

TwitterとかのSNSも良いですが、情報が分散してしまいます。なので、発売情報とかは自動で情報が来るようにしてしまいましょう。 私が使っているサービスを紹介します。

ブックフォワード

mohikanzのcomicチャンネルで紹介してもらいました。超便利! 新刊お知らせしてほしいタイトルとか著者さんを登録しておくと、発売前に通知してくれます。また、購入管理とか既読管理もできますし、登録面倒な方向けにamazon連携もしてくれます。

読書が趣味な方にはおすすめ。

mohikan⇒はてブ・Qiita(とかQiitadonとか)

技術情報はmohikan本家でざっと見し、はてブやQiitaで拾い直す形です。飯の種でもあるので、私かなり時間をかけて目grepしてます。 まぁ、ここはちょっと筋がずれるのでサクリとおしまい。

チケットぴあ

舞台見に行くのが好きでして。観劇後のアンケートに住所書いて置くとDM届くようにはなるんですが、それだと劇団単位になっちゃうんですよね。はがき面倒だし、興味ない公演のときもあるしで……。

最近はチケットぴあで好きな役者さんと好きな脚本家を登録しておくとメールで公演情報が届くので、良さそうなのだけチェックしてます。 ファンクラブに入ればいいといえばいいんですけど、面倒だしお金かかるのものなぁというものぐさっぷりです……。

クラウドファンディングサイト

新しもの好きのガジェット好きなので、サイトもメールもまめに見てます。 indigogoとかMakuakeとか見てて本当に楽しい。

昨日もリターンで新しいスマートウォッチが届いたので、早速今日からつけてます。いえーい。たーのしー。

アウトプットも大事

趣味でも好みでもオープンに垂れ流していったほうが絶対に良いですよ。

同好の士は集まるものです。自分でも情報を発信すると、これもいいよ!と教えてくれる人がいます。(というか趣味人なんて布教したくてたまらないんだから、喜んで好みに合いそうなのを選んでくれるに違いない)

これが好き!はおおっぴらにしていくと、より良質なサジェスチョンが得られます。

金を使えばある意味楽になる

ま、これですよね。ファンクラブに入れば向こうから情報をくれるし、Amazonさんがサジェストしてくれるものとか、気になった本やガジェットはかたっぱしから買ってしまえば、感想とか良さとか情報収集する必要もないんですよね。百聞は一見にしかず。現物があればそれで解決。

おかねがなくなりますけどね!!!!

そして積読・積ゲーが貯まる一方で時間までなくなりますけどね!!!!

最後に頼るのは自分の目と手と足

発売日じゃない日にも本屋に行きます。まだ見ぬ良作を、書店員さんがおすすめしてくれているからです! それでみごとにハマった漫画は数知れず……。電子で買おうと思っていたのに我慢できずに紙で買うとかね、実物が目の前にあってまだ未配信とかだとね……。

本に限らず、楽器もパソコンも定期的に実店舗いって目で見たり棚の様子を見たりしてます。新しいのでないかなーとかいう目的もありますが、何よりその界隈の縮図が実店舗にはあります。売れ行き棚構成、全てが情報です。

一番信頼できる情報は自分の目と手と足で得た情報です。

できれば皆さんの得た情報をmohikanzで雑談がてら共有してもらえると幸いです。(念のためもう一回宣伝)

Vue.jsのコンポーネントをライトな範囲で使う

Vue.jsの情報をあさっていると「.vue」拡張子のファイルに行き着くんですよね。

これって公式様のいう「単一ファイルコンポーネント」なんですが、ビルド(ようはコンパイル)が必要なんですよ。

ライトな範囲で使う前提なので、ビルドツールはもちろん使用しません! そのため、今回は単一ファイルコンポーネントは利用できません。

じゃあ、せっかく行き着いた情報は意味がないのかというとそうでもなくて。(ビルドツールを使わないので)単一ファイルコンポーネントは使えませんが、コンポーネント自体は使えるのです。(ということがわかるまで結構四苦八苦しました……)

単一ファイルコンポーネントのソースを同じファイル内に書いてしまえば動きます。

(※注意!!! 本来のコンポーネントの概念には真っ向から逆らっています! 分かる人はちゃんとビルドツールを使ってください! そのほうが色々便利です!!!)

コンポーネントの使い方

公式を見ましょう(←

jp.vuejs.org

あと、こちらの記事が分かりやすかったです。(私はこの内上の2つしか使っていませんが……)

qiita.com

ライトな範囲ででもコンポーネントを使う利点

単一ファイルコンポーネントは再利用という面において非常に便利です。が、単一ファイルじゃないならコンポーネントを使う意味がないのかといわれると、もちろん利点はとってもあります。

  • 同ページ内で同種の要素を使いまわせる。
  • ネストしがちなHTMLをすっきり簡略化。
  • スコープを切り分けることでメインインスタンスを圧縮。

同種の要素を使いまわせる

振る舞いはほぼ同じだけどもとになるデータが違うとき、同じようなタグを二回三回書くのは嫌ですよね?

そういうときのためのコンポーネントです。同じコンポーネントに違うデータを流し込みましょう。

<!-- メインのHTML部分 -->
<body>
<div is="hoge-component"
                     v-for="hoge in hogeAList"
                     :hoge="hoge"
                     class="hogeADiv"
                     >
                </div>
<div is="hoge-component"
                     v-for="hoge in hogeBList"
                     :hoge="hoge"
                     class="hogeBDiv"
                     >
                </div>
</body>
<!-- コンポーネントのテンプレート -->
<script type="text/x-template" id="hoge-component">
    <div @click="hogeClick(hoge)"
         :class="hoge.class"
    >
        {{hoge.name}}
    </div>
</script>

コンポーネントの中身やアクションを書くのは一度で済みます。

HTMLが簡略化

ネストしている部分が外だしされるので、すっきりしてページの構造がわかりやすくなっています。

v-forのおかげで同じタグをコピペで増殖させる必要もありません。

メインインスタンスを圧縮

コンポーネントを使うと、要素に対するふるまい(算出プロパティやメソッド)がメインインスタンスから切り離されます。

親子間のデータのやり取りは明示的に宣言する必要がありますが、その分スコープ内に集中できます。

各要素のオンクリックメソッドで大変なことになったjQueryを見たことがありませんか……? イベント分けのためのクラスが増えすぎて、レイアウト指定用もあいまって10個くらいクラスがついた要素とか……。

ライトな範囲でもコンポーネントを使うと、スパゲッティに多少は歯止めをかけられます。

まとめ

コンポーネントは便利だよ!

詳細は次回、「Vue.js+D3.jsで時間割を表示する」で実感できると思います。