パステルコーダー

フロントエンドエンジニア ゆきしば の日常

v-kansai Vue.js/Nuxt.js meetup #5 に参加しました。

f:id:pastelcoder:20190425233350j:plain

https://vuekansai.connpass.com/event/122664/vuekansai.connpass.com

v-kansai の勉強会に参加してきました! 京都と大阪で交互に勉強会をされているそうです。

登壇10分とLT5分。サクサクいろんな話が聞けて面白かったです。

登壇枠

1. 『CSS設計手法でコンポーネント設計した話』

会場スポンサー枠、岡本さん

コンポーネントを分ける粒度をFLOCSSを参考にしてみたという話。 たしかに分かりやすさあると思いました。

2. 『登壇者にフィードバックしてみよう!』

のこぎり さん

https://pyhu.nkgr.app/events/badb6c63-1194-4993-99f7-10f3d932ccae/pyhu.nkgr.app

登壇者にフィードバックとかまさかりを投げられるサービス(以下PYHU)を作られたという話。 Vue.jsの会にReactアプリを持ってくるという。 会場内のコメントがここに集まると確かに面白いです。

3. 『TypeScriptとテストをはじめた』

ユカイ さん

speakerdeck.com

JavaScript で出来上がっているプロジェクトの TypeScript 化。 文法の変更からとりかかり any でとりあえずコンパイル通す。

ES-Lint から TS-Lint にされたという話に対して、

先ほどのPYHUに「今ならTSLintより@typescript-eslintの方がいいですね。」 というコメントが入ってて、さっそく役立ちました。貼ってあった参考記事↓

https://teppeis.hatenablog.com/entry/2019/02/typescript-eslintteppeis.hatenablog.com

テスト周りの話も共感できました。

4. 『Nuxt.jsとExpressでWebサービスを作ってみた』

dala00 さん

いろんな組み合わせでいろんなサービスを作っておられるとのこと。 両方Node.jsにするとセッション周りの連係がよかったという話でした。

Nuxt.js まわりの話。タグマネージャー用のモジュールとかあるんですね!

https://www.npmjs.com/package/@nuxtjs/google-tag-managerwww.npmjs.com

こんど同僚が Nuxt.js を使うそうなのですぐ共有しました!

5. 『amp-script + Vue.js』

shisama さん

shisama.hatenablog.com

amp-script は、元々 JavaScript が扱えなかった AMP で 任意の JavaScript が使えるようになる AMP コンポーネント JavaScript 1つ 150KiB という制限はあるが使えないか、という話。

本家に vue.js を使ったサンプルがある。

https://github.com/ampproject/amphtml/tree/master/examples/amp-scriptgithub.com

LT枠

1. 『Vue.jsのReactiveの中をのぞいてみた件』

morifuji さん

speakerdeck.com

実装を覗くと寛大な心を持とうという気になる。

2. 『iOS で Vue を書き JAMStack な LT 資料を作った』

nnjyami さん

Online IDE が色々便利そうだが、 iOS 外付けキーボードで方向キーが効かない問題で使えるものが限られる。

CodeSandbox なら使えたが、日本語が打てないという、 コード書くならまだ良いけれど、まさかの LT 資料作りにくい環境。

縦書きのスライドが目を引いていました。

3. 『初心者のVue奮闘記録』

Libra189 さん

なんとも親しみのわく発表。こういうの嬉しいです。

こんな感じの内容でした

面白かったので次々回また京都でやるみたいなので参加しようと思いました! 今日はありがとうございました。

Mac ユーザーにお勧めしたい USキーボード 3選

f:id:pastelcoder:20190313224746j:plain

US キーボードが大好きな Mac ユーザーのみなさんこんにちは。

自宅で使う Macbook は US キーボードをつかっている一方で、
会社では JIS キーボードが支給されていました。

