こんにちは、Quipper iOS エンジニアの @manicmaniac です。 現在スタディサプリ iOS アプリ開発チームのエンジニアリングマネージャをしています。 今回はスタディサプリで長らく使われていた React Native のコードを Swift に書き換えた話をします。 実は React Native から Swift への置き換え自体は半年ほど前に完了していたのですが、ブログに記すのに時間がかかってしまいました。 スタディサプリにおける React Native の利用 Quipper では 2017年ごろから React Native を iOS / Android アプリ開発に利用し始め、スタディサプリでは 2018年3月ごろから徐々に React Native を iOS アプリケーション開発に導入していました。 iOS 版スタディサプリの、git から取り出した

フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5

※この投稿は米国時間 2021 年 5 月 7 日に、Google Cloud blog に投稿されたものの抄訳です。 2021 年用に更新: この投稿には、Google のホワイトペーパー「パスワード管理のベスト プラクティス」のユーザー向けとシステム設計者向けの両方の最新情報を含む、更新されたベスト プラクティスが含まれています。 アカウント管理、認証、パスワード管理には十分な注意を払う必要があります。多くの場合、アカウント管理は開発者や製品マネージャーにとって最優先事項ではなく、盲点になりがちです。そのため、ユーザーが期待するデータ セキュリティやユーザー エクスペリエンスを提供できていないケースがよくあります。 幸い、Google Cloud には、ユーザー アカウント（ここでは、システムに対して認証を受けるすべてのユーザー、つまりお客様または内部ユーザー）の作成、安全な取り扱い、

Welcome back to TechCrunch Mobility — your central hub for news and insights on the future of transportation. Sign up here — just click TechCrunch Mobility — to receive the newsletter every w

はじめに この記事タイトルに興味をもって読み始めていただいている方の多くは、ソフトウェアエンジニアとしてチームで開発をしていたり、エンジニアリングマネージャーとしてチームビルディングやマネジメントをされている方なのではないかと思います。 実際、この記事を書いている加藤も、リクルートライフスタイルのデータプラットフォームグループ (以前は CETチーム と呼ばれていました) に所属するデータエンジニアとして、データ活用のための基盤開発・運用を行っている一人です。また、担当している社内データプロダクトのプロダクトマネージャーも兼任しています。 本記事では、自分の所属している DevOps チームを「イケてる DevOps チーム」にするために取り組んだ内容や気づいた点をお伝えしたいと思っています。 目次 はじめに 「イケてる」DevOps チームってなに？ Four Keys とは なぜ Fo

ZennではフロントエンドにNext.jsを使っています。もともとはVercelで動かしていたのですが、2021年3月にGoogle Cloudに移行しました。今回は移行を決めた理由や、具体的な構成、移行作業などについて書きたいと思います。 なぜ移行したのか Next.jsのデプロイ先としてVercelは圧倒的に優れています。ISRやImage OptimizationといったNext.jsの強力な機能をサーバー側の追加設定なしで使用できますし、CDNでの静的ファイルのキャッシュなども特に意識しなくてもいい感じにやってくれます。 Vercel以外にデプロイするとなると、Next.jsの一部の機能がうまく動かなかったり、パフォーマンス・チューニングを自分で頑張る必要があったりと自分で面倒を見なければならない部分が多くなります。 しかし、Zennのケースでは以下のような理由からVercelから

先日、Next.jsのISR（Incremental Static Regeneration）について書きました。 ISRは非常に強力な機能なのですが、セルフホスティングでNext.jsを動かす場合には色々と使うのが難しかったりします。この記事ではその理由とCDNを使ってISRと似たような挙動を実現する方法を紹介します。 Next.jsのISRをVercel以外で動かすのは難しい Vercelは自社でメンテナンスしているNext.jsを簡単にデプロイできることを大きな強みとしています。Vercelにデプロイする場合、ソースコード上で決められた書き方さえすれば、Vercel側の追加設定なしでISRを利用できます。 しかし、Vercel以外のプラットフォームにデプロイするとなると途端に話がややこしくなります。 Next.jsのISRはキャッシュしたHTMLをファイルシステムに書き込む仕様になっ

