文化祭で滞在状況記録システムを運用しました
文化祭からはや 3 ヶ月。ずっと書きたいとは思っていたんですが、すぐ定期試験がやってきたり修学旅行に行ったりしてるうちにズルズル来てしまいました。このまま年を越すわけには行かないので、重い腰を上げて書き上げてしまおうと思います。 文章力が皆無なので読みづらい箇所があったらごめんなさい。質問等ございましたらお気軽にどうぞ！ 1. システム概要 感染症対策の一環として、主に各展示の同時滞在者数の抑制を目的として導入したシステムです。 文化祭への来場者全員にリストバンドを配布します。各リストバンドには個別の QR コードがプリントされており、各展示の入室時及び退室時に、展示のスタッフが Web アプリ上でスキャンを行い、来場者の入退室時間を記録します。 主な機能として以下が挙げられます。 同じ時間に同じ教室にいたのがどのリストバンドをつけていた来場者であるかが分かるため、万が一新型コロナウイルス
フロントエンドとSPA職人の目指したものの歴史と概略
年末年始にフロントエンド論みたいな記事をいくつか見たが、僕ら古のSPA職人がやってきたフロントエンドという職域と目指していたものが失伝しかけている気がするので、ここに時代ごとに何を考えていたか、雑に書き殴る。 注意点として、 2004から始まるが、自分がプログラミングを始めたのが2010, 業務としてコードを書き始めたのが 2012 なので、解像度が高いのはそれ以降になる。 tl;dr 2004: 動き出す HTML 2011: 構造化のはじまり 2015: 贅沢品としてのSPAとコミュニティ分化 2017: 貧者のSPA 2019: 守破離としてのパフォーマンス 2004: 動きだす HTML AJAX の時代。要は XMLHTTPRequest で取得したコンテンツに応じて、動的書き換えをDOM書き換えを行うこと。今では名付けるほどでもない操作だが、HTMLが静的なものをやめたことは、
「SPAのタブ永遠に開きっぱなし問題」を更新ボタンを設置せず解決した - 橋本商会
こんにちは。強いUIはボタンを捨てるをスローガンにScrapboxを開発しています。shokaiですshokai.icon Helpfeel Advent Calendar 2022の5日目の記事です 昨日はHelpfeelエンジニアのyado.iconさんでした 採用面接中にチャーハン・ピラフ判定器とスタバ警察botで盛り上がる会社に入った | 株式会社Helpfeel ヨコハマハウスフラペチーノがエンジニア採用の役にたった？みたいで良かったです <a>タグの挙動を工夫する事で、Scrapboxからみたいなボタンをなくしました 更新ボタンの役割は2つ 更新がある事を教える 押すとアプリが更新される Scrapboxも昔こういうメニューがあった 今はもう無い では解説ですshokai.icon SPAのタブ永遠に開きっぱなし問題とは？ SPAとstaticなwebサイトの違い static
ホテルの客室検索APIのアーキテクチャ設計時に考えたこと
作ったもののイメージ ホテルの客室検索APIとは、チェックイン日やその他の条件を入力として受け取り、マッチするホテルの客室を返すものです。以下の画像はExpediaのものですが、赤枠で囲っている部分（他にもたくさんある）が入力になります。2022年4月頃に無事リリースされました。 この検索APIを構築を任された際に、何を考えて設計していったのかを以下に示していきます。 顧客からの要望 顧客の会社は当時エンジニアがおらず（やりとりしている社長は元エンジニアだが）、これまでも私と仕事をしたことがあったので依頼が来ました。顧客と密にコミュニケーションを取りわかったのは、以下のような要望でした。 このAPIは自社サービスとして第3者（要契約）に使ってもらえるようにしたい 完全に一般公開ではなくちゃんと契約を結ばないと利用できないようなもの 検索条件を柔軟に、かつ使いやすい感じで指定できるようにした
(追記あり) 10億円資産ができたときに知っておいたほうがいいこと
「人生のゴールは10億円、なぜなら運用だけで年5000万円くらい入るから減らなくなる」みたいな論がよくあるが、たしかに10億円の資産を作るのは一つの基準だと思う。 そして、ベンチャーなどを起業して、10億円以上手に入れる若者なども増えてきている。しかし、さすがに10億円を手に入れたときの対処法というのはネットには全く情報がない。 増田は、富裕層向けのサービスを提供しており、比較的多くの富裕層と付き合いがあり、そこで得た知識があるので、ここで共有していきたい。 資産運用資産運用だが、10億円あるとどうするか・・・という点について。 これはもう人それぞれだが、多いパターンとしては クレディ・スイスなどの外資系プライベートバンクに一任する債権でクーポンをもらう、S&P500、全世界のインデックスなどを買う、一部を金や暗号資産にするなど、自分で分散するなどが多い。正直、このあたりは「個別銘
SPAはコストが高いのか | foo-x
なぜ僕が「SPAはコストが高い」と考えているのか を読みました。 「反論お待ちしています」とのことなので、書いてみます。 結論としては、 コストが低いのは慣れているほうだよ。 どっちも使えるならSPAのほうが低いよ。 です。 前提 元記事で挙げられている前提をまとめます。 用語 SPAとは、クライアント側でビューを構築する方式を指す MPAとは、サーバ側でビューを構築する方式を指す 背景 エンジニアのスキルはあまり高くない 開発期間は1.5年未満 PMFを意識したフェーズであり、チャレンジを繰り返す ログイン機能が存在するサービスを作る コストの定義 エンジニアの採用のしやすさ サービス開発の 初速 サービス開発の 継続性 分業のしやすさ、手伝ってもらいやすさ web標準の挙動の実現のしやすさ セキュアなデータを流出する可能性の高低 バグがあった時の気づきやすさ / 対応のしやすさ ドキュ
【汎用ソフトスキル】本番障害対応のやり方
この記事の目的 障害対応をなんだかんだでやり続けているので、その知見をアウトプットにしたくなった。 想定読者 今まさに障害が起こって、対応しなきゃいけないけどどうしようかパニクって「障害対応」でググっちゃった人 システム運用任されたけど、何かあった時に何すればいいのかわからん、という人 障害復旧のために本番環境触るのが怖くてたまらない人 想定読者ではない人 障害対応になれてる人 自分なりのルーチンができているなら多分それが一番いいと思います 開発者が自分1人の会社で働くエンジニア or それに近い環境の人 組織やら意思決定やらの話が入ってきます 書いている人のスペック(参考) 歴５年くらいのなんちゃってフルスタックエンジニア 普段は Node.js / React.js or React Native あたりでアプリ制作をしている。たまにインフラぽちぽちする。(I ♡ aws-cdk) ３
仕事でSendGridの安いEssentialsプランを使うのは辞めよう - Qiita
ある日突然メールが送れなくなることがあります。 Microsoft Azureからメール送りたい Microsoft Azureには、何故かメール関連のリソースが全く存在しません。 メールサーバみたいなサービスはありませんし、自力でのSMTP設置も非推奨です。 公式にもSendGridを使えという立場みたいです。 SendGridとは SendGridはメール送信サービスです。 適当にPOSTするだけで、それをメールにして送ってくれるというナイスなサービスです。 curl --request POST \ --url https://api.sendgrid.com/v3/mail/send \ --header "Authorization: Bearer $SENDGRID_API_KEY" \ --header 'Content-Type: application/json' \ -
ざっくり理解するSRE - Qiita
昨今では自社のプロダクトやシステムのエンゲージメント向上のために、「DevOps」や「アジャイル」といったキーワードのもと、大小さまざまな企業がシステムやアプリの開発手法の改善を試みています。その中において、最近だと「SRE」というキーワードを聞く頻度も多くなってきたかと思います。 しかしアジャイルやCICDなどと比べ、SREについては「言葉は知ってるけど具体的になんなのかはよくわからない」という方もいるのではないでしょうか？ここではそんな方々向けに、SREの最初の一歩となる概要について、独自の解釈を交えつつまとめていきます。 ここで話すこと SREって何？ なぜSREが必要？ SREってどんなことするの？ ここで話さないこと SREの技術の具体的なところ（k8sやAPMの導入手順、設定方法など） プラクティスの実践例・具体例（アーキテクチャ、各種設定値、モニタリング指標など） TL;DR
【マジで】サイバー演習シナリオの作り方【怖い】 - freee Developers Hub
「CEOに身代金を要求したい」 こんにちは、PSIRTマネージャのただただし（tdtds）です。この記事はfreee Developers Advent Calendar 2021 18日目です。 freeeにjoinしてから早くも14ヶ月がすぎました。freeeでは毎年10月に全社障害訓練をしていて、昨年は入社したてで右も左もわからないままAWS上の本番環境（のレプリカ）に侵入してDBをぶっ壊す役目をさせられたのも良い思い出です*1。 で、上の「CEOに身代金を要求したい」という物騒な相談は、今年の訓練計画の話です。話を持ち掛けてきたのはCIOの土佐。昨年は主要サービスが落ちて、開発チームが対応にあたる中、ビジネスサイドも顧客対応などで訓練参加しましたが、今年はさらに、経営サイドまで巻き込もうというゴール設定がされたわけですね。腕が鳴ります。 ゴールは「CEOに4BTCを要求する」 ゴー
Next.jsのISRを使ってスプレッドシートをデータソースにして業務フローを変えた話 - パンダのプログラミングブログ
Next.jsのISRを使って業務フローを変えた話 この記事は Next.js アドベントカレンダー 2020 の最終日の記事です。 本記事では、Next.js の ISR の機能を使って業務フローを変えた話を紹介します。Incremental Static Regeneration（以下、ISR） とは、Next.jsアプリケーションをビルドしてデプロイした後も、特定のページのみ定期的に再ビルドする機能です。 ISRでのリクエスト先は Google Apps Script（以下、GAS）にしました。GAS でスプレッドシートのデータを返却する API を作成したので、コードも併せて紹介します。 作ったものは書籍の一覧更新を自動化するもの 開発しているサービス「弁護士ドットコムライブラリー」を紹介します 私は仕事で 弁護士ドットコムライブラリーというサイトを開発しています。このサイトは弁護
文化祭入退場・混雑管理システム "CAPPUCCINO" 開発・運用記
この記事は、文化祭実行委員会に所属する[1]現高校 3 年生 3 人で文化祭の入退場混雑管理システム「CAPPUCCINO」を 2 年間に渡り開発し、実際に運用した記録を残したものです。 ＊この記事は以下の 3 名による共同執筆です 著者・開発者: すばる (@su8ru / Twitter:@su8ru_) 高校３年生。普段は TypeScript に使われながらウェブフロントエンド技術で遊んでいます。 たけ (@takeno_hito / Twitter:@Takeno_hito) こうこうさんねんせい。コーディングよりはゲームのほうが好きです。上下二人に揉まれながらも一応リーダーをやってました。 ふわわあ (@fuwa2003 / Twitter:@ibuki2003) 高3。Vimmer。半言い出しっぺなのに後半コード書いてないとかで最近は肩身が狭い思いをしています。 1. CAP
Go で使う Makefile の育て方
Go を使ってプロダクトを作る時、Makefile を使ってビルドを指定することが多いです。 理由としては、 バージョン情報などを埋め込むのに都合がいい 複数のバイナリを吐き出す時に都合がいい Go のビルドオプションを指定するのにいろいろあって整理しておきたい 事前にコードジェネレータで書き出す部分があり、それを考えると Makefile などで整理したい などなどです。なので今回はプロジェクトが大きくなっていく中でどういう Makefile の書き方をしているか、というのをご紹介しようと思います。 サンプルとして、今回のプロジェクトでは gRPC を使ったチャットサービスのサーバーとクライアントを作ることにします。リポジトリは https://github.com/rosylilly/gochat に置いておきました。 Step 1. バージョン情報を埋める 今回はサーバーとクライアン
バウンスしすぎて Amazon SES から追放された俺たちは Mailgun と SendGrid に国を作ることにした - ANDPAD Tech Blog
これは何 どのように技術選定してますか。よく聞かれます。SREチーム 鈴木心之介 です。しかし説明が難しい。難しいですが説明の助けになってほしく思い、技術選定を文書化した DesignDoc から1枚を公開してみました。 DesignDoc とは、ある程度の大きさや複雑さがあり一言で説明の難しい技術選定について、文書化したものです。これを通じて、技術選定をどのように行うか組織内に広めようとする試みです。2021年1月頃から始めています。 題材は、メール配信の冗長化をRailsで実現した tech.andpad.co.jp を、インフラ視点から技術選定した DesignDoc です。このメール配信SaaSの選定は2019年末頃に実施したもので、DesignDoc の取り組みを始めていなかった頃でした。時が経ち、ソースコードやSaaSの構成からは意図を読むことが難しく「なんじゃこれ」って質問を
フロントエンド開発にtextlintを導入して運用している話
フロントエンド開発にtextlintを導入して運用している話 2021.07.13 Tue. SaaSプロダクトのフロントエンド最前線@オンライン 近藤 大介 @diescake SmartHR プロダクトエンジニア ／年末調整チーム／主にWebフロントエンド（React + TypeScript） 2020年1月SmartHR入社 SmartHR年末調整チームを住処にして、2020年の年末調整の管理画面リニューアルから姿を現す クラフトビールをポチっては冷蔵庫に積む習性を持つ 経緯・モチベーション SmartHRの開発グループは、 フィーチャーチーム構想を掲げ、 クロスファンクショナル化の取り組みを進めています クロスファンクショナル化の一環で 文言（UXライティング）と向き合い始めたdiescakeであったが… 単純な表記揺れ・ルールに起因する不備を一掃したい PRでSuggested
定期実行するLambdaが「起動しなかったこと」を検知するCloudWatch Alarmを作る | DevelopersIO
「1時間に1回起動するLambda」や「1日に1回起動するLambda」といった定期実行するLambdaが「起動しなかったこと」を検知するCloudWatch Alarmを作ってみました。 Lambdaを定期実行する仕組みをよく作ります。 1時間に1回起動する 1日に1回起動する これらのLambdaが「起動しなかった場合」に通知が欲しくなったので、CloudWatch Alarmを作ってみました。 実際にLambdaが起動しない事象に遭遇したことは無いですが、このAlarmがあると、「ちゃんと起動しているよね？」というモヤモヤが解消されます。万が一に気づける保険ですね。 おすすめの方 定期実行するLambdaが「起動しなかった場合」のCloudWatch Alarmを作りたい方 定期実行するLambdaとCloudWatch Alarmを作成する sam init sam init \
Electronで組み込み端末向けアプリケーションを開発し3年間運用してみて
組み込み端末のアプリケーションに Electron を採用し開発・運用を行っています。 継続的な機能追加やトラブルサポートを行いながら 3 年が経過したので、Electron を採用した経緯や結果を経験を交えながら共有したいと思います。 組み込み案件自体が初めてでしたのでその話も入っています。 約 700 台ほど導入されており、なかなか大きな案件での採用と思いますので参考になれば幸いです。 ※Electron の基本的な説明は割愛します。 システムについて 一般的に「受付精算機」などと呼ばれ、店頭に何台か並べて設置して自動で受付・精算を行うシステムです。 ホテルの受付端末のイメージです。ハード的にはセルフレジにも近いです。 筐体自体は他社が用意し、弊社はその上に載せる GUI アプリケーションのみを担当しました。 機能 主な機能として 来店受付・整理券発行 予約チェックイン チェックアウト
私がサーバレスに全面移行した理由はセキュリティです。セキュリティパッチも当てず放置してしまっていました。
私がサーバレスに全面移行した理由はセキュリティです。セキュリティパッチも当てず放置してしまっていました。 本記事は「サーバを一度構築したら、正常にレスポンスがあるうちは放置する」ような運用をしている方に向けた記事です。 私は学生時代に、「パーツあげるからサーバつくって運用してみなよ！！」と仲のよかった教授がいってくれたことでサーバ構築をはじめました。CentOS入れて、Apache入れて、よくわからないけどiptablesをoffにしたらすごい公開できた！！という体験はとてもよかったです。 その後、アプリをつくるようになって、レンタルサーバではスペックが足りなくなったので、お名前ドットコムでVPSを借りて、AWSが登場したら「すごい！構築したインスタンスをそのままスケールアップできる！！」と勢いのままEC2に移りました。Ansibleで構築自動化のレシピをつくって構築して、運用という名の
React + microCMSで実現するZOZOTOWNキャンペーンページのノーコード化 - ZOZO TECH BLOG
はじめに 2020年新卒入社で、現在ZOZOWEB部所属の武井です。ZOZOTOWNのWebフロントエンド開発を担当しています。私は入社以来オフィスに2度しか出社したことがありませんが、そのうちの1度はスタッフインタビュー記事の撮影のときでした。アートがたくさんある素敵なオフィスですが、それ以降出社できていません。まさか新卒1年目からフルリモート勤務をすると思っていませんでしたが、先輩スタッフが仕組み作りをしてくださっていたおかげで快適に働けています。 さて、本題です。ZOZOTOWNではタイムセール、ショップ限定クーポン、抽選プレゼントなどのキャンペーンを期間限定で実施しています。このキャンペーンをより際立たせるためにキャンペーンページを作成し、ホーム画面やメルマガなどを通じてお客様にお届けしています。しかし、このキャンペーンページの作成が必要になった場合、エンジニアが都度実装しており、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
インクリメンタルに新しい技術を取り入れる方法。TypeScriptへの移行を例にしたプロセス