会社では JIS 、家では US としばらく使い分けてきましたがやはり混乱します。
仕事用に Mac 用で US 配列のメカニカルキーボードが欲しい!

でも、ない……。
あんまり選べないんですね Mac 用の US キーボード。

調べたなかで最後まで残った 3 つをご紹介します。

選択肢1. PFU Happy Hacking Keyboard

本当のことをいうと HHKB が好きな人は一瞬で解決します。

でも HHKB だとMac 用である意味はあんまりないかもしれない。。

選択肢2. 東プレ REALFORCE

ただ私には以下の要件がありました。

  • なるべく標準的な配列になっていること
  • テンキーは不要だが、方向キー Del Home End PageUP PageDown があること

Windows用なら選択肢はそこそこあるんですよね。
似た要件を持っていた上司は東プレ REALFORCE にたどり着きました。

REALFORCE は変荷重がいいですね!
キーを入れ替えるアプリケーションを入れて使っているそうです。

選択肢3. Archiss ProgresTouch

しかしできればハードウェアで完結したいっ。
自作キーボードの世界に足を踏み入れる事も頭をよぎりましたが、
いやもっとシンプルに解決したいんです!

さらに時間をかけて探した結果、ありました。

結局 Windows 用じゃないかっ!
ただ、ディップスイッチで左下の Alt と Win (Cmd) を入れ替える事ができます。
つまり Mac 標準の Ctrl, Alt, Cmd の順に並べる事ができるのです。

Windows の刻印が気になる人もいるかもしれませんが、
それさえ気にしなければディップスイッチを切り替え、キーキャップの左右入れ替えで、
Mac 用として使える素敵なキーボードでした。

また Cherry MX スイッチを使用していて、
軸も6種類から自分の好みに合ったものが選べます。

ちなみに Fn + F10~12 で音量コントロールもちゃんと効きます。
スペースバー右側の配列はさすがに合いませんが、
個人的には使わないので問題になりませんでした。

さいごに

元々はただ US キーボードにしたかったので、
本当は Apple の純正を買う選択肢もなくはなかったのですが、
自分に合うスイッチのキーボードを選んだことで指が疲れにくくなりました。

いいキーボードはやっぱりいいですね〜

Synology の NAS で apt-get がなくても Linux の基本的なコマンドを使えるようにする方法

Synology の DS418 という NAS を使っています。
このNASLinux 系の OS で動いているため、
ssh でログインすることで、Linux マシンとして扱う事が可能です。

ただし、あくまで NAS なので最低限のコマンドしか使うことができません。 上位機種(CPU違い)だと Docker が使えたり、 apt-get を使うために Debian Chroot というツールがあったりするのですが、 この機種ではそれも使えないようです。

そこで、パッケージ管理ツールがなくても
使いたいパッケージを地道にインストールしていく方法をご紹介します。

おおよその流れは、

  1. ホームディレクトリに、bin include lib の各ディレクトリを作成する
  2. 作成したディレクトリにpathを通す
  3. 必要なパッケージをダウンロードして dpkg したものを作成したディレクトリに移動

の3段階でインストールが可能です。

順を追って説明していきます。

1. ホームにディレクトリを作成する

NASssh でログインしてホームディレクトリにいる状態からスタートします。

mkdir bin
mkdir include
mkdir lib

2. 作成したディレクトリにpathを通す

.bashrc を vim で開いて(作成して)

vim .bashrc

中身に以下を書き込みます。 ユーザー名 としたところは適宜変更してください。
他に path を通しているところがあれば、適宜変更してください。

export PATH=/var/services/homes/ユーザー名/bin/:$PATH
export LD_LIBRARY_PATH=$LD_LIBRARY_PATH:/var/services/homes/ユーザー名/lib
export C_INCLUDE_PATH=$C_INCLUDE_PATH:/var/services/homes/ユーザー名/include

私は node.js をインストールしていたので1行目が以下のようになっています。