みなさんローカル環境での開発時は必要に応じて「自己署名入り証明書」（通称：オレオレ証明書）を作成していると思います。 ほとんどは主にopensslなどを使って作成していたりすると思いますが、オプションが複雑で毎回ググったり、そもそもopensslのバージョンの問題などでコマンドがコケることもしばしばあるのではないでしょうか。僕だけですかね（苦笑） 日頃からサーバーサイドのことをやっているわけではないので結構ストレスを感じながらやっていましたが、今回ServiceWorkerをいろいろ検証（「Workbox + webpackでServiceWorkerのオフラインキャッシュと戯れる」、「ServiceWorkerのキャッシュ戦略を考える」を参照）するにあたって調べたところmkcertというツールを発見。使ってみてものすごく簡単だったのでオススメしたいと思います。 github インストール

役員退職金とは？　事前の対策が必要になる理由とメリット 役員退職金とは、退職をした役員に対して会社が支払うお金のことだ。この役員退職金は支払われる目的によって、以下の2種類に大きく分けられている。 中小企業の一般的な基準で考えると、いずれの退職金であっても5,000万円以上の高額にのぼるケースは珍しくない。具体的な金額は在任年数によって変わってくるが、場合によっては1億円前後の退職金が発生することもあるだろう。 会社がその金額を負担すると考えれば、事前の対策が必要になる理由が分かるはずだ。タイミングが悪ければ会社の資金繰りが一気に悪化し、財務を圧迫することで後継者に大きな迷惑をかけてしまう。 また、役員退職金を支払うことは以下のようなメリットにもつながる。 詳しくは後述するが、役員退職金は役員報酬と比べると税制面で大きく優遇されている。また、賞与とは異なり、その全額が社会保険料の対象外とな

オフェンシブセキュリティ部の山崎です。サーバサイドレンダリング（SSR）の導入によってSSRFが発生する問題を見つける機会があったため、本記事では実例を交えながら紹介したいと思います。 サーバサイドレンダリング（SSR）とは？ 本記事で扱うSSRとは「サーバ上でHTMLを出力すること」を指しています。ただしerbやjspのようなテンプレートからHTMLを出力するのとは異なり、一般的には以下のようにクライアントサイドレンダリング（CSR）の文脈で使われることが主です。 近年のVue.jsやReactを代表するようなWebフロントエンドフレームワークはブラウザ上で動的にDOMツリーを構築して画面を描画（CSR）するのが主流となっています。これによってページ遷移を挟まずユーザ体験のよいシングルページアプリケーション（SPA）が作ることができるというメリットがあります。 ただ、単純なSPAにはデメ

最近Next.jsのISR（Incremental Static Regeneration）を耳にする機会が増えてきました。Zennでも2021/3/17時点で記事や本などの一部のページでISRを採用しています。 ISRとは何か ISRを使うことで、動的なコンテンツを含むページも静的ページとしてCDNにキャッシュすることが可能になります。Next.jsのISRはドキュメントに書かれているようにstale-while-revalidateという考え方でキャッシュが行われます。 具体的には、リクエスト時にページのキャッシュを作成し、次のアクセスではキャッシュされた古いデータを返します。その裏で次のアクセスに向けてキャッシュが再生成されるというイメージです。 これによりユーザー投稿コンテンツであってもCDNにキャッシュしやすくなるというわけです。 Next.jsでのISRの実装 デプロイ先がVe

この記事について SWR について色々と学んだので、その知見をここで共有したいと思います 💪 ※ 基本的に以下の公式サイトの情報を参考にしています 📖 そのため、この記事で出すサンプルコードなどは主に上記の公式サイトから引用させてもらっています。予めご了承ください 🙏 SWR とは何か？ SWR は、Next.js を作っているVercel 社が開発しているデータフェッチのための React Hooks ライブラリです。"SWR"と言う名前は、 stale-while-revalidate の頭文字をとって名付けられています。そのため、SWR はstale-while-revalidateに基づいた処理と設計になっています。 stale-while-revalidateについて解説したい所ですが、解説するとすごく長くなってしまうため、ここでは「 キャッシュをなるべく最新に保つ機能 」

