dackdive's blog

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

follow us in feedly

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の基本的な使い方とポイント

はじめに (2017/08/10追記) この記事では webpack-dev-server を独立したサーバーとして使う場合の方法です。 また webpack 1 系の情報になっており少々古いです。 最新の設定についてはこちらの GitHub リポジトリを参考にしてください。 https://github.…

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の読み方、書き方

(2017/08/28追記) この記事は webpack v1 系での config について書かれています。 v2 系以降は一部の項目名などに変更があります。 Migrating from v1 to v2 を読んで v2 系への移行を行うか、または私のリポジトリを参考にしてください。 https://github…

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 などのビルドツールを…

『実践 Python 3』で学ぶデザインパターン : Builderパターン

こちらの書籍でデザインパターンを勉強中。 実践 Python 3作者: Mark Summerfield,斎藤康毅出版社/メーカー: オライリージャパン発売日: 2015/12/01メディア: 単行本(ソフトカバー)この商品を含むブログ (1件) を見る また、Java ですが家にこの本もあった…

Herokuで本番環境の環境変数(config vars)を.envファイルで設定する

普通、Heroku の本番環境の環境変数(config vars) は Heroku のダッシュボード > Settings から設定するか または以下のようにローカルで heroku config:set [変数]=[値] コマンドを実行することで設定できる。 $ heroku config:set GITHUB_USERNAME=zaki-ya…

[vim]PlantUMLを入れてvimでUML図を書く(2016年1月時点)

メモ。 こちらの記事の通りでもいいのですが、2016年1月時点では PlantUML も Homebrew からインストールできるようです。 MacでVimでPlantUMLの編集環境を作る - Qiita 設定方法 Homebrew で PlantUML をインストールする。 また、クラス図などを描くために…

『実践 Python 3』で学ぶデザインパターン : Abstract Factoryパターン

こちらの書籍でデザインパターンの勉強を始めました。 実践 Python 3作者: Mark Summerfield,斎藤康毅出版社/メーカー: オライリージャパン発売日: 2015/12/01メディア: 単行本(ソフトカバー)この商品を含むブログ (1件) を見る また、Java ですが家にこの…

[Python]pep8とpylintの設定ファイルを作成して一部の警告を非表示にする

pep8 や pylint はインストールしたままの状態だと必要以上に警告が表示されてうっとおしいので、 無視したい警告などを設定ファイルに記載します。その方法をメモ。 ※pylint については以前 Syntastic の設定方法の時にも触れました [vim]Syntasticでpython…

PythonのSalesforceライブラリまとめ

nforce の Python 版みたいなのが欲しくてそれらしいライブラリがないか調べていたところ、こちらの記事が大変参考になったので、プラスアルファで自分で調べたものも整理しておきます。 参考にしたサイト PythonのSalesforceライブラリ調べてみた Python an…

PythonでCGIを動かす(Python2, Python3)

import cgi とかしてるファイルをローカルでどうやって動かすのか色々調べたメモ。 最初、Apache で動かす必要があるのかと思い、 Running Python Programs on the Mac OS X Apache Web Server Mac OSX Mavericks で Apache環境構築 + 任意のディレクトリか…

[vim]neosnippetの自作スニペットで現在開いているファイル名を使う

vim

ちょっとしたメモ。 前回の続き。 たとえば、Java において FooController.java みたいなファイルを NERDTree から作成して開き public class FooController { } のように現在のファイル名が挿入されたスニペットを追加したい。 このようなスニペットを実現…

[vim]neosnippetに独自スニペットを追加する

vim

メモ。 よく使うコードスニペットを簡単に挿入する機能を提供してくれる vim プラグイン neosnippet。 これに、自分でよく使うスニペットを追加する方法。 こちらの記事が参考になりました。 Vimプラグイン初心者がスニペット機能を導入して、独自スニペット…

[Python]Pelicanで作ったサイトをiPhoneのホーム画面に追加した時のアイコンを設定する

またまたまた Python製 静的サイトジェネレータ Pelican の話。 iPhone でサイトを「ホーム画面に追加」した時に指定したアイコンが表示されるようにする。 ほとんど前回の favicon と同じ要領でいけそう。 (参考:過去の記事) Travis CIでPelicanのビルド…

