Svelte 入門 - アクトインディ開発者ブログ
morishitaです。 今回は JavaScript の UI フレームワーク Svelte を紹介します。 アクトインディでは今の所、フロントエンドフレームワークとしては Vue.js を使っていますが、これもなかなか良さそうだと思ったのでちょっと触ってみました。 プロジェクトの初期化から、次を使えるようにするまでを書きたいと思います。 typescript pug sass jest eslint Svelte とは Web フロントエンド開発のための UI フレームワークです。 2019 年にリリースされた Svelte3 で大幅にアップデートされたようです。Vue の SFC によく似たマークアップ、スクリプト、スタイルを１ファイルに記述する Svelte コンポーネントとしてアプリケーションを実装します。 ライブラリではなくコンパイラとして働き、ビルドするとブラウザで実行できる
Kubernetesの導入で考えたこと、一緒に導入したもの - アクトインディ開発者ブログ
morishitaです。 yamamotoが次のエントリで紹介しましたが、いこーよを Kubernetes 上で運用し始めて3ヶ月になろうとしています。 tech.actindi.net まあトラブルもありますし、やってみてEC2で運用していたのとは勝手が違うところに苦労しつつですが、移行してよかったと思っています。 移行前の状況 いこーよは弊社のメインサービスであり、最も長くメンテナンスを続けているシステムでもあります。 トラブルが発生するとご迷惑をおかけするユーザが多いサービスでもあります。 そのため、とりあえず落ちずに稼働しているしということで、改善のためにインフラに大きく手を入れることには及び腰になっていました。 この数年はサービスの成長にともない現れるシステムの綻びをちょっとづつ改良しながらいこーよを支えているという状況でした。 いこーよの姉妹サービスであるいこレポでは、Rail
AWS CDKでLambdaをデプロイしてみた。Layer付き。 - アクトインディ開発者ブログ
morishitaです。 このエントリはアクトインディアドベントカレンダー2019の3日目です。 adventar.org CDK、便利ですね。 これまで、Lambda は Serverless Framework を使って開発してきたのですが、CDKでやるとどんな感じか試してみました。 作ったもの 習作として、テキストをクエリパラメータで送ったら、QRコードが返ってくるAPIを作ってみました。 QRCode Generator 作成するリソースとしては次の通りです。 Lambda 関数 Lambda Layer API Gateway なお、Lambda関数もCDKのコードもすべて Typescript で実装しました。 Lambda 関数の実装 APIの本体である Lambda関数のコードは若干雑ですが次の様に実装しました。 // eslint-disable-next-line im
NuxtアプリケーションをJestでテストする - アクトインディ開発者ブログ
morishitaです。 このところNuxtのSPAを作っていました。 次のエントリで紹介したものに手を入れていたのですが、このときにはテストを書いていませんでした。 tech.actindi.net 今回はちゃんとテストも書こうと思ってやってみました。 いくつかすんなり行かず試行錯誤した部分があるのでそれを書こうと思います。 Nuxt SPAのテスト SSRを含まないNuxt SPAアプリケーションの構成要素は大雑把に次を含んでいます。 コンポーネント ページコンポーネントから使われる構成要素を実装したVueのSFC1 ページコンポーネント ルーティングとひも付きページを構成するSFC Vuexストア クライアントサイドでデータを格納しデータフローを制御するモジュール PluginやMiddleware Nuxtからフックされるモジュール その他ユーティリティ的なモジュール 他のコンポー
Nuxt.jsのネストした動的ルーティングで困ったので調べてみた - アクトインディ開発者ブログ
morishitaです。 SPAモードで動作するNuxtアプリケーションでネストした動的ルーティングの動作が思ったのと違ったので調べてみました。 やりたかったこと Railsのノリで次のようなパス階層をNuxt.jsでやりたいと思いました。 パス 説明 / サイトトップ。 /groups/:group :groupに対応したグループの詳細。 実際には所属メンバーの一覧 /groups/:group/members/:member グループ:groupに所属する メンバー:memberの詳細。 ※ :group、:memberはそれぞれのID（自然数）です。 複数のグループが存在し、そのそれぞれに所属するメンバーがいるというよくあるアプリケーションです。 期待したこと 公式ドキュメントの動的でネストされたルートを参考に次のようなファイル群を作りました。 pages/ ├── index.vu
TypescriptのGASをJestでテストする - アクトインディ開発者ブログ
morishitaです。 時々、業務で使うツールをGASで作ります。 これまでのものはキャンペーン対応のものなど使い捨てとまでは言わないまでも、短い運用期間を想定したものでした1。 サービスレベル的にはベータレベルですが、少し運用期間が長くなりそう、かつプロトタイプ性が強くて変更が継続しそうなツールを作ることになったので、ちゃんとテストしようと思ってやってみました。 試したもの 次の要素を含むGASのプロジェクトでJestのユニットテストを導入しました。 @google/clasp 2.1.0 jest 24.8.0 Typescript ついでにこれも。 eslint 6.0.1 + @typescript-eslint/eslint-plugin 1.11.0 紹介するサンプルコードはこちらです。 gas-ts-jest-eslint-sample セットアップ 何はともあれ、必要なN
Stripe ＋ Vue.js による決済フォームの実装 - アクトインディ開発者ブログ
morishitaです。 先日、決済サービス Stripeについて書きました。 tech.actindi.net 今回はVue.jsとStripeを使ってクレジットカードの決済フォームを実装したのでご紹介します。 なおこのエントリのコードはTypeScriptを使っています。 HTML部分は Slim または Pug を使っています。 Stripeが提供するもの StripeではCheckout.jsというJavaScriptのスクリプトが用意されていて、ほとんどコードを書かなくてもクレジットカードフォームを作ることができます。 ですが、デザインの自由度を重視すると自前で実装することになります。 その場合にはStripe ElementsというJavaScriptのUIコンポーネントを組み込んで実装します。 これを使えば、クライアントサイドでできるカード番号のベリファイとか不正な有効期限の
AlexaスキルのServeless Frameworkテンプレートを公開！ - アクトインディ開発者ブログ
morishitaです。 先日のAlexa スキルアワード2018で「子育て支援部門賞」と「世の中あかるくしてくれ賞（株式会社TAM）」をいただきました。 tech.actindi.net 参考リンク Amazon.co.jp: Alexaスキルアワード2018受賞作品: Alexaスキル Alexaスキルアワード2018受賞作品の発表 : Alexa Blogs それを記念して、「いこーよのおでかけナビ」で使っているライブラリ、設定を Serveless Framework のテンプレートとして公開します。 github.com このエントリではそのテンプレートの特徴を説明します。 Seerverless ＋ Webpack ＋ Typescript Alexa スキルのバックエンドを Lambda（Node.js v8.10）で開発する前提となっています。 実装言語は Typescri
ssml-builderでらくらくセリフ実装 - アクトインディ開発者ブログ
morishitaです。 Alexa スキル「いこーよのおでかけナビ」で VirtualAlexa の次に使っているライブラリ ssml-builderを紹介します。 tech.actindi.net ssml-builder ってなに？ Alexa スキルの開発では、スキルに喋らせるセリフの組み立てをする必要があります。 強調したいこのセルフの前にちょっと間を取りたいなとか、元気良さを表現するために 声を大きく、少し早口で喋らせたいという場合があります。 そのような発声の細かな調整は Speech Synthesis Markup Language (SSML) というマークアップを利用すれば可能です。 Alexa で使える SSML は音声合成マークアップ言語（SSML）のリファレンスに書かています。 SSML は XML ベースのマークアップ言語です。 開始タグと終了タグの対応を間違
Google Apps ScriptsでTypescriptが超簡単に使えるようになった！ - アクトインディ開発者ブログ
morishitaです。 Cloud Functions と並ぶ(?)Google のサーバレスな JavaScript 実行環境といえば Google Apps Scripts（GAS）です。 GAS ってあの Excel で言う VB スクリプト環境のようなものでしょう？ と思ったあなた！ このエントリでその認識が変わると思います。 以前は使いやすいとは言い難かったGASですが、最近は使いやすくなってきました。 といっても、GAS 自体がアップデートされたのではなく周辺ツールが整備が進み開発・運用しやすい状況が整ってきたからです。 そして、なんと最近Typescript でとても実装しやすくなったので、それをご紹介したいと思います。 google/clasp 以前の GAS は Web エディタ上でしか実装できず、コードを VCS で管理することもままならない状況でしたが、Google
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
