読者です 読者をやめる 読者になる 読者になる

dackdive's blog

新米webエンジニアによる技術ブログ。JavaScript(React), Salesforce, Python など

follow us in feedly

Inside Frontend #1に参加したメモ

こちらのイベントに行ってきました。 AMA(休憩時間中の質問コーナー)という取り組みが非常に良かったです。 以下、話を聞きながら手元でメモしてた内容。 Web over ServiceWorker by @jxck__ Capability against Native/Low API Installable Performance P…

react-lightning-design-systemをVisualforceで使う

件名の通りですが少しハマりどころがあったのでメモ。 普通に react-lightning-design-system を使おうとすると SVG アイコン使用時に Unsafe attempt to load URL エラーが表示されます。 Unsafe attempt to load URL https://zakiyama-dev-ed.my.salesforc…

webpack2でTree Shaking以外に何ができるようになったのかメモ

メモ。 webpack 2 正式リリース(バージョンは 2.2)だとか Tree Shaking という機能がいいらしい とかは目にしていたけど 結局 v1 -> v2 とメジャーバージョンが上がって Tree Shaking 以外に何が変わったの?というのがよくわからなかったので調べてみた。…

gulpタスクに.envで定義した環境変数を渡すならgulp-envでなくnode-env-fileを使う

はじめに タイトルの通り。 gulp タスクに .env のようなファイルで定義した環境変数を渡したくて、 gulp-env と node-env-file を比較した。 結論としては node-env-file の方が使い勝手が良かった。 それぞれの使い方 node-env-file // gulpfile.js var gu…

[Vim]NeomakeでFlowを実行したときにexit code 64が表示されたときのメモ

vim

Vim の Lint チェックに Neomake を使っていて、実行時に Neomake: flow: completed with exit code 64. と表示されてしまったときのメモ。 Flow のバージョンは 0.37.4。 原因と解決策 https://github.com/neomake/neomake/blob/master/doc/neomake.txt#L31…

react-lightning-design-systemのDatepickerを日本語表記にする

メモ。 react-lightning-design-system の Datepicker の月や曜日の部分を日本語にしたい。 locale のようなプロパティはないが、内部的に Moment.js を使っているので以下のようにして変更できた。 (2017/01/20追記) 普通に moment.locale('ja'); だけで…

SlackのOutgoing WebhookとGoogle Apps ScriptでBotを作ったときにつまずいたところメモ

Bot

Slack の Bot にメンションしたら Outgoing Webhook で GAS のスクリプトを実行するようなものが作りたくて とりあえず連携するところまで作ったんだけど、思ったよりハマったところがあったのでメモ。 基本的な作り方に関しては、こちらの記事の通りに作成…

[Apex]レコードが承認プロセスでロック中かどうか判定する

メモ。 レコードの ID を元に、そのレコードが現在承認プロセスの最中で、かつロックされているかどうか Apex で判定したい。 ここを参考にできた。 apex - Check if a record is in approval process - Salesforce Stack Exchange Approval.isLocked(id) を…

[Salesforce]カスタムオブジェクトのメタデータをCSVに変換する

動機 開発時、特定のカスタムオブジェクトの項目一覧をさっと確認したい。 基本的にメタデータを git 管理しているので、src/objects/MyObj__c.object のようなローカルの XML ファイルをパースして 人が読める形式に加工できれば十分。 Node 界隈のパッケー…

npm run + Tabキーでnpm scriptを補完する

知らなかったのでメモ。 参考:npm run should have autocomplete prompt for available scripts · Issue #8030 · npm/npm # zsh の場合 $ npm completion >> ~/.zshrc ~/.bashrc も可。 $ npm run <TAB> build-storybook storybook test 楽になった。</tab>

Material-UIでrefを使う

メモ。 以下のようなコンポーネントの <input type="text"> 項目を Material-UI の TextField に置き換えようと思ったが ref で参照しているのをそのまま TextField でも使えるのか迷った。 import React, { PropTypes } from 'react'; export default class AddTodoForm extend…

API Blueprintによるドキュメント開発環境【2016年冬】

ここから少しアップデートしたのでメモ。 リポジトリ 特徴 markdown -> html への変換には aglio、ローカルサーバーは --server オプションを使う ローカルで markdown ファイルを html に変換するのに aglio を使うところは以前と同じ。 改めて調べてみると…

