はてなブックマーク

概要 OpenMapTiles.com は、地図のタイルデータの販売、地図サーバ、地図APIのSDKを配布している会社です。 タイルデータはOpenStreetMapのデータを元に作られているようです。 地図サーバはdockerイメージが用意されているので、簡単にセットアップできます。 これらを利用して、Google Mapsなどの地図APIを使うのと同じように、自前で地図サーバを立てて、それを利用してサイトやモバイルアプリに地図を埋め込むことができます。 この記事では、配布されている OpenMapTiles Map Server を使って、地図サーバをセットアップし、別サイトに地図を埋め込むところまでの手順を説明します。 手順 タイルデータをダウンロードする ↑このページから地図データをダウンロードします。国や都市単位でデータをダウンロードできます。 ここでは Osaka Kyoto

概要 以前、zipcode_jpという住所検索APIを作った (github) と紹介したのですが、その後も徐々に機能追加を重ねてきました。その結果、割といい感じの住所入力フォームが作れるようになりましたので、追加機能の紹介をします。 zipcode_jpを開発した理由 郵便番号検索機能をいろんなサービスで実装してきた。 その際、郵便番号検索機能のためのDBを保守するのが面倒。ken-all.csvのパースとかしないといけない。 外部サービスを使うのも、料金とか利用制限とかサービス停止時の対応とか考えると別の面倒事が増える。 そもそもそこまですごいことがしたいわけじゃない。郵便番号検索に対応する住所情報をダウンロードすればいいだけなので、これってそもそも動的なサーバープログラムを準備しなくていいのでは？ と思って作ってみたら、まあまあいい感じに使えた。 みたいなことを 郵便番号から住所を検

2018/3/29 キャッシュで問題が起こったときに、キャッシュを削除する方法を追記しました。 概要 TypeScript + React + Webpack で開発しているフロントエンドプログラムのビルド時間が、ファイルが増えるのに従ってどんどん長くなって来ていたのですが、その問題を解決するWebpackプラグインを見つけたので紹介します。 情報元: 0–100 in two seconds — speed up webpack 上記の記事によると、DLL と HardSourcePlugin を両方追加すると良い、と書かれてます。 残念ながら手元の環境では DLL はビルド時にエラーが起こったので採用を見送りましたが1、HardSourcePlugin は導入に成功し、ビルド時間を 105sec -> 10sec (!!!) に減らすことができました。 HardSourceWebpac

この記事は、ドメイン駆動設計 #1 Advent Calendar 2018の10日目です。 ユビキタス言語は大事 DDDは分類手法の一つという側面があります。 分類の道具は境界づけられたコンテキストと、ユビキタス言語です。 境界づけられたコンテキストで、システムの対象業務を分類し、境界づけられたコンテキスト内部ではユビキタス言語で言葉を分類します。 個人的に、ユビキタス言語はDDDを実践する上でとても大事なテクニックだと思うのですが、何を指すものなのか、どういうメリットがあるものなのかわかりにくいために、初心者にとってはわかりにくいものかもなー、とも感じます。 そこでこの記事では、ユビキタス言語についての私の知見を書いてみます。ユビキタス言語についての学習の助けになれば幸いです。 ユビキタス言語とは何か？ ユビキタス言語の定義をする前に、「境界づけられたコンテキスト」について説明します。

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

この記事はQiita Advent Calendar 2017 React #1 の 4日目の記事です。 Almin.js について最近学んだことを説明します。 概要 今、業務で開発しているシステムで、Almin.js + TypeScript + React を使ってフロントエンドの処理を実装しています。 Almin.js Almin.jsの採用を検討したのは、フロントエンドでDDDに沿った設計をするのに使いたかったからです。 今回調査も兼ねて実装してみると、Almin.jsを利用することで、思っていたよりいい感じにクラスを設計できました。 その課程で Almin.js が何を提供するライブラリなのかということも理解が進んだので、学んだ内容を共有します。 必要だったもの 今回の開発にあたり、Viewを実装するためにReactを使うことは決まっていましたが、それ以外の部分についてはどうやっ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2019/4/21追記 zipcode_jpに機能追加したため、この記事の内容は古くなりました。 現在のzipcode_jpについては zipcode_jp でいい感じの住所入力フォームが作れるようになりました の記事を参照ください。 概要 プロダクトごとに分散してしまいがちな、郵便番号データベースの保守を楽にする仕組みを作ったので紹介します。 郵便番号検索にまつわる問題点 フォームの住所入力をサポートするために、郵便番号から住所を補完するコードを書くことがあると思います。 私も何度かこの処理を実装したことがあるのですが、そのたびに郵便

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 関ジャバのDDD勉強会で紹介されていた isolating the domain を読んでみました。 紹介のスライド https://speakerdeck.com/haljik/isolating-the-domainfalseshao-jie プロジェクト https://github.com/system-sekkei/isolating-the-domain ちょうど直近のプロジェクトでDDDに沿った設計を導入することになったので、その参考にしたい、という意図です。 実際にDDDを導入しようとすると、各層のディレクトリ名の付け方

