Next.jsで多言語対応のサイトを作るのが簡単すぎた件
Next.jsで多言語対応を試みた経緯 以前趣味でブログのRSSを登録するとブログの投稿率をGitHubの草のようなヒートマップ形式で表示でき他のユーザーと継続率を競えるサービス、Blog Friendsを開発しました。 今回のこのサービスをProductHunt（海外の自分が作ったWebサービスやアプリを投稿できるサイト）に提出しようと思い英語対応をしました。 日本語サイトがこちらで、 英語サイトはこちらです。 ProductHuntに提出してみた結果は以下のように12Upvotedでなんとも言えない結果でしたが、多言語サイトを作る上で勉強になったので後悔はしていません。 Next.jsで多言語サイトを作る方法 ルーティングを理解する 公式サイトにもあるのですが、Next.jsで多言語サイトを作る方法として以下の二つのルーティング方法があります。 Domain Routing Sub-p
Chromeに入るRecorder機能の利用と注意点 - 虎の穴開発室ブログ
こんにちは。虎の穴ラボのH.Hです。 今回は先日発表されたChromeの開発中の新機能であるRecorder機能について使用方法や利用する際の注意点などをまとめました。 Recoder機能とは ブラウザのChrome97で追加される予定の機能で、ブラウザの画面上で操作した記録を取得してくれる機能になります。 この記事を書いている2021年11月17日では一般に提供されているChromeの最新版は96となり、開発中の「Chrome Dev」もしくは「Chrome Canary」でRecorder機能を使用することができます。 利用している時の様子はChromeの開発者向けのページに公開されています。 developer.chrome.com 主な機能は以下の通りです。 ・操作の記録及び再実行(リプレイ)できる ・再実行時にパフォーマンスの記録・確認できる ・記録した内容の編集ができる ・操作
‘-‘ という名前の、中身が無いのに70万回ダウンロードされてる謎のnpmパッケージ
– という名前の JavaScript/TypeScript パッケージについて警告を発している記事が話題となっています。 このパッケージ、中身はほとんど空で、Readme と、dev で TypeScript を動かせるようにするライブラリ群を呼ぶ箇所だけのもの。 しかし、この “-” を使っている他の npm パッケージが 50個以上あり、約一年前の公開時からのトータルのダウンロード数は72万回にもなります。 しかし、”-” を読み込んでいるパッケージを見てみても、”-” が必要そうには見えません。 警告記事では、この無名のパッケージが密かに使われるようになった原因が、npm コマンドのコマンドラインを打つときのミスタイプにあるのではないかとの仮説を立てています。 つまり、someFlag というオプションを使い npm i -someFlag somepackage と打つべきところ
ECサイトのクロスサイトスクリプティング脆弱性を悪用した攻撃 - JPCERT/CC Eyes
攻撃者は、はじめに標的のECサイトの注文フォームに対し、不正なスクリプトを含んだ文字列を入力し、購入処理を行います（図1の①）。その結果、ECサイトの購入処理の部分にXSSの脆弱性が存在する場合、ECサイトの管理画面を閲覧した管理者は不正なスクリプトが実行され、クレデンシャル情報の窃取や、ECサイトへの簡素WebShellの設置などが行われます（図1の②～④）。その後、攻撃者によってECサイトにWebShellやユーザーの情報窃取を行うJavaScriptなどが設置されます。設置された“情報窃取JavaScript”によってECサイトを利用するユーザーのクレジットカード情報等を窃取され、“情報保存ファイル”としてECサイト内に保存されます（図1の⑤）。攻撃者は定期的なWebShellへのアクセスを行うことでこれらの情報を窃取していたと推測されます（図1の⑥）。 なお、攻撃者は、一連の攻撃の
Node.js v14の主な変更点 - 別にしんどくないブログ
4/21 にリリースされた Node.js v14 の主な変更点を紹介します。 この記事では Changelog の Notable Change から一部を簡単に紹介します。 github.com TL;DR V8 が 8.1 になりOptional chining や Nullish coalescing が使えるようになった fs.promises が 'fs/promises' でロード可能になった ES Modules の警告が表示されなくなった 目次 TL;DR 目次 deps: update V8 to 8.1 JavaScript Optional chaining Nullish coalescing Intl.DisplayNames パフォーマンス fs: add fs/promises alias module module: remove experimental
2019年、2020年のJavaScript - 別にしんどくないブログ
この記事は JavaScript Advent Calendar 2019 - Qiita の初日の記事です。 2019年を締めくくるアドベントカレンダーの初日ということで、今年のJavaScriptを簡単に振り返りたいと思います。2020年のJavaScriptについても予習しましょう。 2019年、2020年が何を指しているかは後述します。 カテゴリが「プログラミング言語」なので、React、Vue、AngularやNode.jsなどJavaScriptを使った技術ではなく、JavaScriptの言語機能にフォーカスしたいと思います。 はじめに ES2019 Optional catch binding JSON superset Symbol.prototype.description Object.fromEntries Well-formed JSON.stringify Arr
第2回 JavaScriptの呪いから解き放たれて | gihyo.jp
第2回目のゲストとしてお迎えしたのはamachangこと天野仁史さん。これまでのこと、これからのこと、熱く語ってくださいました。 天野 仁史 さん2012年にプログラマーとして起業。その後、スマートニュースにバイアウトし、エンジニアリングマネージャーとして開発チームを作る仕事に携わる。 Twitter：@amachang URL：https://amachang.hatena blog.com/ JavaScriptのスターからベンチャーの立ち上げへ 天野：天野仁史です。amachangのハンドルネームで活動しています。2007年ぐらいにインターネットで活躍していました。サイボウズ・ラボでJavaScriptをがんばっていた時期があって、そこで技評さんにお世話になったり、いろんな勉強会に顔を出したりしていました。2010年以降はベンチャーを立ち上げたり手伝ったり。 経歴を言うと、高専でコン
JS 大規模プロジェクトの管理手法 – ロードオブナイツの実例紹介
どうもこんにちは。 Aiming で東京開発グループのゼネラルマネージャをやっている小林です。 8月に mobage と Yahoo! モバゲー で ロードオブナイツ というシミュレーション RPG をリリースさせて頂きました。 そして、先週、 Yahoo! モバゲー版の PC ブラウザ専用デザインをリリースさせて頂きました。 今回リリースしたものは元々 Unity で作られていた iOS アプリ版 Lord of Knights を HTML5 で書きなおしたものです。 （今は Android 版 もあります） HTML のポチポチゲーをネイティブに移植したというのはよく聞く話ですね。 ですが、逆にリッチなネイティブアプリを HTML5 に移植し、かつスマフォブラウザと PC ブラウザで同じものを動かすなんてのは前例が見当たりませんでした。 技術的ハードルが高かったことに加えて期日がタイ
心理的負担を抑えつつVue.jsを0.12→2.4にアップグレードした話 - 弥生開発者ブログ
こんにちは、@mugi_uno です。 RubyKaigi盛り上がりましたね〜！ そして広島は美味しいものがたくさんでした。次回の仙台も楽しみですね！ さて、みなさんはフロントエンドのフレームワークには何を利用していますか？ Misocaでは一部機能でReact/ReduxによるSPA構成を採用しています。 めろたん(@renyamizuno_)の書いた過去のエントリーにも登場していますね。 tech.misoca.jp しかし、Misocaで利用しているのはReactだけではありません。 jQuery React/ReduxはSPAなどでパワーを発揮しますが、逆に気軽に取り回しにくいため、ちょっとしたコンポーネントを作りたいケースなどでは、さくっと書けるjQueryを利用することもまだまだ多いです。 しかし、DOM操作が柔軟すぎるため影響範囲が読めなかったり、ビューと状態の管理が複雑にな
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
JSサイトのための第4のレンダリング構成としてダイナミックレンダリングをGoogleが発表 #io18 #io18jp
[レベル: 上級] JavaScript で構築されたサイトのために Dynamic Rendering（ダイナミック レンダリング）と呼ぶ仕組みを Google はサポートするようになります。 米マウンテンビューで開催された Google I/O 2018 のセッションで Google の John Mueller（ジョン・ミューラー）氏が発表しました。 Google が現在サポートする JS サイトのための3つのレンダリング構成 JavaScript でレンダリングされたコンテンツを適切にインデックスするために、次の3つのレンダリング構成を Google は現在サポートしています。 Client Side Rendering（クライアント サイド レンダリング）――クライアント側、つまりブラウザまたは Googlebot がすべてをレンダリングする。Googlebot がレンダリングで
#AMPConf 2019で発表された検索関連の最新AMPニュース――amp-scriptやSXG、AMPストーリーなど
[レベル: 上級] 東京の六本木で 4 月 17 〜 18 日に開催されている AMP Conf 2019 に参加しています。 1 日目の基調講演から検索に関係する部分をピックアップします。 <amp-script> コンポーネント [05:34] AMP ドキュメントで、独自の JavaScript を実行可能になりました。 現状では、AMP が定義した JavaScript しか AMP では利用できません。 サイズが 150KB以内（圧縮前）などの制限はありますが、AMP JS 以外の JavaScript が使えるようになるのは大きな変革です。 詳細は公式ドキュメントを参照してください。 Next.js [06:33] Next.js が AMP を正式にサポートしました。 React の SSR が AMP で利用可能になります。 詳細は Next.js の公式アナウンスを参照し
アメブロ2019: こえのブログでのPWA | CyberAgent Developers Blog
こえのブログは「声で書くブログ、声で聴くブログ、声で観るブログ」をコンセプトに書き手、読み手双方にバージョンアップしたブログを提供するアメブロの新機能です。 投稿者は端末に向かって喋るだけで、その音声が活字化されブログとして公開できます。閲覧者は活字化された文字を通常のブログと同じように読めるほか、音声を聴きながらでもコンテンツ消費できます。 モバイル端末、テレビ端末やスマートスピーカーなどの普及により、今後ますます増えると予想される利用形態に対して、それぞれに適した形でコンテンツを提供できるように挑戦しています。 この記事では、技術的な側面を中心にこえのブログを紹介します。 こえのブログは、文字でも音声でもコンテンツ消費できるのが特徴です。読者の方へのメッセージや質問に回答など利用法は様々です。龍玄としさんやクロちゃんさんなど著名人の方の声も聴けます。 できる限りサーバーにアクセスしない
兵庫県警へ「不正指令電磁的記録に関する罪」の情報公開請求をしました（その1） - ろば電子が詰まつてゐる
（追記）これまでの活動を時系列にまとめたTwitterのモーメントを作りました。記事はこちらで追えますので、合わせてご覧ください。 Twitter Moment: 兵庫県警へ「不正指令電磁的記録に関する罪」の情報公開請求をしました はじめに 先日、「forループでalertウィンドウを出すだけ」という、いわゆるジョークプログラムへのリンクを張った3人が、兵庫県警によって1名(未成年)が補導、2人が書類送検される予定という事案が発生しました。(for文無限ループURL投稿で補導された件についてまとめてみた) この事案について、兵庫県警に対し兵庫県情報公開条例に基づいて以下の情報公開請求を行いましたので記録します。 なお本記事については、以前に同様に神奈川県警に対して情報公開請求を行った 梅酒みりん 様へお願いし、文面について利用させて頂くことを快諾頂きました。この場を借りて感謝を申し上げます
転職エントリ - 素人がプログラミングを勉強していたブログ
これまで 新卒で入社したWeb系IT企業で1年4ヶ月ほど新規事業部門でブログサービスの開発などをしていました。チームでやってるサービスと自分個人が結びつくのもあんまり良くない気がするので会社名は書かないけど、本日が最終出社日なので振り返ってみます。 やったこと フロントエンド周りを中心にやりました。 JavaScript、Node関連ではrollup, babel, prettier, eslintなどを導入したり、すでにあったコードのリファクタリングを行ってES6 Modulesを導入したりしました。 その他、色々なバイナリを入れたりコンパイルをして動かす必要のある部分などもdockerを使って一から環境構築することなくビルドできるようにしたり、CSSはSassを使っていたものをPostCSSに変更したりしました。デプロイ周りのフローもAWSに繋いでる部分を自動にしたり色々気になったとこ
最新のJavaScript技術を使ったウェブサイトを検索向けにする方法 #ChromeDevSummit | 海外SEO情報ブログ
[レベル: 上級] この記事では、11 月 12 〜 13 日に米サンフランシスコで開催された Chrome Dev Summit 2018 に参加した際のセッションをレポートします。 セッションテーマは、JavaScript を多用したサイトを検索で発見されやすくするためのベストプラクティスと注意点です。 セッションスピーカーは、Google チューリッヒの Martin Splitt（マーティン・スプリット）氏と Google シドニーの Tom Greenaway（トム・グリーンアウェイ）氏です。 最新の JavaScript 技術で構成されたウェブサイトを検索フレンドリーにするための秘訣をマーティンとトムの2人がどんなふうに解説したのかを一緒に見ていきましょう。 JavaScript コンテンツの処理プロセス 1. クロール ⇒ 2. レンダリング ⇒ 3. インデックス 静的な
レガシーなフロントエンドコードを整理するためにどう立ち向かったか - Misoca開発者ブログ
2エントリ連続でこんにちは、@mugi_unoです。 名古屋には台湾ラーメンイタリアンという名物があるそうです。 富山県民の私には理解が追いつきませんでした。 フロントエンドでの金額計算処理 さて、Misocaは請求書作成サービスなので、金額計算処理が欠かせません。 フロントエンドも例外ではなく、消費税額や合計額を算出するロジックが存在します。 機能変更が必要になった!! 諸事情により、そのロジックに変更を加える必要が生じました。 長くプロダクトを支えてくれていた存在ですが、内容的にはいわゆるレガシーなコードで、たびたび開発者ミーティングでも課題として挙げられることがありました。 git log で確認してみると、該当コードに対しての機能的な変更は2015年の冬から行われていません。 何が問題だったのか？ DOM操作と計算ロジックの混在 Misocaでは、新しくコードを書く際はVueやRe
JWT認証、便利やん？ - ブログ
どうして JWT をセッションに使っちゃうわけ？ - co3k.org に対して思うことを書く。 (ステートレスな) JWT をセッションに使うことは、セッション ID を用いる伝統的なセッション機構に比べて、あらゆるセキュリティ上のリスクを負うことになります。 と大口叩いておいて、それに続く理由がほとんどお粗末な運用によるものなのはどうなのか。最後に、 でもそこまでしてステートレスに JWT を使わなくてはいけないか？ とまで行っていますが、JWT認証のメリットはその実装のシンプルさとステートレスなことにあります。現実的には実際はDB参照とか必要になったりするんですが、ほとんど改ざん検証だけで済むのは魅力的です。トレードオフでリアルタイムでユーザー無効化ができないことくらいですかね。ライブラリなんて使う必要ないほどシンプルだし、トレードオフさえ許容できればむしろ、なぜこれ以上に複雑な認証
Cloudflare WorkerをAWS LambdaのGatewayとして使う - blog::wnotes.net
Cloudflare Worker使ってみた リリースを見た時「あーすごいなーこの発想」と思って、これは使ってみなきゃということでやってみた。 Cloudflare Workerとは Cloudflare CDNのエッジで動作させるWorkerプログラムで、面白いのはService Worker、つまりJavaScriptで書けること。 そもそもService Worker自体がブラウザのリクエスト・レスポンスをフックして処理するものなので、リクエストとレスポンスが対になるならEdgeサーバで使おうぜっていう発想がすごい。 詳しくは他の人も書いてるのでそっちを参照のこと。 AWS LambdaのGatewayとして使ってみる WorkerをGatewayとして、AWSのLambda Functionをコールしてその出力をレスポンスとして返すGatewayを作ってみた。 Lambdaを使う機
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bibi | EPUB Reader on your website. — ビビ。EPUB リーダを、あなたのウェブサイトに。