React(v15)&ReduxでMaterial-UIを使ってみる

メモです。 基本的な使い方を試してみた。 リポジトリ Redux の basic チュートリアル にそって作った Todo アプリをベースに、Material-UI を適用してみる。 (Material-UI 適用前のコードには base というタグをつけてます) なお、公式 example リポジト…

eslint-config-airbnbのルール内容を確認する

ESLint はあまり深く考えず eslint-config-airbnb を導入していて、そんなに問題はないんだけども たまにこちらが期待したルールが無効になってたり、逆にそんなに守らなくてもいいと思われるルールが有効になってたりして、ふと 「あれ、xxx っていうルール…

[Vim]SyntasticによるESLintチェックが遅いのでNeomakeに乗り換えた

(2017/01/23追記) この後 Flow を導入しようとしたら色々問題が発生したので、Neomake から ALE に乗り換えた。 (追記ここまで) Vim の Syntax Checker として有名なのは Syntastic ですね。 最近は JavaScript を書くことが多いので、この Syntastic を…

Reactでフォームの項目をどう扱うか問題

メモ。 なんの話か React でフォーム項目を簡潔に書く方法がわからない 管理されたコンポーネントで書こうとすると、項目の数だけ state と対応するイベントハンドラが必要になる 親に渡す必要がある、とかだとさらにしんどい // 基本形 class MyFormCmp ext…

npm installしたパッケージの更新確認とアップデート(npm-check-updates)

タイトルの通り。 npm install --save なり --save-dev なりして package.json に書き込まれたパッケージのバージョン、どうやって定期的にアップデートしていけばいいかわからなかったので。 新しいバージョンがリリースされているかどうかの確認と、実際に…

Dreamforce'16 Developer Keynoteのメモ

今年は行けなかったので Dev Keynote だけざっと見ました。 以下、雑多なメモ。 キーワード Lightning Einstein Salesforce DX Lightning Winter'17 以降の新機能についてデモしながら一通り紹介、といった感じ。 (デモは 13:40 頃から) Lightning Data Se…

package.jsonのパッケージバージョンに記載される ^ (キャレット) とは?どうしてつくのか?

$ npm install --save react などのコマンドでパッケージをインストールすると、package.json にはインストールした(その時点での最新)バージョンが記載されますが そのとき "dependencies": { "react": "^15.3.2" } というように、バージョン番号の前に ^…

Hubotに管理画面のような静的ページを追加する

メモ。 ブラウザから /admin にアクセスしたら管理画面みたいなものが開いて Bot の簡単なカスタマイズができる、みたいなことがやりたくて 特定の URL で静的なページを返すようなことができるのか調べてみました。 結論から言うと robot.router が Express…

Slackのチャンネルのメンバーからランダムで一人選ぶBotを作る

タイトルの通り。 GitHub の PR のレビュアーを、開発チームの特定のメンバー数名から一人指名したい 開発チームの一部のメンバーで持ち回りでやらないといけないタスクがあって、毎回誰がやるか決めるのめんどい といったことがあって、せっかくなので bot …

JavaScript(ES2015&React)で画像を扱う:リサイズとプレビュー表示

はじめに web サイト/アプリケーションで画像のアップロード機能などを実装する場合、 最近のスマホのカメラで撮影した画像はサイズが数 MB にも及ぶので、あらかじめクライアント側で送信可能なサイズまで縮小する必要があります。 今回はそのような画像の…

HubotをES2015で書いてHerokuにデプロイする

今さらながら Slack bot を作りたくて、フレームワークは Hubot を選んだ。 Hubot はそのままでは CoffeeScript で書く必要があるんだけど、ES2015 もやっと覚えたばかりなのに CoffeeScript の勉強はしたくない。 ということで、ES2015 で書くための手順を…

Emoji Prefixに学ぶgitのコミットの分け方

git

こちらの記事を読んで。 この記事では、Emoji Prefix というコミットメッセージに関するルールについて紹介している。 どんなルールかというと、「コミットメッセージの先頭には、コミットの内容に合った Emoji をつけましょう」というものらしい。 Prefix …

reveal.jsで外部Markdownファイルを読み込む

