Webクライアントはリッチに、モバイルアプリクライアントはシンに運用開発する

Django, Nest, Laravel, Rails などの サーバサイドアプリ(APIサーバ) Vue, React などの Webクライアント iOS, Android 用の モバイルアプリクライアント これらを組み合わせてサービスを作ることはよくあり、弊社でもそうしています。 Webクライアントとモバイルアプリクライアントは役割として同じものになるので、同じような感覚で開発を始めることはよくあります。 しかし、アプリのファーストリリースが終了し、運用開発のフェイズとなった時、同じような感覚で機能追加を進めていこうとするとうまくいきません。モバイルアプリは、非常にリリース速度が遅いのです。

Webクライアントはリッチに、モバイルアプリクライアントはシンに運用開発する

Webの技術でレジ(POS) を開発・運用する

当社TORICOは、主にインターネット上での書籍の販売サービス、つまりECサイトを自社開発して展開しています。 実店舗を営業するにあたり、レジ(POSシステム) が必要となります。TORICOでは、POSシステムもWeb技術で自社開発し運用しています。当社と同様に Web技術で POSを開発される方に向けて、私が対応したいくつかの経験を書き残します。

Webの技術でレジ(POS) を開発・運用する

Django の ORマッパーで生成されたSQLを実行前に置換し、JOIN時のインデックスを強制する

Django には、便利な ORマッパーが搭載されており、SQLを一切書かずともRDBの操作が行えます。 今回、SQL実行時に思ったようにインデックスが使用されず、パフォーマンスが出ない問題がありました。 これは、生SQLを実行した場合も同様にインデックスが使われなかったため、Django の問題ではなく、実行計画が最適に作成されなかったというSQL上の問題(というか仕様?)です。 SQL内にインデックスヒントを強引に書き込むことでインデックスを強制した所、正常なパフォーマンスとすることができたので、その方法を書きます。

Django の ORマッパーで生成されたSQLを実行前に置換し、JOIN時のインデックスを強制する

サーバレスアプリケーション (HTML/JSのみ) で、Google Analytics API を使ってアクティブユーザー数を表示するダッシュボードを作る

Google Analytics は、API経由で様々な数値を取得することができます。 今回は、API経由でサイトのアクティブユーザー数を取得して、Nuxtで作ったダッシュボード風JSアプリに表示してみます。 Google Analytics の APIから値を表示してウェブページに表示する場合、 APIとの通信をサーバサイドで PHP や Python のプログラムで取得してウェブブラウザに表示時する方法と、 ウェブブラウザ自体が直接 Google Analytics API にリクエストして表示する方法と、 どちらの方法でも実現できます。

サーバレスアプリケーション (HTML/JSのみ) で、Google Analytics API を使ってアクティブユーザー数を表示するダッシュボードを作る

Ubuntu server 20.04 に Rancher で Kubernetes (シングルノードk3s) + Ingress 環境を構築し、ウェブアプリをホストする

現在の最新版のRancher 2.5.2 を使った所、1年前のものと違った点で環境構築に躓いた所があったので書きます。 Rancher 添付の K3S のシングルノードクラスタで、Ingress で外部リクエストにレスポンスする所まで行います。 1. Docker エンジンのインストール 2. Rancher の実行 3. kubeconfig の取得 4. mac から kubectl を実行 (試しにネームスペースを作る) 5. Ingress Controller の作成 6. SSL(TLS)証明書があれば入れとく 7. 適当にサービスを作る

Ubuntu server 20.04 に Rancher で Kubernetes (シングルノードk3s) + Ingress 環境を構築し、ウェブアプリをホストする

一定期間より昔のGmailを自動的に削除する方法 (Google Apps Script を使う)

Google Apps Script を使って、一定時間より古い Gmail を自動的に削除するスクリプトを定期動作させる方法を書きます。 ちなみに、Google Drive の容量が不足シている場合、Drive にメール以外の容量の大きなファイルがあるかもしれません。 https://drive.google.com/drive/quota こちらから検索できます。 1. Google Apps Script のページを開く。 https://script.google.com/ もしログインしてなければ、「Start Scripting」のようなボタンを押してログインします。 2. 左上の「新しいプロジェクト」のボタンを押します。

