Web系エンジニア最低限入れておくべき Chrome 拡張機能３選 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要 Web ブラウザではすっかりお馴染みの Google Chrome ですが、開発者ツール（DevTools）だけでなく、拡張機能にも導入すると非常に便利なものがたくさんあります。 その中でも、Web系の開発をするエンジニアなら、是非入れておきたいオススメの Google Chrome 拡張機能について紹介します。 尚、いずれも無料で利用可能です。 IT エンジニア界隈では、既にどれも有名なものばかりですが、これから Web 系の開発をする方は是非お試しください。 本当はもっとたくさんオススメしたい拡張機能がありますが、ひとまず今回
翻訳: WebAPI 設計のベストプラクティス - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? これは Enchant の開発者である Vinay Sahni さんが書いた記事「Best Practices for Designing a Pragmatic RESTful API」1を、ご本人の許可を得て翻訳したものです。 RESTful な WebAPI を設計しようとすると、細かなところで長考したり議論したりすると思います。また、他の API に倣ってやってはみたものの、本当にそれでいいのか、どうしてそうしているのか分からない、何てことも少なくはないと思います。 この記事では、そのようなハマリどころについて Vinay さん
Webシステムにおいて「画像や帳票等のファイルはDBへ格納すべきなの？」を調べてみた（ファントムファイル） - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事は、 JPOUG Advent Calendar 2023 24日目の記事です。 23日目は multilayer さんの記事『OCIのLanding Zoneについて調べてみた！』でした。 想定読者 ファントムファイルについてよく知らない、帳票の扱い方をあまり考えたことがない人 イントロダクション 皆さん、世の中のWebシステムで利用される画像や帳票ファイルがどこに保存されているかご存知でしょうか？ 帳票や大きな画像ファイルなどを扱う際、大きく分けて２つの設計方針があります。 ・DBに直接保存する ・DB外部に保存し、パスなど
実践：はじめてのWebAPI設計 - Qiita
はじめに この記事はAPIの基本的な実装方法を丁寧に解説します。基礎を学びたい方、今更聞けないような知識の振り返りを求める方の役に立つことを願っています。もう十分理解できている！という方は、目次から実装にとんでみてください。 具体的にはHTTPと呼ばれる通信方法を利用した、シンプルな本の貸し出しシステムの土台を考えます。要件の各ステップで、設計の基本原則やベストプラクティスについても触れながら、より実践的な知見を共有できればいいなと思います。 基本用語 Webに関する基礎知識の解説記事はQiitaに豊富にあったので、要点を抑えつつリンクをまとめました。 WebAPI WebAPIは、ウェブ上での情報のやり取りを行うためのインターフェースです。HTTPなどの通信プロトコルを介してデータを送受信することで、異なるシステムやアプリケーション間での情報共有を可能にします。 代表的な例としてスマホア
SPAのページをGAで計測？従来のWEBと同じで余裕でしょ！と思い込んでた話 - Qiita
SPAをGA4、UAの両方で計測できるようにしたい！ WEB計測で利用されている超有名なツールといえば「Google Analytics」。（以下、GA） 計測タグを読み込ませるだけで、PV数やユーザー数、セッションなど多くの指標を計測できるこの便利なツールをGoogleは無料で提供しています。Googleさん、太っ腹！ 普段、私が数値集計に使っているGAはUniversal Analytics（以下、UA）形式ですが、Google公式から「2023年7月からGA4に完全移行するよ。今後、UAは使えなくなるよ」と告知されたので、GA4とUAの画面を見比べたりUAで計測できている数値をGA4で確認する方法を探したりと、手探りで移行準備を進めています。 GA4に早く慣れないとなぁと考えながら普段の業務をこなしているところに、Nuxt.js、Node.jsを使ったSPA（シングルページアプリケー
デジタル庁のサイトやばすぎるwww - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに みなさん、デジタル庁のサイトはご覧になったことはありますか？今話題のデジタル庁です。 こちらが2023年6月現在のデジタル庁のサイトです。やばくないですかこれ？最初見たときこれ「やっばw」と思いました。これからこのサイトのやばさを語っていきたいと思います。 洗練されたシンプルさ、そしてデザイン 僕は最初見たときびっくりしました。「なんてシンプルで見やすいんだ！」官公庁のサイトですよ？官公庁のサイトといえば、細かい字がずらっと並んで見づらいイメージでしたが、デジタル庁のサイトはとことんシンプルさを追求して見やすくしてます。フォン
サブドメインの異なるサービス間で cookie を共有する - Qiita
例えば上記のように、異なるサブドメインにおいてもログインセッションなどのデータを共有したい場合があります。 セキュリティの都合上オリジン(<scheme>://<hostname>:<port>)の異なる場所と JavaScript 内でデータの送受信を行う場合はオリジン間リソース共有(CORS)の仕組みを利用する必要があります。 しかし、 CORS のような仕組みを信頼されうるサブドメインの違いだけで利用するのは面倒です。 今回は Cookie の仕様を用いて、データを共有出来るようにします。 要約 ;domain=example.com オプションを付けること。 domain オプションがついていなければ、現在のオリジンでしか使えないクッキーとなります。 Cookie のドメイン指定を利用する これは先ほど例に挙げたニコニコを含め、非常に多くのサービスで既に利用されている方法です。 ク
SPA認証トークン、Cookieに保存するか？LocalStorageに保存するか? - Qiita
Cookieはhttp-only属性を利用することでjsからのアクセスを不可にすることが可能ですが、LocalStorageはそもそもjsで利用する前提のため当然できません。 また、Cookieはドメインが一致していれば自動でアクセス先にデータを送信してしまいますが、LocalStorageは送信しません。 これらの違いを踏まえ、CSRFとXSSの脆弱性について考えていきたいと思います。 3分でわかるXSSとCSRFの違い Cookieに保存した場合のリスク 自動で送信してしまうCookieの挙動を利用した攻撃に、クロスサイトリクエストフォージェリ(CSRF)があります。 クロスサイトリクエストフォージェリ（CSRF）とは、Webアプリケーションに存在する脆弱性、もしくはその脆弱性を利用した攻撃方法のことです。 掲示板や問い合わせフォームなどを処理するWebアプリケーションが、本来拒否すべ
setTimeout の真の力、あなたは知っていますか？ - Qiita
大雑把な理解としては問題ないですが、実は setTimeout の隠された能力はそれだけではありません。 setTimeout の隠された能力を知るとどんな良いことがあるのでしょうか？ 例えば、次のような良いことがあります。 ブラウザに対する理解が深まる Web サイトのパフォーマンスを向上させることができる ドヤれる まず、 ブラウザに対する理解が深まります 。 かのアリストテレスはこう言い残しました。 Knowing setTimeout is the beginning of all wisdom. ( setTimeout を知ることは、すべての知恵の始まりである) setTimeout を知ることは（ブラウザの）すべての知恵のはじまり と言って過言ではありません。 普段なにげなく setTimeout を使っていても、「実はブラウザは裏でこんなことしているんだー」という新しい知見
初学者に教えたい、MicrosoftがGitHubで公開している教材が最高だった！ - Qiita
はじめに エンジニアやデータサイエンティストの人材育成のためのオープンソースな教材を探していたらMicrosoftがGitHubでかなり質の高い教材をweb開発、データサイエンティスト、機械学習、IoTの四項目を対象に提供してるのを発見したため共有したいと思う。 正直、マイクロソフトと聞くとGoogleやらFacebookに比べていけてないイメージを持っていたけど、実際にMicrosoftのGitHubレポジトリを見て、彼らはここ数年で大きく変わったように思える。特に人材育成や学習教材に関しては世界一かもしれないなんて思っています。本記事では筆者が自信を持っておすすめするMicrosoftのオープン教材を紹介するのでぜひ自身の勉強や人材育成に生かしてもらえれば本記事を執筆した甲斐があります。（もちろん僕がお勧めしているだけでなくてGitHubのスター数も多く世界的に認められています！） こ
LaravelでS3を操作する時はアクセスキー&シークレットキーではなくIAMロールを使うこと - Qiita
LaravelからS3を使用する際はStorageファサードでS3を操作することが多いと思う。 その際に私がググった限りでは、ほとんどがアクセスキーとシークレットキーをソースコードにべた書きしているケースばかりだった。 しかし、こちらはアンチパターンなので、ec2で上記を行う場合はIAMロールを使用して、アクセスキー等はAWS側に隠ぺいしてもおう。 ec2にIAMロールを割り当てる手順は転がっているので、ここでは割愛。 Laravel側 config/filesystems.php 's3' => [ 'driver' => 's3', 'key' => env('AWS_ACCESS_KEY_ID'), 'secret' => env('AWS_SECRET_ACCESS_KEY'), 'region' => env('AWS_DEFAULT_REGION'), 'bucket' =>
フルスタックエンジニアになるためのモダンな8つのプロジェクト - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは、たかとーです。 今日は8 Projects with modern designs to become a Full-stack Master 2020の日本語訳記事です！ *当記事は、Thuさんの許可を得て翻訳しています。 ブログでも読めます！ 8 Projects with modern designs to become a Full-stack Master 自分のスキルを磨くためのプロジェクトを探していますか？新しいアイデアを思いつくのに行き詰っていませんか？ 開発者として、私たちはコードを書くのが大好きですが、デ
静的サイトジェネレーター Gatsby - Qiita
静的サイトジェネレーターとは？ Static Site Generator（SSG） WebサイトのHTMLファイルを生成するツールのこと Wordpressのような従来CMSの仕組みは、MySQLなどのDBをもとに、サーバーでHTMLを生成して返すものだった それに対し静的サイトジェネレーターは、コンパイル時にGraphQLやAPIからすべてのデータを取得し全てのHTMLを最初に生成する さらに、生成されたファイルを、Netlifyなどのホスティングサービスを用いて、サーバーレスで公開する仕組みが主流になっている 静的サイトジェネレーターのメリット ※ Netlifyなどホスティングサービスを用いた場合 レスポンスが速い。サーバーでHTMLを動的に生成しないから サーバー代 ¥0✨ サーバーが必要ないため サーバー落ちない。メンテが不要 ※ ただしホスティングサービスが落ちる可能性はあり
GAS 家計簿 - Google Apps ScriptとVueで作られたWeb家計簿
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました IT技術の発展はめざましく、日々新しい技術が登場しています。例えばサーバレス、VueやReactの仮想DOM、ちょっと前であればRESTful APIなどがあります。それらを漏れなくキャッチアップするのは大変です。 今回紹介するGAS 家計簿はサーバレスにGAS（Google Apps Script）を使って家計簿Webアプリケーションを作るハンズオンを兼ねたソフトウェアです。 GAS 家計簿の使い方 デモです。動作しているのはGitHub Pagesです。サーバの管理が不要ですね。 データの追加用モーダルウィンドウ。フロントエンドはVueを使っています。 設定画面です。データはGoogle Apps Scriptを使ってGoogleスプレッドシートに保存されています。 GAS 家
『まず触ってみて』Vueで使えるCSSアニメーションまとめ１１０選！【完全オリジナルだからコピペOK】 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? コピペだけで作れるマテリアルデザインを個ご紹介します。 box-shadow, filter, transform,などをふんだんに使っており、transitionで滑らかな動きが表されています コードには説明もわかりやすく書いてあるのでかなり参考になります Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています １. シンプルなスライダーマテリアルデザイン３選 そのまま使えるスライダーアニメーションのマテリアルデザインとなっています transition-durationを使っていてわか
なんとなく CORS がわかる...はもう終わりにする。 - Qiita
Access to XMLHttpRequest at 'http://localhost:8081' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is ther
bootstrapを使ってシンプルなWebページを作成する③〜入力フォーム〜 - Qiita
<form> <div class="form-group"> <label class="control-label">項目1</label> <input class="form-control" type="text"> </div> <div class="form-group"> <label class="control-label">項目2</label> <div class="radio"> <label><input type="radio" name="radio">選択肢1</label> <label><input type="radio" name="radio">選択肢2</label> <label><input type="radio" name="radio">選択肢3</label> </div> </div> <div class="form-gro
個人開発したWebサービスをリリースした後にやったこと / やり続けていること - くらげになりたい。
どうもきらぷかです。 最近、積んでる本の総額がわかる読書管理サービスをリリースしました!! リリース後のプロモーションはいつも困っているんですが、 いろいろ試していることをまとめてみました。 これから何かを作ろう、リリースしようとしている人の一助になれば。 やったこと/やっていることまとめ ざっくりとリリースしてからこんなことをしています! 登録サイトに投稿/依頼 いろんなとこで記事書く 進捗をつぶやく / 使い方とかTipsをつぶやく 1. 登録サイトに投稿/依頼 まずは、いろいろあるWebサービスを登録できるサイトに投稿!! このあたりに投稿や掲載依頼をしています♪ 全部で21サイト...大変なので、すこしずつ... サイト名 URL 開発会議 https://devtalk.jp/ Service Safari http://www.service-safari.com/ NewAp
すべての新米フロントエンドエンジニアに読んでほしい50の資料 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに さいきんのWebはSPA技術を中心としたフロントエンドが賑わっていますね💪 従来サーバーサイドを扱っていた人もフロントを触る機会が増えていたり、これからプログラミングを学んでいく人も、フロントエンド領域に興味を持っているのではと思います。 そこで、フロントエンドの経験が浅い方や初学者向けに、おすすめのドキュメントや勉強すべき領域をまとめました。 とりあえず動けば良い段階から一歩進んで、フロントエンドエンジニアとして、良いアプリケーションを作るために必要な知識を浅く広く紹介します。 ※補足 新米と表記しましたが、実際には新卒や
axios、async/awaitを使ったHTTPリクエスト(Web APIを実行) - Qiita
const axios = require('axios'); const url = "https://qiita.com/api/v2/items"; axios.get(url).then(res => { const items = res.data; for (const item of items) { console.log(`${item.user.id}: \t${item.title}`); } }).catch(error => { const { status, statusText } = error.response; console.log(`Error! HTTP Status: ${status} ${statusText}`); }); hp_kj: postgres 公式サイト データベースサンプル dvdrental jhfgjfgjhghj: JP
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