[Python]Pelicanで作ったサイトにfaviconを設定する

またまた Python製 静的サイトジェネレータ Pelican の話。 ここに書いてあった。 Tips n Tricks · getpelican/pelican Wiki · GitHub 2 通りあるみたいだけど Second Solution でうまくいった。 設定方法 1.content ディレクトリの下に extra というディレ…

[Python]PelicanにMarkdown Extensionsを入れて自分好みにカスタマイズする

Python製 静的サイトジェネレータ Pelican の話。 記事は Markdown で書いているのだが、Markdown から生成される HTML の細かい挙動を変えたい、あるいは機能を追加したい場合にどうやってカスタマイズするのか調べてみた。 公式ドキュメントのここに書いて…

[Python]Travis CIでPelicanのビルドを自動化する

Qiita にも投稿した けどこちらにも。 Pelican + GitHub Pages で運用しているサイトがあるのだが master に記事を push したら自動的に pelican コマンドで HTML を生成し、gh-pages ブランチに push してサイトが更新されるように Travis CI を設定してみ…

[Django]URLconfのユニットテストの書き方

メモ。 Django の urls.py で urlpattern に正規表現とか使っていると、正しく書けているかどうか確認したいことがある。 たとえば myproject というプロジェクトに myapp というアプリケーションを作成した場合、 myproject および myapp の urls.py は以下…

Djangoのチュートリアルが終わった後に読みたいもの

自分用メモ。 チュートリアルやった。 Getting started | Django documentation | Django コード チュートリアルの中でいくつか Further Reading 的なドキュメント(いずれも公式ドキュメント)が紹介されてたのでメモ。 チュートリアル概要 part1 project, …

ページのタイトルとURLをMarkdown形式でコピーするChrome拡張作った

タイトルの通り。 現在開いているページのタイトルとURLを Markdown 形式 ([title](url)) でクリップボードにコピーするだけの Chrome 拡張を作った。 ページのタイトルとURLをコピーする Chrome 拡張は既にあった (Copy Title+URL to clipboard - Chrome W…

[Python]PelicanでGitHub Pagesにブログを構築したらスタイルが当たらなかったときの対処法

この記事の補足です。 dackdive.hateblo.jp 勉強会の時に作ったサイトに後でアクセスしてみたら、スタイルが全然当たってなかった。。。 http://zaki-yama.github.io/salesforce-developers-info/ で、開発者コンソールで書いてる通り CSS ファイルが 404 に…

[Python]HerokuでDjangoアプリケーション開発を始めるためのテンプレート

この記事は Heroku Advent Calendar 2015 22 日の記事です。 はじめに Heroku と言えば Ruby!な印象がどうしても強いですが、Ruby 以外にも様々な言語をサポートしています。 Python もそのひとつです。 ref. Languages | Heroku Dev Center Python(Django)…

[Python]PelicanでGitHub Pages上にブログを構築する(Django Girls for Everyone #2 参加メモ)

こちらのイベントの参加メモです。 少人数でわいわいやる感じで面白かった。 作業に没頭してしまったんだけどもっといろんな人とお話すればよかったー。 今回は、Pelican という静的サイトジェネレータを使い GitHub Pages 上に自分のブログサイトを構築する…

「実践Heroku データベース編 Webinar」のメモ

実践Heroku データベース編 Webinar | Salesforce Developers 見ました。メモ。 実践Herokuデータベース編 Webセミナー from Salesforce Developers Japan アジェンダ 前回のおさらい Heroku Postgres の概要 便利なアドオンの紹介 Heroku Redisの紹介 前回…

[Heroku][Django]Postgres.appで `'django_postgrespool' isn't an available database backend.` エラー

メモ。 Django アプリケーションをローカルで実行したらこんなエラーが出た。 (確認した PC は Mac OS X Yosemite v10.10.5) (venv)$ heroku local web forego | starting web.1 on port 5000 web.1 | [2015-12-13 12:57:53 +0900] [2925] [INFO] Starting…