はてなブックマーク

2018 年に入ってからは Vue.js / Nuxt.js を採用した Web サイト開発に携わっています。ログイン機能がある Web サイトで、データは API サーバーを叩いて取得するという構成。最近のフロントエンド開発は、感覚としてはアプリ開発ですね。 Vue.js に加えて Nuxt.js を採用したのは SSR（Server Side Rendering）をしたいという理由に尽きます。SSR することによるメリットは、以下となります： Facebook や Twitter が OGP タグを正しく評価してくれる 検索エンジンがサイトを正しく評価してくれる 副産物として、ログインユーザー情報が描画されて返るため、クライアント側で描画されるまでの空白状態がユーザーに見えない この記事ではそんな Vue.js / Nuxt.js を採用した Web 開発で得た知見を紹介していきます。

Android Oreo (API Level 26) を compileSdkVersion, targetSdkVersion とするアプリは、通知と、サービスのフォアグラウンド実行に対して新しく制限が加えられました。従来の SdkVersion を指定してビルドしたアプリを Android Oreo 上で動かす場合は、影響はありません。 Oreo 以降では、通知ごとにチャンネルを紐付ける必要があります。例えば、Twitter アプリでは、メンションとダイレクトメッセージを異なるチャンネルで取り扱っており、ユーザーが通知チャンネルごとに、音声と画面表示のオン／オフを切り替えることができます。 これにより、ユーザーは手ずから行儀の悪い通知を管理できるようになるのですが、行儀の良いデベロッパーにとっては実装が面倒になった印象しかありません。 サービスのフォアグラウンド実行では、サービスを起

開発者は自分のアプリに付くレビューに返信することはできない。そのためユーザーが間違った使い方をしてレビューに書いても、開発者は手を差し伸べることはできない。またその情報が他のユーザーに広がることを考えるとはらはらする。その状況は、教室で女の子たちが自分に対する評価を話していて、透明人間の自分はそれを聞き続けている状態に近い。こちらに否がある内容にも「ごめんなさい間違えました」と一言さえ言えないのは心苦しいものがある。 Apple は、次にリリースする iOS 10.3 でレビューの返信機能をようやく導入するようだけれど、アプリ開発者はそれを何年待ち続けたのだろうか。自分は iOS 4.3 の時に、アプリ開発者を初めたから、計算すると 6 年になる。 その間に iOS アプリに対するアフィリエイトの仕組みが変わり、報酬が減った。それにより個人ブロガーがアプリレビューを書くインセンティブがなく

勉強のためにブログを HTTPS 化しました。このブログは静的サイトジェネレータ Hugo で生成したファイルを Amazon S3 にホスティングしており、ドメインも Amazon Route 53 で管理しています。 HTTPS 化の手順としては、AWS Certificate Manager, ACM から SLL 証明書を取得します。その証明書はそのまま S3 には使用できないため、CloudFront という Content Delivery Network, CDN を間に挟んで HTTPS 化します。 以下の記事を参考に進めましたが、躓いた点をこの記事にメモとして残しておきます。 [ACM] AWS Certificate Manager 無料のサーバ証明書で CloudFront を HTTPS 化してみた ｜ Developers.IO AWS Certificate M

最近、Alfred の Powerpack を購入してから、色々と遊んでいます。 Alfred の Powerpack で使えるようになるクリップボード履歴とスニペット機能について簡単にまとめてみました。 Alfred 1.0（無料） 公式サイト » Alfred App ※ Alfred で Powerpack を使う場合は、AppStore からではなく、Alfred 公式サイトからダウンロードした Alfred を使用します。 1. 検索履歴の使い方 「Alfred Preferences」→「Features」→「Clipboard」を選択します。「History」タブから「Clipboard History」にチェックを入れます。 また、クリップボード履歴を残す期間を決めることが出来ます。 クリップボード履歴は、[ option + command + C ] を押すと呼び出せま