ReactのJSXには直接条件式を書くことはできないので、ある要素の表示を条件で切り替えるときには、埋め込み式の中で条件分岐を書かないといけません。 以下の例は、タブで表示画面を切り替える画面のために実装していたコードです。あまり見やすくありません。 { app.pageIs(5) ? ( <div> <SupportMethodComponent app={app} support_method={data.support_method} /> <StudentSupporterComponent app={app} student_supporter={data.student_supporter} /> </div> ) : null } { app.pageIs(6) ? ( <div> <StudentOtherActivityComponent app={app} other_

AWSのサービスをコンソールから操作するための、awscliというツールがあります。 このツールのコマンドの一つ、aws s3 syncを使うと、rsyncのようにファイルをS3にバックアップできます。 バックアップしたファイルはaws s3 syncで復元することも可能です。 この記事はバックアップ先となるS3のBucketを作るところから、aws s3 syncを使ってバックアップするまでの手順を説明します。 プライベートBucket作る Amazon Management ConsoleのS3管理ページから、Create Bucketを選ぶ。 好きな名前を入力してCreate Bucketは、デフォルトでは非公開になってて、Bucketを作ったユーザのみがアクセスできるようになってる。 IAMにバックアップ用ユーザ作る Amazon Management ConsoleのIAM管理ペ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Hubot> hubot help Hubot> Events: debug - {user: <user object to send message to>} Hubot <user> doesn't have <role> role - Removes a role from a user Hubot <user> has <role> role - Assigns a role to a user Hubot <user> is a badass guitarist - assign a role to a user Hubot <user> is not a badass guitarist - remove a role from a user Hubot animate me <query> - The same thing as `image me`, except add

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 今日まで Ember.js の紹介をしてきました。 思えばAdvent Calendarを書き始めた12/1の時点では、私自身、Ember.jsについてはほとんど何も知らない状態でスタートしました。 もっともknockout.jsを業務に使っていたので、データバインディング機能の便利さは理解していましたし、Ember.jsが記述の柔軟性のレベルでは他のデータバインディングより洗練されているので、コンセプトレベルでは間違いなくすばらしいフレームワークである、ということは確信していました。 ただ、Router, ストレージの利用方法、拡張方

TwitterやQiitaのような自動更新タイムラインをBackbone.jsで作成 Qiitaでは新しい投稿がある場合にその件数を表示し，クリックするとタイムラインに追加するということをやっています．TwitterやFacebookと同じ仕組みですね． これはBackbone.jsのBackbone.Collection#fetchを使うと簡単に実装できます． 便利な機能ですね！ Ember.jsでもfetchを実装してみました。 ソース: https://github.com/kmdsbng/emberjs_fetch_sample/blob/master/js/app.coffee ソースコードを抜粋します。 App.tweets = Ember.ArrayController.create Ember.Fetchable, content: [], maxId: 3, # adho

今日は、他のJavaScript MVCフレームワークに対するEmber.jsの優位点を 説明します。 まず、なぜJavaScript MVCフレームワークが必要なのか、jQueryでは 不足なのかという点について説明します。 jQueryについては、ここをご覧になっているほとんどの人が ご存知だと思います。jQueryは、DOMイベントと処理のバインディング、 要素への値のセットを簡潔に書けるシンタックスシュガーとして 扱うことができますが、jQueryだけを用いて処理を記述すると、 どこに何の処理が書いてあるのかわかりにくい、整理されていない コードを書いてしまいがちです。 心当たりのある方も多いのではないでしょうか。 これは、プログラムが構造を持っていないのが原因です。 プログラムの構造とは、処理の種類ごとにコードをまとめることを 指します。 jQueryは便利な簡潔記法を提供します