export PATH=/volume1/@appstore/Node.js_v8/usr/local/bin/:/var/services/homes/ユーザー名/bin/:$PATH

:wq で保存して vim を閉じます。

3. 必要なパッケージをダウンロードして dpkg したものを作成したディレクトリに移動

ダウンロードするフォルダを作っておきます。

mkdir packages
cd packages

ubuntsのサイトでインストールするパッケージを検索します。
DS418 は ARMv8 なので arm64 のパッケージを探します。

git をインストールする

以下のURLを目指します。

http://cdn-fastly.deb.debian.org/debian/pool/main/頭文字/

今回は g なので以下のURLです

http://cdn-fastly.deb.debian.org/debian/pool/main/g/

git をクリックします。

出て来たパッケージの中から arm64 が含まれるものを探します。
あまり新しいバージョンだと動かなかったりしました。 動かなかったら、他のバージョンを選ぶとあっさり動くものです。

wget 選んだパッケージのURL
mkdir 展開先
dpkg -x 落としたパッケージ 展開先

ダウンロードして dpkg で展開すると、 usr/ の中に binlib が入っていると思います。
その中身を先ほどホームディレクトリ直下に作ったフォルダにそれぞれコピーします。

これで git が動くように……!なったと思ったらエラーが出てしまいました。

error while loading shared libraries: libpcre.so.3: cannot open shared object file: No such file or directory

ライブラリが足りないようです。
でも、私たちは既にパッケージを見つけてインストールする方法を知っています!

おわりに

Entware-ng という NAS 向けのパッケージ管理ツールがあるそうです。
でも他で使う予定だったパッケージが提供されていない事が分かったので、
自力でなんとかならないかと試してみました。

そもそも linux に詳しくなかったので、
bin include lib などの役割もなんとなく分かって面白かったです。

ホームディレクトリの中なのでわりと安心して試せますが、 くれぐれも自己責任でおねがいいたします。
記事情報の利用により生じたいかなる損害も当方では一切の責任を負いかねます。

Synology の NAS を買って半年経ったのでどういう使い方をしているかをまとめる

f:id:pastelcoder:20190303120155j:plain

半年前に Synology の DS418 という NAS を買いました。
これまで私的なストレージはデスクトップPCを基本に一部だけ OneDrive という程度だったので、デスクトップのHDDにしかないデータはいつ消えてもおかしくない状況でした。複数の HDD を繋いでリムーバブルケースも付けていたデスクトップ機は筐体が大きいため小型ベアボーンで置き換えたい思惑もあり、NAS の導入を決めました。

ディスク構成

導入時はイニシャルコストを下げるために元々あった3TBと4TBを転用し、新規で買った6TB2本をあわせた計19TBで計算上の使用可能領域は13TB。 他のメーカーは知りませんが Synology は独自の RAID 技術で異なる容量の組み合わせでも無駄なく使ってくれます。

その後容量拡張のため3TBを8TBに交換、直後に4TBが壊れて8TBに交換した計28TBで計算上の使用可能領域は20TB(実際の容量は17.4TB)です。 ここまで大きいのは映像データがあるため。とはいえ予定より早く容量アップしたのでしばらく使い切ることはなさそうです。

ディスクは SeagateBarraCuda を使っています。 NAS 向けの IronWolf を使った方が良さそうではあるのですが、回転数が低く発熱が抑えられそうな BarraCuda を選びました。 IronWolf も NAS 向けといえども故障をしないわけではないので、故障による買い換えをふくめても BarraCuda のほうがコストを抑えられるのではないかと判断しました。

映像のストレージ

容量食いの映像データはオンラインストレージだと費用がかかりすぎるのでNASが最適。個人で10TB超のストレージを気軽に使えるのはいい世の中ですね。

NAS導入前はHDDをたくさん買っていて、全部PCに差すわけにはいかないのでリムーバブルケースで差し替えつつ使っていました。複数のメディアに分かれていたデータが1箇所に集まったのと、RAID による冗長化でそれなりの安心が得られたので、本当に良かったです。