Xcode のどのバージョンからか分かりませんが、iOS シミュレータでの、スクリーンショットの保存方法が簡単になっていました。 iOS シミュレータを表示させて、⌘ + S（スクリーンショットを保存）するだけです。 撮影したスクリーンンショットは、ディスクトップに保存されます。 この方法で撮影すると、ステータスバーに、Softbank や KDDI といった携帯電話会社のキャリアが表示されません。 AndroidArduinoAWSCocos2d xCSSEvernoteHugoiOSJavaScriptMacObjective-COS XPHPProcessingPythonScienceSQLiteWeb ServiceWordPress開発仮想通貨雑記投資 Hey, I'm rakuishi はじめまして。rakuishi といいます。大学在籍中（微生物学を専攻）の 2012 年

今の業務では、JavaScript で Single Page Application を作る機会はないのですが、後学のために React.js の開発環境の構築と、いくつかチュートリアルを写経しました。この記事では、React.js アプリをビルドし、Hello, World! アプリを作成するところまでを紹介します。 ビルド環境が必要になる理由 React は JavaScript のライブラリなので jQuery と同じように、スクリプトタグを貼り付けても利用できますが、ツールを使ってコードをひとつのファイルにまとめてビルドする開発方法が推奨されています。 React では、以下のように変換が必要になる書きかたを積極的に行っています。 ES6（別名 ES2015）: 次期 JavaScript 仕様。ブラウザがサポートしていないと利用できないため、従来の ES5 仕様に変換する JS

さくらの VPS に Ruby on Rails の環境を導入するまでの手順をまとめました。まずは、Ruby 付属の Web サーバー WEBrick による動作を確認し、その後に Unicorn + Nginx による動作を確認します。 Create user account ルートユーザーで ssh ログインします。 $ ssh root@${id_address} 一般ユーザー apps を追加します。 # useradd apps # passwd apps 一般ユーザー apps がルート権限で作業できるようにします。 # usermod -G wheel apps # visudo コメントアウトされている部分を解除します。visudo コマンドを経由して、/etc/sudoers を編集しています。 ## Allows people in group wheel to run

以前、WordPress のローカル仮想環境の構築を Vagrant を利用した VCCW で試したことがあるのですが、以下の理由から使うのを諦めたことがありました。 仮想環境の起動が遅かった 恐らくパーミッション設定が間違えているのかメディアがアップロードできなかった 開発しているテーマとプラグインをどのように Git で管理するのか、サンプル記事をどのように共有するのか、イメージが湧かなかった 仕方なくこれまで通りに MAMP でローカル仮想環境を構築していた折、Docker で WordPress サイトを開発してみよう というスライドを見かけて、Docker を始めてみました。上記の悩みを見事に解決出来たので（特に起動と破棄が一瞬だったのに感動した！）、今後は Docker を使っていくことにしました。 この記事は上記のスライドを参考に、Docker で WordPress サイト

Android Studio で、プロジェクトに含まれているすべてのファイルから検索する方法を紹介します。 すべてのファイルから検索する方法 プロジェクトを右クリック（副クリック）し、“Find in Path…” を選択します（もしくは、command + shift + F）。選択後、ウィンドウが表示され、検索語句を入力することができます。 検索結果は、下のエリアに表示されます。検索結果をダブルクリックすることで該当するファイルが開かれます。 AboutPosts Blog Tech Hey, I'm rakuishi はじめまして。rakuishi といいます。大学在籍中（微生物学を専攻）の 2012 年 1 月に趣味で初めた iOS アプリ開発が高じて、アプリ開発とフロントエンド・デベロッパを仕事にしています。個人開発した Quicka が有料アプリ 5 位でした（過去の栄光）。こ

Aileron という Android のライブラリを作成しました。Activity や Fragment の生成時に、Intent に詰めた引数を取り出す手間を減らすためのライブラリです。ちなみに、Aileron（エルロン）とは、飛行機の補助翼のことです。 折角作ったならば、使う時は build.gradle に、以下のように一行追加すれば、ライブラリを使えるようにしたい。今回は、Bintray というサービスにライブラリをアップロードして、それを実現しました。 dependencies { compile 'com.rakuishi:aileron:0.1.0' } この記事では、Android Studio でのライブラリを作りかたと、Bintray にライブラリをアップロードするまでの手順を紹介します。 Android Studio でライブラリを作る Android のライブラリ