一定期間より昔のGmailを自動的に削除する方法 (Google Apps Script を使う)

TORICO全社会イベント TORICO NIGHT 2019 でオペレータしました

2017年から開始して、2019年11月の開催で5回を迎えました。 多くの会社は、12月に「忘年会」という形で食事会をされると思いますが、TORICOは12月は商品が非常に多く売れる時期であり、物流チームも事務チームも気が抜けなくなるため、その時期を避けて秋口に食事会をします。

TORICO全社会イベント TORICO NIGHT 2019 でオペレータしました

旧Redash(V2) から 新Redash(V8) にアップデートを行いました

Re:dash v2 から v8 にアップデートする際、新しいv8サーバを作り、v2のDBから内容をv8にinsert することにしました

旧Redash(V2) から 新Redash(V8) にアップデートを行いました

CloudFront の Origin を、ボットかどうか(User-Agentによって)判定して切り替える

Lambda@Edge + CloudFront で、User-Agent を判定し、JSを動かせないようなUAの場合はオリジンをサーバサイドレンダリングするサーバに切り替えるようにしました

CloudFront の Origin を、ボットかどうか(User-Agentによって)判定して切り替える

AWS LambdaをCloudFrontエッジサーバで動かす (Lambda@Edge)

AWSの Lambda ファンクションを、CloudFrontのエッジサーバにデプロイして、リクエストやレスポンスをインターセプトして処理を行うことができます。Lambda@Edge と呼ばれています。 Webアプリケーションフレームワークにある「ミドルウェア」のような使用感で使えます。 例えば、S3 をオリジンに使っている時(サーバレス環境などで)、少しだけ動的に認証やリダイレクトなどのHTTPヘッダーを扱う処理をしたい時など、便利です。 ポイントとして、us-east-1 (バージニア北部) リージョンの Lambdaファンクションのみ選択できます。

AWS LambdaをCloudFrontエッジサーバで動かす (Lambda@Edge)

AWS CloudFrontにACMの独自SSL証明書を適用する

CloudFront には、AWS ロードバランサー (ELB,ALB) と同じように ACM (Certificate Manager) で無料で作成したSSL証明書を適用することができます。 ポイントは、us-east-1 (バージニア北部) リージョンのACM で作った証明書のみ選択できるというところです。

AWS CloudFrontにACMの独自SSL証明書を適用する

Bootstrapでスマートフォン/PC両対応ページを手軽にレイアウトする 第1会 スペーシングユーティリティ

TORICOでは、ウェブサービスのCSSフレームワークとしてBootstrap4を多く採用しています。 ユーティリティクラス(margin,padding,文字サイズなど)、プリセットデザイン(card,buttonなど)、グリッドレイアウトが必要十分なだけ収まっており、容量と使う機能のバランスがちょうどよいためです。 漫画全巻ドットコムなどのサービスの特集ページもBootstrap4が適用されており、 非デザイナーでも十分な自由度を保ったレイアウトを少ないコード量で書くことができます。 今回は、非デザイナー向けに、簡単にBootstrapの使い方を教えます。

Bootstrapでスマートフォン/PC両対応ページを手軽にレイアウトする 第1会 スペーシングユーティリティ

仕事をする上でいつも思っている言葉

弊社TORICO にインターンとして大木さんというエンジニアが参加されています。ブログをお任せしたところ、職場や働き方についても書かれていました。今回はそれに刺激を受け、私も職に対しての考えを書こうと考えました。今回は、私が仕事をする上でいつも思っている言葉、そして私を変えた言葉をいくつか紹介したいと思います。

仕事をする上でいつも思っている言葉

Django に Celery タスクキューを導入し、遅い処理を利用者に体感させないようにする

Django でウェブアプリを作る際、遅い処理をタスクキューにするには、celery が便利です。今回、社内勉強会で Django + celery のチュートリアルを行ったので、celery で簡単なタスクを動かすまでを書いておきます。 内容としては Celery ドキュメントの First steps with Django をなぞっています。 環境 MacOS Python 3.6.5 Django 2.1 Celery 4.2.1 Redis Redisは、キューのブローカーとして使います。Redis以外にも、RabbitMQ やAmazon SQS が使えます。 Redis サーバの起動方法は書いていませんので、適宜起動してください。