いつも忘れるのでメモ。 index.html 内に直接書くのではなく、別途用意した Markdown ファイルをスライドにしたい。 body に以下のように記述する。 <body> <div class="reveal"> <div class="slides"> <section data-markdown="./index.md" data-separator="^\n\n\n" data-separator-vertical="^\n--\n" data-separator-notes="^Note:"> </section> </div> </div> ... </body> こうすれ…

ES2015時代のJavaScriptテストツールまとめ

最近になって JavaScript を勉強中です。 ES2015 と React にもちょっとずつ慣れてきましたが、テストについては Karma とか mocha とか名前は聞くけど何が何なのかよくわかってなかったので、軽く整理してみます。 JavaScript テストツールの大まかなカテゴ…

AsciiDocによる継続的ドキュメント開発〜1.インストールと基本的な使い方

はじめに ドキュメントを書くための言語としておそらく今一番ポピュラーなのは Markdown だと思いますが、 かっちりした仕様書やユーザーマニュアルなど、より本格的なドキュメント作成にはやや機能不足と感じることがあります。 私も以前、ドキュメントを G…

[git]複数のcommitをまとめてcherry-pickする

ちょいメモ。 別ブランチのコミットを他のブランチにも適用するときに便利な cherry-pick コマンドですが、 複数のコミットをまとめて cherry-pick してしまいたい時がたまにあります。 そんなとき $ git cherry-pick [cherry-pick の始点となるコミット]..[…

Summer '16 開発者向けWebセミナー のメモ

Summer '16 開発者向けWebセミナー | Salesforce Developers 割とちゃんと観た。 UI の新機能(Lightning Experience) ホーム画面のカスタマイズ Lightning App Builder で作ったページが(ようやく)LEX とモバイル両方で使用可能 オブジェクトの日付項目…

HTML5とか勉強会 - React最新情報 に行ってきた

行ってきました。

ESLintでReactとES2015の構文チェック(eslint-config-airbnb)

ES2015の構文チェックと言えば ESLint ですね。 ESLint は "The pluggable linting utility" というだけあって、Rules と呼ばれる膨大なチェック項目の中から 自分がチェックしたい項目を取捨選択し、最終的に .eslintrc という設定ファイルを用意する必要が…

webpack-dev-serverの基本的な使い方とポイント

はじめに JavaScript のビルドに webpack を使っている場合、ローカルでの開発には webpack-dev-server を使うと便利です。 通常の webpack コマンドも --watch (または -w)オプションつきで実行することにより ファイルの変更を検知して自動でリビルドを…

VimでESLintをグローバルインストールせずに、Syntastic+ESLintでES2015の構文チェックをする

(2016/10/24追記) しばらく Syntastic を使ってましたが、Neomake というより快適なプラグインが見つかったので今はそちらを使ってます。 (追記ここまで) はじめに vim で ES2015 を書いていると、構文チェックもコーディングと並行して行いたいと感じる…

GCPUG In Tokyo & Osaka #1 に行ってきた

行ってきました。 GCPUG イベント初の、東京 - 大阪を TV 中継で結んだ2拠点同時開催となりました。 会場はサイボウズさん。オフィスがとってもおしゃれ。 GCE で Selenium を動かすというセッションが一番の目当てだったんですが、到着が遅れて最後のセッシ…

webpack.config.jsの読み方、書き方

はじめに webpack を使った JS/CSS のビルドを行う場合、webpack.config.js という設定ファイルを用意してコマンド自体は webpack で済ませることがほとんどだと思いますが 公式チュートリアルでも webpack.config.js については少ししか触れられていなかっ…

GitHubでの開発に便利なツール3選

ツールというか CLI。 全部有名なのでほとんどの方がご存知だと思うが、自分がよく使うものを。 1. hub https://github.com/github/hub git コマンドの機能を拡張したもの。 (参考) インストール Mac の場合は Homebrew から。 $ brew install hub $ which…

ES6とwebpackでReact.jsのチュートリアルをやってみた

タイトルの通り、こちらの公式チュートリアルをES6でやってみました。 また、チュートリアルでは React や Babel などを CDN で読み込んでいるためビルドは不要になってますが、 実際に開発するときは browserify なり webpack なりを使用したビルド環境が必…

AWS未経験だけどJAWS DAYS 2016のIoTハンズオンに参加してきた

JAWS DAYS に初参戦してきました。 これまで、AWS は業務で必要になるまでとりあえずいいか...と避けてたんですが やはりこれだけ周囲が AWS を使っている中、「いやー仕事で使ったことなくて全然知らないんですよ」という訳にもいかないなあと思っていた矢…

VagrantとAnsibleでMacにWindows10仮想環境を構築する

Windows「に」Vagrant を入れて仮想環境を作成したという記事は Web 上にたくさん見つかるけど Vagrant で Windows 環境「を」構築したという記事はあんまり見つからなかったので、メモ。 また、Vagrant や Ansible というインフラ系ツールについてよく耳に…

#html5jplat 勉強会『アプリ怪獣エレクトロンの育てかたと倒しかた』に行ってきた

行ってきました。 Electron アプリの作り方 @yosuke_furukawa さん Electron とはなにか?という非常に基本的な知識や、これから Electron を始める上で有用な資料の紹介など。 特に、Electron の中身の部分(Main プロセスと Renderer プロセスがあって〜と…

Vim & NeoBundleからNeovim & dein.vimに乗り換える

vim

遅ればせながら vim から Neovim へ、プラグイン管理は NeoBundle から dein.vim へ乗り換えてみた。 ほとんどこちらの記事の通りに進めればできました。 neovimが実用段階になったようなのでvimを置き換えてみた話 - 5.1さらうどん NeoVimにしてdein.vim入…

Macで任意のアプリにHotkeyを設定し、表示/非表示を切り替える

mac

普段エディタは iTerm 内で vim を使っているので iTerm に Hotkey を設定し、ブラウザを見てる時にHotkeyでさっとエディタを表示したり非表示に戻したりというのをよくやる。 それを Atom でも実現したかった。 最初、BetterTouchTool を使った方法を紹介し…

ElectronでExpressアプリケーションを動かす

ちょいメモ。こんな感じでいけるっぽい。 元のソースコードは electron-quick-start を使った。 'use strict'; const electron = require('electron'); // Module to control application life. const app = electron.app; // Module to create native brows…

[Salesforce]オブジェクトの「最近使ったXX」ビューに列を追加する

標準またはカスタムオブジェクトのタブを開いたときに最初に表示される、このリストビューについて。 列のカスタマイズとかどこで設定できるのかなと思って調べてみたメモ。 UI からの設定だけでなく、Force.com Migration Tool でデプロイできるようメタデ…

vimでSublime TextのCtrl+Pのようなファイル検索を行う

Sublime Text で Ctrl+P (Mac だと Cmd+P) を押すと表示されるファイル検索。 同じようなことを vim で実現するプラグインないかなと思って探したら ctrlp.vim というのがちゃんとあった。 ※ https://github.com/kien/ctrlp.vim はメンテナンスされてないの…

Mac El CapitanでSVNの日本語ファイル名問題を解決する

Mac で SVN を使っていると直面する、日本語ファイルの扱いがうまくいかない問題について。 2016年2月時点での最新OS である OS X El Capitan (10.11.2) だとちょっと手間取ったのでメモ。 はじめに、日本語ファイル問題についての説明はこちらの記事が詳し…

Django: python-social-authでTwitter認証を実装する

Django アプリケーションにソーシャルログイン機能を実装して、Heroku アプリケーションとして動かしてみる。 例として Twitter によるログインを試してみるが、Python Social Auth は他にも Google や Facebook などの主要な Web サービスでの認証をサポー…

[Python] HerokuからForce.com REST APIを叩く

というサンプルを作りました。 元々、Heroku から Force.com REST API を叩くサンプルは海外の方が Node.js と Java で作ったものがありまして、それをお手本に Python 版を書いてみたという経緯です。 (Node.js) Salesforce REST APIs – From Zero to Cloud…

PythonでHerokuローカル開発してる時にファイル更新を検知して自動的にリロードする

ちょっとしたことだけど、メモ。 $ heroku local web でローカルにサーバーを立ち上げて開発をしている時、 ファイルが更新されたら自動的に起動しているサーバーにも反映されてほしい。 Heroku のコマンドのオプションでやるのかと思ってたが、gunicorn の…

gulpとJSforceで構築するLightning Component開発環境

これまで、Lightning Component 開発は Force.com Migration Tool(Force.com 移行ツール) を使っていましたが 将来的なことを考えると JavaScript のグローバル名前空間の問題 をどうにかしないといけません。 つまり Grunt や gulp などのビルドツールを…