この記事では、自分が CSS 初学者だった頃に知りたかったことをまとめています。 Normalize.css Chrome, Safari, Firefox, IE などといったブラウザには、各々、デフォルトスタイルが当てられています。これにより、同じ要素なのに、余白や文字の大きさが微妙に異なる、といったことが起こります。 そこで登場する Normalize.css は、各ブラウザの違いを吸収し、各要素の有用なデフォルトのスタイルを維持したものです。Normalize.css を使えば、どのブラウザで見た時にも同じスタイルが当てられます。 Normalize.css は、HTML の head 内で以下のように宣言して使います： <link rel="stylesheet" href="/css/normalize.css"> <link rel="stylesheet" href="/c

依存性注入（DI: Dependency Injection）という単語を知ってはいたけれど、その意味を知らなかったので調べた。また、前に書いた Todo-Android という Android アプリを元に依存性注入を考えた。 Android では、Dagger というライブラリが DI を実装するのに有名みたいだ。Square 製の Dagger があり、それをフォークした Google 製の Dagger 2 がある。開発が盛んである Dagger 2 を使った。 依存性注入すると何が解決できそうか Todo-Android アプリの中では、RealmTodoManager が Todo 情報を管理していて、Todo リストを返したり、Todo の追加・更新・削除を担っている。 public class RealmTodoManager { public RealmTodoManag

RxJava には、それを扱うための数多くの関数（オペレーター）が用意されているが、頻繁に使うのは極一部だったから、今までに使ったオペレーターとその使用例をまとめてみた。 Observable を作る - just Rx では、データを Observable<T> の形で取り扱うが、これを一番簡単に作れるのが just である。以下の例では、Observable<String> を作成している。 public Observable<String> doSampleJust() { return Observable.just("RxJava"); } Observable を作る - create Observable を自作する時に使える。例外が発生するような処理を取り扱いたい場合に使っている。処理中に onNext, onError, onCompleted を呼べるから、通信処理をこ

例えば、ある通信処理で得られるトークンをもとに、次の通信処理を行うケースを考えてみる。Android アプリでは、同期的な通信は許可されていないから、非同期処理を続けて書く必要になりそうだ。これを愚直に実装すると面倒なことになりそうだが、RxJava で解消しそうだった。 RxJava とは、 リアクティブプログラミングを可能にするライブラリである（知らない言葉を説明するために、知らない言葉が登場してくる）。リアクティブプログラミングについては詳しくないのですが、このライブラリを使えば前述のようなプログラムが可読性高く書けるようになるようだった。 マテリアルデザインを用いたデザインリニューアル [フリル編] 65 スライド目 この RxJava を使って、非同期通信処理とテストを書いてみた。 非同期通信処理 今書いている Android アプリ rakuishi/OK の通信処理（このブロ

Material Design と、流行っている Realmれるむ を勉強するために、Todo アプリを作りました。一応、お金を払って Google Play Developer に参加しているのでストアに公開もしました。 Google Play: Todo - Google Play の Android アプリ GitHub: rakuishi/Todo-Android この記事では、この Todo アプリを実装した上での気付き点を紹介します。 Material Design Android マテリアルデザインガイドの何が良いかというと、色・サイズ・タイポグラフィが厳密に定義してあること。iOS のフラットデザインは、情報・コンポーネントの置き方を詳しく定義しているのですが、マテリアルデザインガイドまで厳密ではないように思う。乱暴だけれど、磨りガラスを取り入れれば、なんとなくフラットデザ

元は同じファイルなのだけれど、どの文字列が追加・削除・編集されたかを順を追って比較したい時があります。 そのような 2 つのファイルの差分を比較する場合、opendiff を使用すると便利です。opendiff は、Xcode をインストールすると使用できるようになる、グラフィカルな差分比較ツールです。 差分をグラフィカルに比較 opendiff を使用するには、以下のようにターミナルにコマンドを打ち込みます。opendiff の後ろに [ファイル 1] [ファイル 2] と指定してあげます。 $ opendiff index.php index2.php FileMerge アプリが立ち上がり、グラフィカルに差分が比較できます。2 つのファイルで異なる部分だけが強調表示されます。 差分をマージする また、差分を比較するだけでなくマージできます。マージするには、中央の矢印を選択し、右下の

Hugo Zen という、静的サイトジェネレータ Hugo で使えるテーマを作りました。理由は、公開されているテーマ hugoThemes には、主張が強すぎるものが多く、どれを参考にオリジナルテーマを作ればいいか分からなかったからです。 Hugo Zen は、ミニマムに作られています。Skeleton という素敵な CSS ライブラリと、100 行に満たない custom.css から出来ていて、Hugo Zen を元に自分のテーマを作るのに向いています。 導入 Hugo プロジェクトから以下のコマンドを打てば、使えるようになります。 $ cd themes $ git clone https://github.com/rakuishi/hugo-zen $ hugo server --theme=hugo-zen --buildDrafts --watch 設定 config.toml

ランチャーアプリ Alfred の Powerpack を買うと、ユーザーが組んだスクリプト（Workflow）を動かすことができる。以前から自分も作ってみようと思っていたが、どこから手を付ければよいかよく分からなった。 そんな折、Workflow をまとめた GitHub リポジトリ を発見した。これらの中身を覗きながら、自分でも作ってみた。 Alfred Terminal WorkFlow 現在 Finder で表示しているフォルダ位置を Terminal で開く Workflow を作った。 rakuishi/alfred-terminal-workflow 以下のスクリーンキャストを見ると動作がわかりやすいと思う。 Finder を開いていて、Alfred 上に terminal と入力することで Terminal を起動するようにしている。ダウンロードはここから、もしくはリポジト

画像に説明文を載せる定番アプリケーションは、Evernote が出している Skitch です。 Skitch が 1.x から 2.0 に大型アップデートされた時は、以前のバージョンに比べて使いにくいとの声がありました。ですが、日々のアップデートで、シンプルな Skitch 2.0 に、便利な機能が追加されています。お気付きでしたか？ 以前は Skitch でモザイクをかけることができなかったのですが、できるようになっていたので、その方法を紹介します！ Skitch 2.5（無料） Skitch でモザイクをかける方法 Skitch を立ちあげて、モザイクをかけたい画像を Dock にある Skitch アイコンにドラッグ＆ドロップします。 すると Skitch 上で、画像が表示されます。左にあるバーから、モザイクボタンをタップします。 そして、モザイクをかけたい部分を範囲指定すれば、終

WordPress から Hugo に移行して、ブログのテーマがある程度出来たので、Google のウェブパフォーマンスツール PageSpeed Insights にかけたら 73 でした。ちなみに、ページのパフォーマンスが高いとされる数値は 85 以上。 「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」項目で大幅に減点されているから、今回は CSS を修正していきます。 レンダリングブロック CSS とは ブラウザではコンテンツを画面に描画する前に外部 CSS ファイルをブロックします。これによって、余分なネットワーク遅延が生じ、コンテンツを画面に表示するのにかかる時間が増えます。 CSS の配信を最適化する ページを表示する手順を考えてみる ブラウザが html ページを表示する際の手順は、以下になります。 index.h

2011 年 8 月 25 日から数えて 3 年と半年、このブログは WordPress で運営してきたのですが、この記事から Hugo という静的サイトジェネレータで運用します。 当初は WordPress も PHP も分からない微生物専攻の大学生だったのが、最近では WordPress テーマ／プラグイン作成をする仕事をしていて、時間の流れは不思議だと感じるこの頃。そして、WordPress のことが大まかに掴めたからこそ、他のブログツールを勉強したいなと思いました。 調べてみたらフロントエンドエンジニア界隈で、Go 言語で作られた Hugo という静的サイトジェネレータがなんか流行りっぽいので、それに移行しました。 Octopress から Hugo へ移行した | SOTA Jekyll が許されるのは小学生までだよね - MOL WordPress からの移行方法 まだ、公式に