個人的に「Webサービスの公開前チェックリスト」を作っていたのですが、けっこう育ってきたので公開します。このリストは、過去に自分がミスしたときや、情報収集する中で「明日は我が身…」と思ったときなどに個人的にメモしてきたものをまとめた内容になります。 セキュリティ 認証に関わるCookieの属性 HttpOnly属性が設定されていること XSSの緩和策 SameSite属性がLaxもしくはStrictになっていること 主にCSRF対策のため。Laxの場合、GETリクエストで更新処理を行っているエンドポイントがないか合わせて確認 Secure属性が設定されていること HTTPS通信でのみCookieが送られるように Domain属性が適切に設定されていること サブドメインにもCookieが送られる設定の場合、他のサブドメインのサイトに脆弱性があるとそこからインシデントに繋がるリスクを理解してお
これまでの生存戦略 それほど尖った能力や知識がない中で、私のこれまでの生存戦略としては求められればなんでもやる、少しくらい泥水でも飲むというものでした。 フロントエンドからバックエンド、データベース設計、API設計、実装、インフラ側の設定、提案書作成、プレゼンテーション、プロジェクト進行、どれも“専門家として誇れるか”というと疑問がありますが、求められればなんでもやるスタンスでそれが自分の価値提供の形と考えていました。 また、以前までは「若い」というのも、強みでした。 一回りほど上の年齢に見られることも珍しくなく、「そんな若かったのか」と驚かれるなかで、「若いのに頑張ってるね」と年齢のフィルターで大目にみてもらえました。 しかし、そんな私も気が付けば40歳、もう若さという武器はありません。 (つい先日まで20代だったはずなのに..何かおかしい..) 体力的にも無理が効かず、新しいことを学ぶ
はじめに はじめまして、セキュリティエンジニアのSatoki (@satoki00) です。今回はブラウザの開発者ツールのネットワークタブから隠れて、Webサイト内の情報を送信する手法をまとめます。所謂Exfiltrationというやつです。中にはCSPの制限をBypassするために用いられるテクニックもあります。CTFなどで安全に使ってください。 前提 発端はWeb上でテキストの文字数をカウントできるサイトが閉鎖する際の話です。カウント対象のテキストデータがサイト運営 (やサイトを改竄した攻撃者) に盗み取られていないかという議論が巻き起こっていました。「盗み取られていない」側の主張は、ブラウザの開発者ツールのネットワークタブにリクエストを送信した形跡がないというものでした。ここで ブラウザの開発者ツールのネットワークタブに表示がなければ外部へデータを送信していないのか? といった疑問が
官僚主義からスタートアップ精神へ——。およそ10年前、新サービスの立ち上げ失敗を機に生まれた米国政府の新組織が作ったWebデザインシステムは、今では160サイト・11億ページビュー規模にまで広がりを見せている。 by Jon Keegan2024.07.03 412 9 この記事の3つのポイント 米国には公共デザインシステムとカスタムフォントがある 政府系Webサイトのアクセシビリティと一貫性を高めることが目的 これらのプロジェクトでは透明性や協働、継続的な改善が重視されている summarized by Claude 3 米国には、公式のWebデザインシステムとカスタムフォントがある。この公共デザインシステムは、政府のWebサイトを単に美しいものにするだけでなく、すべての人にとってアクセスしやすく機能的なものにすることを目的としている。 インターネットが普及する以前、米国民は印象的な石柱
はじめに先日、初心者でも簡単に参加できる GitHub チュートリアル 『First Contributions JA』を共同開発しました! 振り返りも兼ねて、プロジェクトの背景や使用技術について、紹介していきます。 ▼ GitHub のリンク: なぜ First Contributions JA を構築したのか?さて、First Contributions JA には、次のような特徴があります: - React/ Next.js で構築されたWebサイト - 初心者向けのGitHubチュートリアル - オープンソースのプロジェクト 上記を踏まえて、プロジェクトの経緯は、主に2つあります。 (技術スタックは、後で詳しく説明します) 1. JavaScript/ React 学習コミュニティで、共同開発を提案した!以前、 「JavaScript/ React を学習するコミュニティを、期間限
海外のセキュリティ企業「Phylum」はトロイの木馬化された「jQuery」がnpmやGitHub、jsDelivr のCDNホストで拡散している事を指摘しました。 「jQuery」を悪用したサプライチェーン攻撃の概要 Phylumは 2024 年 5 月 26 日以来、トロイの木馬化された jQuery のバージョンを悪用する執拗なサプライ チェーン攻撃者を監視しており、最初に npm でこのjQuery を悪用する亜種を発見しました。 そこでは、1 か月にわたって数十のパッケージで侵害されたバージョンが公開されていました。 調査の結果、GitHubや、jsDelivr の CDN ホスト リソースでも、トロイの木馬化された jQuery のインスタンスを発見しました。 なお、今回解説されている内容は正規の「jQuery」へ今回のトロイの木馬が紛れ込んでいるのではなく、 悪意のあるユーザ
Krita の AI Diffusion プラグイン、SD のインターフェースとしてかなり良い。話題の LCM によるライブペイントも便利だし、イラストレーションツールだからレイヤーや選択ツールが使えるのが強い。すでに SD でできたことだが、こんな感じの変換が素早く、気持ちよく行える。https://t.co/bUPOZrKs1n pic.twitter.com/0hn8iMHHms — Naoto Yokoyama (@builtinnya) November 18, 2023 これらを ControlNet8 で入力して AnimateDiff を使えば済むと考えていたが、甘かった。 動画生成 AI に期待しているのは、この2枚の画像の間のフレームを説得力のある形で補間することである。しかし、7秒という長さでは、例えば次の動画1のようになってしまう。 動画1. 図1と図2を使い、パラ
こんにちは、ちょっと株式会社デザイナーのモです。 挨拶から間髪入れずで申し訳ないのですが、まずはこちらをご覧ください。 何の変哲もないテキストとアイコンで構成されたボタンです。 今回はこちらのボタンに物申したく筆を執らせていただきました。思うところがあるんだよ今の私には。 ずれている、Noto Sans JPという訳で早速本題に入りますが、単刀直入に言ってこのボタンずれてるんですよね。「暑いね」って言ったら「水飲めば?」って言ってくる人くらいずれてる。私怨はさておき具体的に表すとテキストとアイコンが上下にガクンとずれているって訳です。 論に拍車をかけるためにボタンに分割線を引いてみました。 アイコンは上下真っ二つだがテキストはどうも下に寄っていますぞなぜずれる、Noto Sans JPこれが目の錯覚…なら良かったんですが(良くない)実際にずれていて、ではなぜそんなことになっちゃっているのか
ブラウザ上で簡単にデザインができるFigmaですが、人気の理由のひとつがプラグインを活用すれば自分好みにカスタマイズできる点でしょう。 たとえば、「できるだけ効率よく作業時間を短縮したい」というクリエイターの願いを叶えるAI機能を生かしたプラグインや、統一感のあるWebサイトに欠かせないデザインシステム作成プラグインなど用途によってさまざまです。 しかし、いざ探してみると、どこから見つけていいのか迷ってしまうほど膨大な数が公開されています。 そこでこの記事では、デザインをつくるときに役立つFigmaプラグインに絞り、リスト形式でご紹介します。 しかも、どれも無料。気になるアイテムはどんどん試してみましょう。きっとこれまで以上楽にデザインを作成できますよ。 このリストはこんな人におすすめ デザインのアクセントになる「あしらい」をさくっと作りたい どのプラグインを使えばよいか迷っている まわり
フィードバックを送信 Google Meet REST API の概要 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 Google Meet REST API を使用すると、Google Meet と Google Meet を使用したビデオ会議を アプリからユーザーに直接、エントリ ポイントを提供します。 Meet REST API を使用すると、次のことができます。 会議スペースを作成して、ビデオでユーザーをつなぐ。 会議室または会議をリソース名で取得します。 参加者と参加者セッションのリストを取得する。 会議のアーティファクト(録画、文字起こし、文字起こしのエントリ)を取得する。 Google Meet のカレンダーの招待状を使用して Google Workspace Events API。変更の通知を受け取るには、 指定したユーザーに属するすべて
「Next.jsで理解するSSRとクライアントルーティングの違い」という名目で社内にて簡単に勉強会を行いました。本記事は、その内容を適宜編集して公開するものです。 TL;DR 以下の要約を読んで、「なんだその話か」って思った方は引き返していただいて大丈夫です。逆に「えっそうなの・・・?」と思った方は、ぜひ読んでください! Next.jsアプリケーションにおいて、/hogeと/fugaというページがあり、それぞれgetServerSideProps()が定義されているとします 最初ブラウザで/hogeを開いたとき、Next.jsアプリケーションはブラウザから/hogeへのGETリクエストを受け取り、getServerSideProps()を実行します 次に/hogeから/fugaへrouter.pushで遷移すると、Next.jsアプリケーションはブラウザから/fugaへのGETリクエストを
23 CSS features you should knowの動画でCSSの最近のテクニックが紹介されており、その中から特に注目すべき面白いテクニックを紹介します。 たった1行のCSSで、背景画像とテキストの間にグラデーションのオーバーレイを要素全体に適用するテクニックです。画像の一部を暗くしてその上にテキストを配置する際に非常に便利です。 実際の動作は、デモページでご覧ください。 See the Pen Gradient Overlay with border-image by coliss (@coliss) on CodePen. HTMLはシンプルです。 テキストのh1要素と背景を設定したdiv要素があるだけです。
質問の仕方で変わることがあるデザイナーにとって、プロダクトマネージャーやエンジニアとの効果的なコミュニケーションは、良いデジタルプロダクトを生み出すために欠かせません。ドキュメントや打ち合わせを通して施策への理解を深めていきますが、情報のインプットだけでは分からないことがあります。そこで、意図を明らかにするために質問をするわけですが、ただ「なぜですか?」と尋ねても望む返答が得られない場合があります。では、どのように質問すれば良いのでしょうか。 私自身、まだ完全にできているわけではありませんが、質問するときの秘訣がいくつかあります。 相手の見解に興味を示す良い質問をするために最も重要なのは、純粋な好奇心です。プロダクトマネージャーやエンジニアの見解に興味を持ち、もっと知りたいと思う気持ちが、良い質問を生み出します。抽象的に聞こえるかもしれませんが、形式的な質問を覚えるより、ずっと効果的です。
生成AIでコーディング効率化!→待っていたのは“失敗の日々” とあるITエンジニアとAIの試行錯誤の記録(1/3 ページ) 「生成AIに振り回された3カ月間の成功と失敗」──コンサルティング事業などを手掛けるリンクアンドモチベーションは6月29日、エンジニア向けの転職サービス「Findy」を運営するファインディ(東京都品川区)が開催したイベント「開発生産性Conference 2024」で、こんな講演を行った。登壇したのはソフトウェアエンジニアである山西陽平さん。開発生産性を上げるため、生成AIでコードを編集するために試行錯誤した3カ月間の体験談を話した。 山西さんが作ったのは「GitHubのIssueを基に、AIがPull Request(PR)を作成してくれるツール」だ。米OpenAIの大規模言語モデル「GPT-4」を活用し作成したツールで、これで型注釈を付けるタスクの自動化を試みた。
こんにちは! 株式会社Rabeeでデザイナーをしています、nanamiです🌿 デザインにおいて「伝えたい情報を意図した通りに見せる」ことは最重要ポイントであり、且つ難しいポイントではないでしょうか。 そんな「伝わるデザイン」の特徴の1つとして挙げられるのが、見ている人に見せたい情報を適切に見せるよう目線をコントロールできていること。 これはWebサイトのデザインでもバナーのデザインでも共通して言えることですが、今回は特に目線の動きが重要になる動画のデザインを見ながら、そのポイントをまとめてみました! 悪い例 〜私の初心者作品を添えて〜他人の失敗例を見ると学びになることって多いですよね…🧐 ということで、良い例をご紹介する前に、まずはNG例を見ながら説明をしたいと思います。 今回はNG例として、私が学習の一環としてとあるサービスの紹介動画を作成した中からシーンを抜粋しています。 私が作成
前書き WordPressで稼働しているリニューアル案件で、Astroを使って実装を行った。 ライブラリにサイトが完全に依存するデメリットもあるものの、 Astroを使用した理由としては、コンポーネント指向による保守性拡張性の観点からと、サイトの最適化の観点から採用した。 結果普通のレンタルサーバーでPageSpeedInsightsでほぼ100点満点。 SPの点数 PCの点数 使用感と感想 正直これまでのタスクランナーやモジュールバンドラーなどを使ったHTML開発は若干レガシー化している感があった。 そんな中、まさに現時点でのWeb開発ベストプラクティスを詰め込み、ほぼ何も考えずに最適化されたサイトを実装できる非常にすぐれたライブラリだと感じる。 また、これまでPageSpeedInsigthsの点数を上げようと思ったら、構築後、PageSpeedInsightsの助言に一つ一つ従いなが
みなさん、こんにちは。瀬川義人(@motoy0shi)です。 突然ですが、みなさんはWebサイト制作で「こんなはずじゃなかったのに……」という経験はありませんか? お恥ずかしい話、私はあります。 かつて自社のWebサイト制作に関わったときのことです。制作のプロジェクトマネージャーとして入ったのですが、始まって早々、別の急ぎ案件が入ってしまい、なかなか時間が捻出できず、プロジェクトが停滞。さらにいざ再開してからも、思わぬトラブルに巻き込まれてしまいます。 結果的には納期が数ヵ月遅延し、工数もかなり超過してしまいました。思い出すと、今でも苦い気持ちになります。 データを調べてみると、Webサイト制作での失敗は意外と多いようです。ナノカラー社の調査によれば、71.7%の回答者がWeb制作会社に依頼して”失敗した”と感じた経験があるそうです。 なぜWebサイト制作は失敗するのでしょうか? リスクを
2024年7月、ウェブサイト構築・ホスティングサービスやドメイン登録サービスを提供するSquarespaceのドメインを標的として、組織的なドメインネームシステム(DNS)ハイジャック攻撃が行われました。主に仮想通貨ビジネスを標的とした今回の攻撃は、2023年にSquarespaceの買収によってGoogle Domainsから移管されたドメインに関連しているとのことです。 DNS hijacks target crypto platforms registered with Squarespace https://www.bleepingcomputer.com/news/security/dns-hijacks-target-crypto-platforms-registered-with-squarespace/ Researchers: Weak Security Defaults
無料で使えるSVGアイコンはたくさんありますが、使い勝手がよいシンプルなデザインで、バリエーションも豊富となるとなかなか見つかりません。 WebサイトやスマホアプリのUIでよく使うアイコンが1,470種類、カラー・サイズ・ストロークの変更もサポートしているSVGアイコン素材を紹介します。 Lucide Lucide -GitHub LucideはFeather IconsのForkで、Featherに対する不満が高まったことによりコミュニティ運営で始まったプロジェクトです。FeatherにはたくさんのIssuesやPRが未解決で放置されており、これらの対応はされていません。 Lucideのアイコンは、元のシンプルなデザイン言語に忠実なまま、可能な限りアイコンセットを拡張しています。ライセンスはISC Licenseで、個人でも商用プロジェクトでも無料で利用できます。
2024年5月末にGoogleの社内文書が漏洩したニュースは、SEO業界で恐らく今年最大のニュースとなるでしょう。最近オンラインで開催された検索エンジンマーケティングに特化したカンファレンス「SMX Advanced」でも、この話題で持ちきりでした。ただこの漏洩文書は誤って読み解いてしまう可能性も十分あるため、私たちは原文ソースも確認しながら社内で理解を深めてきました。どんな内容が漏洩したのか、紹介する記事はたくさんあると思いますので、この記事ではアユダンテの観点で興味深く感じた5つの項目について深く解説します。※この記事の情報は英語圏含めた6/28時点での最新情報となります。 漏洩したGoogleのドキュメントとは? Navboost(最重要):SEOにUXが重要との裏付けがとれた!エンベディングとベクトル検索について理解を深めようリンク:リンクには3つの質がある?!記事作成時に注意、エ
こんにちは、デザイナーの社員Bです😼 6月14日(金)公開のオリジナル劇場アニメーション『数分間のエールを』公式サイト制作を弊社で担当させていただきました。 https://yell-movie2024.com/ 日々それぞれのプロジェクトにあった企画・デザインを提案していますが、本件は『イロコトデザイナーとして挑戦すること』も意識し、よくある手法に捉われずやったことのない表現や動きを取り入れました。 どんな工程を経てサイトが公開されたのか?どういった想いを込めてデザインしたのか?今回はサイト制作の裏側をご紹介します! 記事の内容に沿ってブラッシュアップ過程をFigmaにまとめたので、是非プレビューしながらご覧ください🙌 ◉おおまかなブラッシュアップ過程(Figmaプレビュー) ※PCキーボードの「←→」キーで他ページをご覧いただけます。 プロジェクト概要 オリジナル劇場アニメーション
CAMELORSは、同社の運営するフリーランス・複業・副業の求人マッチングサービス「SOKUDAN(ソクダン)」に掲載されている、実際のフリーランス・副業案件に基づいて作成した、2024年最新のフリーランス・副業における「PHPエンジニアの調査レポート」を、7月5日に発表した。 調査結果によれば、PHPエンジニアの年収は平均973万円で、プログラミング言語別の年収ランキングで10位にランクインしている。中央値は910万円で、月収換算では平均81万円、中央値は76万円だった。また、時給換算では平均4826円、中央値4514円となっている。 プログラミング言語別年収ランキング プログラミング言語別の案件数では、PHPは案件比率13.0%で2位にランクインした。月収面では81万円で、トップ10にランクインしたプログラミング言語の中では中程度ながら、JavaScriptよりも若干低い水準となってい
昨今のホームページは、サイト全体が良質でなければ検索順位が上がらないと言われています。 検索順位が期待通りに上がっていないWebマスターが、サイト全体が良質でなければSEO効果が出ないという情報を見たときに、思いつく対策は低品質と思われるページの削除になると思います。 しかし、ページを削除することは、検索順位を上げる効果もありますが、下げる効果もあるため、慎重に行わなくてはなりません。 当ページでは、ページ削除と検索順位の関係性やページ削除の良い影響、悪い影響、削除時の対策法について解説します。 ページ削除と検索順位の関係性 ページを削除すると、これまで積み上げてきたSEO効果が失われ、検索順位が低下する可能性があります。 そのため、ページ削除をご検討の方は、ページ削除と検索順位の関係性を理解することから始めましょう。 ページを削除すると、削除したページは検索結果に出てこなくなるので、該当
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く