手順共有サービス「私の手順」を作りました。 本記事では背景から開発の流れ、技術選定などを記載していきます。 背景 ほとんどの行動には手順があるかと思います。最初にこれをやって、次にあれをやって、最後にこれをやる。 テキストコミュニケーションで以下のような説明をしたことがある方は多いのではないでしょうか。 仕事に限らず、料理はもちろん、サウナのルーティンも1つの手順です。 そんな手順をいい感じに共有できないかと思い、本サービスを作りました。 以下、詳細について説明していきます。 デザイン Figmaを使ってデザインを作っていきました。 コードをいきなり書き始めてもよいのですが、最終形を決めてから進めていきたいと思い、作りました。 技術選定 言語: TypeScript フロントエンド: Next.js バックエンド: Next.jsのAPI Routes インフラ: Cloud Run DB
自社のクラウド環境に侵入され、データベースから経営に欠かせないデータを持ち出される。バックアップも消され、データを取り戻したければ、身代金を支払うよう要求される──企業にとって絶対に直面したくない事態の一つだ。しかしこのシチュエーションをあえて再現し、訓練という形で自社のCEOに身代金まで要求した企業がある。クラウド会計サービスを提供するfreeeだ。 freeeは2021年10月、標的型攻撃とランサムウェアを組み合わせたシナリオを基に全社的な訓練を実施。AWS上のDBからデータを盗み出し、バックアップを消した上で、自社のCEOに社内SNSを通して身代金を要求したという。訓練を主導したのは、製品やサービスのセキュリティ向上を目指す社内組織「PSIRT」だ。 訓練を実施した背景には、情報システム部などのIT部門だけでなく、経営層まで巻き込みたい考えがあったという。同社のPSIRTが取り組んだ
いわくら君が書いてくれた通り 、トラベルブックではFastlyを導入しました。Fastlyについて初めて分かったことがたくさんありました。列挙してみたら30個もあったので、一個ずつ紹介してみることにします。 そもそもFastlyとは そもそもFastlyとはCDNのサービスです。現在では後述するCompute@Edgeを主力としたサーバーレス環境を推していますが、とにかくCDNです。今回は www.travelbook.co.jp ドメイン全てに対して適応し、全てのHTMLページをFastly経由にしました。 もともとVarnishでページをキャッシュしていた部分をFastlyに置き換えることで冗長化・安定化、また、パフォーマンスアップを図ります。 加えて、これまでキャッシュの対象外だったページも、この際TTL付きでキャッシュする、というのが今回やったことです。 詳しくはいわくら君の書いた
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!ニュース を担当しているエンジニアの喜楽です。 今回は、Yahoo!ニュースが取り組んでいるブラウザバック時の表示最適化手法について紹介します。 なぜブラウザバック時の挙動に注目するのか ユーザーがYahoo!ニュースのページを閲覧し、別のページに遷移する方法は大きく分けて以下の2つが考えられます。 (A) リンクをたどってページを遷移する (B) ブラウザーのナビゲーションボタンまたはスワイプ操作によって遷移する 「戻る」による遷移(ブラウザバック) 「進む」による遷移(ブラウザフォワード) Yahoo!ニュースでは総PVのうち一定程度が(B)のブラウザバックまたはブラウザフォワードによるページ遷移時のも
はじめに 最近、Webの記事を見てるとReactだVue.jsばかりが上がっていてJSPやERBの話をしてる人は誰もいません。jQueryの記事ももちろん見ない。 つまり、Webだけ見る限りではほとんどの人がSPAを使ってるように見えます。 私はWeb界隈には居るもののどちらかというとバックエンド寄り、もっというとそもそもWebとか関係ない領域を見る事が多いので、ちょっとキャッチアップを兼ねていくつかの個人プロダクトにVue.jsを採用してみました。 jQueryくらいで頭が止まってたので。サーバサイドもマイクロサービスでAPI化が進んでるのでフロントもそれに合った技術を選ばないとですしね。 というわけで、今回はその中で得た知見というか、従来型のサーバサイドでのWeb開発をしていた人の視点でVue.jsをキャッチアップする流れで書いていきたいと思います。 まあ最終的な結論は正直「これすごく
こんにちは、けんにぃです。ナビタイムジャパンで公共交通の時刻表を使ったサービス開発やリリースフローの改善を担当しています。 今回は Python 製の Web フレームワークとして FastAPI を導入した話をしようと思います。 Python 製の Web フレームワークPython には代表的な Web フレームワークが 2 つあります。 ・Django: フルスタックフレームワーク ・Flask: マイクロフレームワーク Django は大規模開発向け、Flask は小中規模開発向けと言われますが、今回開発したサーバは小規模なサーバだったため、以前は Flask で開発していました。 しかし、どちらのフレームワークを使う場合でも下記のような機能を使おうとするとプラグインやサードパーティの助けを借りる必要があります。 ・OpenAPI ・JSON Schema ・GraphQL ・We
こんにちは、@p1assです。 この記事は、LT 会のために作った Web サービスが何故かバズって Twitter トレンド 1 位 になってしまい、ひぃひぃ言いながら行った負荷対応をまとめたものになります。 スケーラビリティを全く考慮していない LT 会用の雑な Web サービスを、どのように改善していったのかについてまとめることで、個人開発者の参考になれば良いなと思っています。 なお、ここで書かれている内容は Production Ready なサービスを作る上では当たり前なことがほとんどです。本当の高負荷トラフィックを裁くための知見は出てこないので、予めご了承ください。 作った Web サービス「生活習慣の乱れを可視化するやつ」 最初に作った Web サービスを紹介しておきます。「生活習慣の乱れを可視化するやつ」という Web サービスを作りました。 このアプリは Twitter
以下はSimon Holdorf( dev.to/ Twitter / GitHub )による記事、9 Projects you can do to become a Frontend Master in 2020の日本語訳です。 9 Projects you can do to become a Frontend Master in 2020 Introduction あなたがプログラミングの初心者であるか、既に経験豊富な開発者であるかにかかわらず、この業界では、急速な変化に追いつくために新しい概念と言語・フレームワークを学び続けることが必要です。 たとえばFacebookが4年前にオープンソース化したReactは、既に世界中のJavaScript開発者にとって第一の選択肢になっています。 もちろんVueとAngularにも多くのフォロアーがついています。 さらにはSvelte、Next
This is the home of the whitepaper documenting Zoom's planned end-to-end encryption system. The latest released PDF… 現在の実装から今後どうしていくかをかなり詳細に書いていますので、まずはこちらを読んでみることをおすすめします。 Zoom の暗号化/復号Zoom の暗号化/復号はすべてクライアントで行われ、Zoom のメディアルーターは基本的に干渉しないという設計のようです。WebRTC SFU とは異なり、基本的にはリレーサーバのような役割を果たしているようです。 ただしここからがポイントでクライアントが暗号化/復号に利用する鍵は参加者全員が同じものを利用します。さらにこの鍵はZoom サーバが配布します。 鍵自体の変更は一切行われず、1 鍵 1 会議という仕組みのようです
仕事での1対1の日程調整を楽にしてくれるアプリです。Web、iOS、Androidの各プラットホームに対応したアプリがあるのでサクサク使えるはずかと。 ありがたい事にライフハッカーにも掲載された。 実はリリースしたのは去年の10月なんだけど、しばらくAndroidアプリでログインできない不具合があった。この不具合のせいで複数のレビュー1をつけられてしまったのは痛かった。。。内部テスト大事。 2. なぜ作ったか?仕事の面接やミーティングの日程調整がとても面倒だったから。特に、スマホのチャットでの日程調整は地獄的に辛い。 こういった問題を解決する日程調整ツールは国内外にいろいろあるのだけれど、下記をすべて満たすものがなかった。 ・webだけでなくスマホアプリも存在する ・Googleカレンダーと連携する ・予定の候補をいくつかこちらで指定して送ることができる ・予定の候補を選ばなくてもカレンダ
その1. そもそもアイデアが思い浮かばない 遭遇確率 :★★★★☆ どんな壁?:いざWebサービスを作ろうとしても何もアイデアが思い浮かばない 解決策:身近な課題をひたすら探す サービスを作る上では何かを解決する系のアイデアであり、かつ自分が当事者であるとモチベーションも続きやすいです。 自分が普段ネットを使っていて不便だと思うこと、今使っているサービスの不満点、などなんでも良いのでとりあえず書き出してみましょう。 大体この中に自分の技術力でも解決できるような課題が存在します。 もし自分の中での課題が見つからないという場合は、日々Twitterのタイムラインで流れてくる身近な人が抱えている課題をピックアップしてアイデア化するのもありです。 回避策:しょぼいアイデアでも日々書き残していく いざサービスを作るというときにアイデアも出ないし身近な課題すら見つからない場合は、普段からアイデアを無理
Webサイトやスマホアプリでよく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのコードがまとめられたコレクションを紹介します。 フレームワークなども便利ですが、それだけを実装するためのコードなので、非常にシンプルでカスタマイズも簡単だと思います。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 CSSで実装するレイアウト・UIコンポーネント CSS Layoutの特徴 CSS Layoutはよく使われるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。
こんにちは!入社して11カ月目を迎えました。たなぱんだです。 前職ではTV制作ディレクターやアパレル販売員など、人と接する仕事をしていました。 そんな私が入社して1番最初のカルチャーショックは、社員同士のコミュニケーション手段がチャットだったことです。 わたしはテキストコミュニケーションはビジネスメールしか使ったことがありませんでした。 どのくらい砕けた話し方がOKなのか。絵文字は使ってよいのか。メンション(通知)は使ってよいのか。勤務時間外でもメンションしてもよいのか……などなど、今までのコミュニケーションの取り方の違いにとても戸惑った記憶があります。 実際は、クラスメソッドの皆さんはそんな非言語コミュニケーションの壁をもろともせず、年齢や性別、住んでいる場所の違いを乗り越えて活発にコミュニケーションをとっています!(ステキだね) 今回は、私が入社10か月間で得た「テキストコミュニケーシ
CDNフル活用でつくる、高速Webアプリ / Using CDN To Improve Web Performance
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く