またDLNAに対応しているので、テレビで再生することができます。Windows Media PlayerDLNAサーバーにしていたときよりもテレビとの接続性が高く扱いやすくなりました。これは相性にもよるかもしれません。

写真のストレージ

子供の頃から20年撮りためた写真があってほぼ全てを家族の共有領域に入れています。 妻もアップロードができて旅行写真にかぎらず日常のスナップも共有しています。 アップされる先のフォルダは別々ですが、閲覧用のスマホアプリでは混ざって時系列に表示されます。 また別に個人領域のタイムラインがあります。この区別があることで、家族と共有しやすいものになっています。

スマホアプリがオマケじゃなくちゃんと作り込まれているのはいいですね。 画像認識による分類で、人や物を条件に写真を探せるのも使いやすいです。

SDカードの取り込みが便利

NAS の USB ポートに差すだけで自動で吸い出してカードを空にする設定をしています。 SDカードは wifi 接続できるものを使っていますが、転送速度や操作を考えても NAS に差すのが断然早い。 ちなみに RAW データはフォルダをわけてタイムラインに出ないようにしています。 そして写真を入れている全てのフォルダはそれぞれ OneDrive にバックアップしています。

オンラインストレージだと入ってる写真は一緒くたに扱われたりするので、ディレクトリごとに自由に権限や役割を与えようとすると NAS が便利ですね。

スマホの写真も自動バックアップ

スマホの写真はスマホアプリですべて NAS に転送しています。 一旦個人領域に入るので、共有する必要の無いメモ的なものなどを省いてから共有領域に移動するような使い方をしています。

音楽のストレージ

CDから取り込んだ音楽データももちろんNASに入れました。一般的なクラウドサービス同様、スマホアプリでの再生とダウンロードができるので、こちらも使い勝手は悪くないです。

Mac の TimeMachine バックアップ先として

pastelcoder.hateblo.jp

以前のブログエントリでは古い Mac MiniLinux を入れて、TimeMachine が使えるようにしていましたが、せっかくなので NAS を使うようにしました。 SMB での TimeMachine に対応しています。

Linux マシンとして

このNASLinux 系のOSでうごいていいて ssh でログインしたら色々とさわることができます。

上位機種(CPU違い)だと Docker が使えたり、簡単に使えるツールが揃っているのですが、これは基本的なコマンドも満足に使えなかったので使うには工夫がいりました。そういうところも遊びがいがあって面白いです。

pastelcoder.hateblo.jp

スマートホームハブとして

Linux の汎用サーバーとして見ると用途は無限大です。昔買っていた赤外線リモコンを接続して Google Home と繋げました。まだ動作が不安定なので実用とはほど遠いですが楽しいです。

クラウドストレージとの棲み分け

NASに入れなかったものもありました。
文章などの軽いデータは One Drive だけに入っています。

まとめると以下のような棲み分けをしています。
全てのデータがネットワーク上にある使い勝手のよい構成になりました。

NAS OneDrive Desktop MBP Mobile
映像 △★
写真
音楽 △★
文書

凡例 ◎ マスター ○ 全同期 △ 一部同期 ★ ネットワーク利用

まとめ

Synology の NAS は、マニアックな製品にありがちな「我慢して使う」ようなところがなく完成度が高いので、家族も日常的に使ってくれています。 また、実用性もさることながら最高の遊び道具でした!

マイクロインタラクションの話を聞きにいったら、どんなツールが使えるか分かってためになった

CSS Nite in Osaka, vol.49 「UI/UX マイクロインタラクション」CSS Nite in Osaka, vol.49「UI/UX マイクロインタラクション」 に行ってきました。

マイクロインタラクションとは

状態が切り替わるときにちょっとしたアニメーションをかけること。

みたいな説明をされていました。