Django に Celery タスクキューを導入し、遅い処理を利用者に体感させないようにする

Google Hangouts Chat にプログラムからメッセージを送信する

Google ハングアウトの後継のチャット(インスタントメッセージング)サービス、Chat では、Webhook エンドポイントを使うことでとても簡単にチャットルームへのメッセージの送信ができます。 メッセージの送信に、チャット用の大規模なアプリ開発は不要です。Python でも curl でも JS でも、3行ぐらいでメッセージの送信ができます。 Webhook エンドポイントの作成 1. Chat を開く https://chat.google.com/

Google Hangouts Chat にプログラムからメッセージを送信する

テキストエディターの複数行同時編集で仕事がはかどる

普段、業務でお使いのテキストエディターは、複数の行を一度に編集できる機能がついているかもしれません。 複数行の同時編集を使いこなせば、エンジニアでなくても普段の業務の効率を上げられて便利です。 エディター 非エンジニアに強くおすすめしたいのが、Microsoft の Visual Studio Code (以下VSCode) です。 Visual Studio というと、Windows用のプログラムを開発するIDEのイメージがありますが、このエディタは「ちょうどよくカスタマイズされた Atom」「無料のサブライムテキスト」「フロントエンド以外もいけるブラケッツ」といったモダンな軽量エディタの様相で、秀丸やサクラエディタの代わりに使うのにちょうど良いです。

テキストエディターの複数行同時編集で仕事がはかどる

DB(MySQL)をネットワーク越しに簡単にコピーする。mysqldump + パイプで。python subprocess の例も

本番環境のデータベース(MySQL)をネットワーク越しに開発環境にコピーしたい時のプラクティスです。 シェル + パイプ よくやるのが、bash等 でパイプを使って流し込む方法です。 ssh で本番サーバ user@production.example.com に接続し、mysqldump を実行。その標準出力を SSH 接続を通して手元まで持ってきます。

DB(MySQL)をネットワーク越しに簡単にコピーする。mysqldump + パイプで。python subprocess の例も

サーバでSSHの通信断してもバッチを動かし続けるため、tmux を使うと便利。nohup より

tmux という、CUI (TUI) 用仮想スクリーンアプリケーションがあり、SSH 越しに Linux を操作する際大変便利です。似たようなものに byobu とか screen がありますが、私は tmux が好きで、よく使います。 便利に使うスクリプト Linux でのシェル起動時、 (.bashrc 等) 下記のスクリプトを起動しています。

サーバでSSHの通信断してもバッチを動かし続けるため、tmux を使うと便利。nohup より

メディアクエリを入れた Style タグつきの HTML メールを各種メーラーで見てみる

Gmail が、2016年末に HTMLメールの style のタグに対応してたということを知ったので、いよいよ style つきの HTMLメールを実用化できると思い、メディアクエリと Flex を含んだ HTML メールを送信してみました。 2017年11月現在の結果として、メディアクエリと Flex は危なそうですが style タグはメジャーな HTML メールで対応していたため、充分に実用的といえます。

メディアクエリを入れた Style タグつきの HTML メールを各種メーラーで見てみる

Django の CRUD ジェネリックビュー (ListView, DetailView, CreateView, UpdateView, DeleteView) の簡単な使い方

Django に最初から用意されているビュー(ジェネリックビュー) を使えば、 オブジェクトのリスト表示 オブジェクトの作成 オブジェクトの詳細表示 オブジェクトの更新 オブジェクトの削除 のWebアプリが簡単に作成できます。 Create, Read, Update, Delete をまとめて CRUD と呼んだりしますが、Django では CRUD に対応した汎用的な基底ビューコントローラが用意されているため、それを継承してビューを作ることで、安全で、読みやすいコードを書けます。

Django の CRUD ジェネリックビュー (ListView, DetailView, CreateView, UpdateView, DeleteView) の簡単な使い方

TORICOの他のブログ投稿

最近の投稿

フィード

RSS / Atom