今回は複数のcanvasタグを合成し、最終的に1つのcanvasに画像として結合する処理を取り上げたいと思います。 ↑こんな感じで画像を表示したcanvasと、キャプションを表示したcanvasを合成します。 Canvas合体 サンプル ソースコード 解説 大雑把なロジック canvasを画像に変換 素材 参考ページ Canvas合体 サンプル 以下のページから実際にサンプルを実行できます。 miku3.net 「＝」ボタンをクリックすると左2つのCanvasを合成し、一番右側のcanvasに合成結果を出力します。 消しゴムボタンをクリックすると合成結果を削除します。 ソースコード <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CANVAS合成</title> <link rel="stylesheet" href=

🚀 Don’t miss our biggest update of the summer on July 17, straight from our CPTO Jeff Chow. Save your spot

【シリコンバレー=奥平和行】米グーグルがインターネット利用者の閲覧履歴を追跡する技術の使用制限を強化する。広告会社などが一人ひとりの情報を使って広告を配信する技術を排除する方針だ。米アップルもプライバシー保護を強化しており、配信対象を絞り込むターゲティング技術を高度にすることで成長してきたネット広告の転機となりそうだ。グーグル幹部が3日、公式ブログで「ウェブサイトを横断して個人を追跡する代替技

追記 Vertical SaaS記事、第二弾が公開されました。 — 私たちZenportは国際貿易(国際物流)のJobを解決するためのSaaSを提供している.これは業界特化型のSaaSであり、Vertical SaaSという種に分類されるものだ. さて、このVertical SaaSであるが、業種を問わずに導入されるHorizontal SaaSとは求められる戦略がいくつかの点で異なってくる. そこで今回はVertical SaaSに求められる戦い方について考察を述べたい. Vertical SaaSとHorizontal SaaSの違いまずはVertical SaaSの特徴について説明しよう. 先述したとおり、SaaSは大きく二つに分けられる.一つは業界を問わずに導入されるHorizontal SaaSであり、経理、労務、マーケティング、セールスなどをサポートするソフトウェアがこれに当た

2021/02/24の11時頃〜1時間ほどzenn.devにアクセスしづらい・アクセスできない問題が発生していました。その後も3時間ほど一部のページへのアクセスができない状況となっていました。Zennに投稿してくれた方、見に来てくれた方、ご迷惑をおかけしてすみませんでした。 今回の障害は学びが多かったので、個人の記事として残しておくことにします。 原因 今回の障害は、使用しているクラウドサービスではなく、Zenn自体に原因がありました。 1. KaTeX記法により生成されるHTMLが思った以上に大きかった ZennのマークダウンエディターではKaTeX記法をサポートしています。例えば、$a\ne0$と書くとa\ne0と表示されます。 KaTeXはサーバーサイドレンダリングをサポートしており、KaTeX記法からの数式のHTMLへの変換はサーバーサイドで行なっていました。DBにはマークダウンだ

「Reactに書き換えないとこのプロダクトチームは緩やかに死を迎えます」 こんにちは、ログラスのエンジニアの佐藤です。 昨年に入社して早2ヶ月経ちましたので、入社記事でも書いていきます。 「Reactに書き換えないとこのプロダクトチームは緩やかに死を迎えます」 と、CTOに言ったのは昨年末くらいでした。 入社してまだ1ヶ月経たないくらいです。 ログラスは創業当時からAngularを使って開発をしていました。 正社員のフロントエンドエンジニアは自分が入るまではいなくて、業務委託の方と協働しながら開発をしていました。 そのプロダクトをゼロからこの創業期のタイミングでReactでフロントエンドを作り直そうというお話です。 今回のお話はあくまでログラスのプロダクトチームの目指す理想像とAngularの相性が悪いだけで、AngularがReactより劣っているわけではありません。 Angularはフ

Vercelはとても良いサービスなのだが、ProプランだとBandwidth 〜1TB/月の制限があり、それを超えるとEnterpriseプランに入る必要がある 追記: 従量課金が採用された！Vercel Proプランの料金体系の変更とNext.js での対策に関して Next.jsのget○○Propsの中で重い処理をやると制限に引っかかる可能性がある。Vercelが内部的にはAWS Lambdaで動いており、そもそもLambda側の制限が厳しいという側面がある。 とはいえNext.jsをVercel以外で動かした場合にIncremental Static Regeneration（ISR）が実現できるのかあまり分かっていない そんなわけでVercel以外でNext.jsのISRをやるとどうなのかの情報をまとめてくスクラップ。 何かご存知の方はぜひコメントをお願いします🙏