没入型コンテンツ(ブランドサイトなど)と情報提供型コンテンツではマイクロインタラクションの役割が違って、 前者は「世界観の構築に役立つもの」後者は「UIの理解に役立てるもの」がそれぞれ求められるといった説明もあって良かったです。 サイトの性格を理解したうえで意味のあるアニメーションを実装したいですね。

デザイナー向けのアプリ

Adobeの、と前置きがあって3つのツールが紹介されました。

XDの自動アニメーションは、アートボード間の遷移に使えばサッとうごくプロトタイプが作れます。 ブランドサイトを作ると全体的にアニメーションを入れたりするので、 そういった動きをXDで作って、デザイナからエンジニアに伝えやすくなりそうです。

After Effects は映像制作向けだと思っていたので意外でした。 bodymovin というプラグインjson を書き出して、 Lottie というライブラリでWeb上に実装できます。

airbnb.io

どちらかというと Animate のほうが Web 向きかなとい感じがありますが、 やはり書き出し方法に幅があるので、いろんな用途で使えそうです。

エンジニア向けのライブラリ

svg用の面白いライブラリが紹介されていました。

maxwellito.github.io

線画を用意するだけで、線を書くようなアニメーションを作れるというもの。

ほか、トゥイーン制御するライブラリが沢山出ているので使うべしというようなざっくりとした紹介でした。

greensock.com

animejs.com

createjs.com

まとめ

エンジニア向けには、 主に CSS のテクニックや SVG 、アニメ画像ファイルの話が中心でした。

デザイナー向けにはわりと派手に動くものを作るためのツールが紹介されていたのでギャップがありましたが、 実務ではCSSでちょっとしたものを実装したりするのがやっぱり中心になります。

派手な動きの実装も技術としてしっかり抑えつつ、小さなテクニックを磨いていきたいなぁと思いました。

Mac mini に CentOS を入れて Time Capsule をつくることができたので、余ってる人には良いかもしれない。

経緯

数年間に不要品のMac mini(Core2Duo)を譲り受けて、
HDDを1TBに換装してCentOS6を入れてしばらく使ったあと放置状態。
容量が勿体ないので、MBP用のTimeMachine(バックアップ用NAS)を作る事にしました。
f:id:pastelcoder:20170507004538j:plain

Netatalk をいれるだけ。

ここからは、以下の記事を参考にしています。 jimaoka.hatenablog.jp qiita.com

Time Machine にするには、AFPサーバーを入れる必要があると。
色々見て、Netatalk3.xを入れるのが一般的のよう。

現行バージョンは、参考記事からちょっと新しくなって、3.1.11
http://netatalk.sourceforge.net/wiki/index.php/Netatalk_3.1.11_SRPM_for_Fedora_and_CentOS
古いrpmは既に削除されていましたが、wikiから最新版をたどることができました。

ただ、なにもかんがえずにいじりまくった環境なので、
まず外にping飛ばない名前解決もできないというあたりを1日かかって直した後、
ようやく動いたyumで依存パッケージをインストール

# yum install rpm-build gcc make db4-devel openssl-devel libgcrypt-devel avahi-devel avahi-dnsconfd openslp-server openslp-devel libacl-devel openldap openldap-devel bison cracklib-devel dbus-devel dbus-glib-devel docbook-style-xsl flex libdb-devel libevent-devel libxslt mysql-devel pam-devel quota-devel systemtap-sdt-devel tcp_wrappers-devel libtdb-devel tracker-devel enablerepo=epel

NetatalkSRPMをダウンロード、ビルド、インストール。

# wget http://www003.upp.so-net.ne.jp/hat/files/netatalk-3.1.11-0.1.1.fc27.src.rpm
# rpmbuild --rebuild netatalk-3.1.11-0.1.1.fc27.src.rpm
# yum install ~/rpmbuild/RPMS/x86_64/netatalk-3.1.11-0.1.1.el6.x86_64.rpm

ポートの設定

/etc/sysconfig/iptablesに以下を追加。

-A INPUT -m state --state NEW -m tcp -p tcp --dport 548 -j ACCEPT
-A INPUT -m state --state NEW -m udp -p udp --dport 548 -j ACCEPT
-A INPUT -m state --state NEW -m udp -p udp --dport 5353 -j ACCEPT

Netatalkの設定(afp.conf)

各記事に加えて、ドキュメントを参照。
http://netatalk.sourceforge.net/3.1/htmldocs/afp.conf.5.html

/etc/netatalk/afp.confを変更。

[Global]
log level = defalut:warn
log file = /var/log/netatalk.log
uam list = uams_dhx2.so

[Time Machine]
path = /media/timemachine
time machine = yes
vol size limit = 300000

vol size limit の単位はMiB(220)。
設定値を300000MiBとしたら、Macの設定画面で正しく315GBと認識されました。
MBPのストレージが256GB。
だいたい1.2倍あれば良いという話をみたので、だいたいこのあたりです。

保存先になるpathは、 Macからログインするユーザーの権限で、Time Machine用のディレクトリを作っておきます。
外付けのディスクをマウントしたり、パーティションを触ったり等は今回していません。

そのほか、Time Machine 以外の用途は想定していないので、
[Global]と、Time Machine の個別設定以外は書く必要はないみたい。

起動と自動起動

# service iptables restart
# service avahi-daemon start
# service avahi-dnsconfd start
# service netatalk start
# chkconfig netatalk on
# chkconfig avahi-daemon on
# chkconfig avahi-dnsconfd on

うごいたー!

f:id:pastelcoder:20170507004543p:plain


訂正 2017/05/11

uam list = uams_clrtxt.so uams_dhx.so uams_dhx2.so uams_guesi.so

afp.confを以下に変更しました。macOS Sierra以降でしか使わないので認証方式を限定。

uam list = uams_dhx2.so

2016年に参加した勉強会まとめ。関西フロントエンドUGに参加して多くの学びがありました。

f:id:pastelcoder:20170216215638j:plain

2017年も残り9割ですが、2016年のまとめです。

イベント参加


[JS/CSS] フロントエンド もくもく会 & もしゃもしゃ会 2016.01

2016年は外に出ようと、手近なもくもく会を見つけて参加。 CreateJSを使って何か作ろうとしました。 kfug.connpass.com


[JS/CSS/SVG] Webとアニメーションの様々なありかた

個人的にタイムリーなネタで勉強になりました。 kfug.connpass.com


[HTML/CSS/JavaScript] FRONTEND CONFERENCE 2016

はじめての大きなイベント。
高専生の基調講演に感銘を受けるアラサー。
周囲の意識の高さにちょっとした危機感を覚えました。 kfug.connpass.com


[JS/CSS] フロントエンド もくもく会 & もしゃもしゃ会 2016.03

引き続きCreateJSを勉強。なにも進んでない。 kfug.connpass.com


フロントエンド もくもく会 2016.05

次にもくもく会に参加するときは学習の姿勢を立て直してからにしようと思った。 kfug.connpass.com


フロントエンドの人がWeb APIを語る会

APIって楽しいですよね。いろんな関わりを知れて興味深い会でした。
アウトプットしなきゃなぁと思い、この回からブログ枠で参加しています。 kfug.connpass.com

参加メモ

qiita.com


Webサイトができるまで

これをきっかけに、会社でSketchを導入することになりました。 kfug.connpass.com

参加メモ

qiita.com


関西フロントエンドUG 年忘れLT大会

はじめてのLT。自分がやりたいと思った事が興味持って貰えるのは楽しい。
時間オーバーしたけど、準備と実際の差がどんなものか感覚としてわかった気がする。 kfug.connpass.com

参加メモ

pastelcoder.hateblo.jp


そのほか書いた記事

qiita.com