JSON Web Token（JWT）の仕様と実装例を紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
システム構成における「フロントエンド/バックエンド」という区分けは、今や当たり前のものとなりました。 かつてはWebページのデザイン、そのコンテンツとデータ表示、認証動作など、すべてがごっちゃになっていましたが、「フロントエンド/バックエンド」で区分けすることでシステム管理やメンテナンスの効率が上がったため、今後もこの区分けはますます推進されていくことが予想されます。 そのなかで、フロントエンド側のHTMLとバックエンド側のシステムとの連携で認証動作の中核を担うのが、今回紹介するJWT（JSON Web Token）です。 そこで本記事では、そもそもJWTとは何か、JWTの実装例について説明します。 そもそもJWTとは？ HTMLファイルでは認証・認可ができないのがこれまでの常識でしたが、Ajax以降、バックエンドのAPIとの通信を行うことで動的なページと同様に認証動作が可能になりました。
Web制作にすごい役立つ！ コードの軽量化や整形・ファビコンやQRコード作成・PDF変換など、便利ツールが一箇所で利用できる -ToolsOcean
CSSやJavaScriptのミニファイ（軽量化）、HTMLやCSSやJavaScriptのフォーマッター、各種エンコード・デコード、QRコードの生成、カラー値変換、画像の最適化、ファビコン画像生成、ダミーテキスト生成、各種PDF変換など、Web制作に役立つツールがまとめて利用できるToolsOceanを紹介します。 便利なツールが一箇所で利用できるので、ブックマークしておくと便利です。 ToolsOcean ToolsOceanは完全に無料で利用できるオンラインツールが、たくさん用意されています。登録など面倒なことは一切ありません。 いくつか使用してみました。まずは、CSSの軽量化。 CSSだけでなく、HTML、JavaScriptの軽量化、整形も揃っています。
読みやすい＝理解しやすい Webの組版を整理してより良い文章を届けよう - Qiita
この記事はQiita Advent Calendar 2021の12日目の記事で、Qiita株式会社 CX向上グループの綿貫（@xrxoxcxox）が担当します！ この記事の概要 Webの組版を現実的な手法で綺麗に整えるためのやり方をまとめました。 同じ内容の文章でも組版次第で読みやすさは変わります。 実は、意識していないとWebサイトの文章は余白がガタガタとかになりやすいんですね。 DTPに比べるとどうしても劣ってしまいますが、HTMLとCSSだけでできるだけ綺麗になるようにした & ステップバイステップで説明していますので良ければ真似てみてください！ ちなみに今回載せているコードは全てこちらのリポジトリにあります。 解決したいこと（≒よくあるWebの組版） 余白がガタガタ 見出しや本文のジャンプ率が適切でなく目が滑る 禁則処理がほぼ何も無い あまり意識したことは無いかもしれませんが、こ
あなたのWeb制作をサポートしてくれるWebツール13選 | BUILD Journal
あなたのWeb制作をサポートしてくれるWebツール13選Update2023.05.24Release2023.04.28Tools HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する Web制作をサポートしてくれるツールを10個紹介します。mix-blend-modeやgridレイアウト、transformなどのコードの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツールもあります。あなたのWeb制作を快適に進めるためにチェックしてみてください。 Fuze – CSS Gradient AnimatorFuzeグラデーションアニメーションのCSSジェネレーター。色を複数指定するだけでCSSアニメーション用のコードを作成してくれます。背景色やテキストカラーなどに使えます。 ちなみに、テキストカラーは当サイトのト
知らないで使うとトラブルになるかも…プログラム・画像のライセンス（概要編） - ICS MEDIA
フロントエンド界隈に限らず、ITの世界は誰かが作った優れたライブラリーやプログラムによって支えられている側面があります。それらを利用することで車輪の再発明を防いだり、より低コストで開発が進められたりします。一方で何気なく使っているそれらにもライセンスがあります。思わぬトラブルの前に、ライセンスについて今一度振り返っておきましょう。 ※本記事では一般的な考え方にもとづいた解説をしています。個別の事案については専門家にご相談ください。 著作権とライセンス 人が創作したものについては著作権が発生します。絵や小説など芸術的な分野だけでなく、ソースコードやプログラムにも当然ながら著作権は発生します。著作者の許諾なく、勝手にプログラムをコピーして使うことは著作権侵害の恐れがあります。著作者による「これこれの条件のもとに使っていいよ」という許諾にあたるものがライセンスです。 つまり利用者はライセンスに定
お問い合わせフォームのウェブアクセシビリティー対応の方法 - ICS MEDIA
フォームはウェブサイトの中でもインタラクションの多い箇所です。ユーザー側にきちんと情報を伝え、そして正しく入力してもらう必要があるのでアクセシビリティーには気をつけたいです。アクセシビリティー対応といえばWAI-ARIAによる支援がありますが、この記事ではWAI-ARIAに限らずどう対応するべきなのか、デモを用いて紹介します。 バリデーションに関してシンプルに実現できるものと、ちょっと凝ったリアルタイムバリデーションのものと2例用意しています。後者は動的に変化するコンテンツへのアクセシビリティー対応について解説しています。 サンプルを別ウィンドウで開く（シンプル版） サンプルを別ウィンドウで開く（リアルタイム版） コードを確認する ▼シンプルなバリデーション ▼ちょっと凝ったバリデーション まずはセマンティックなマークアップを WAI-ARIAを使ったコーディングというと、とにかくrole
WebP画像の使い方
2020年夏のウェブ技術の見直しシリーズ第2段（第1段はこちら）として見直していたWebPの情報ですが、2022年2月にPhotoshopデスクトップ版でWebPがネイティブサポートされました。macOS Big Sur / iOS 14以降のSafariを含む最新のブラウザではWebPがサポートされています。導入しやすくなったいま、もう一度特徴をおさらいしておくと良さそうですね。 ということで、以下はWebPについてのまとめです。2020年7月の情報を2022年2月に更新しました。 なんでもかんでもWebPでいいわけではない 試しにUnsplash でランダムに10枚の写真を選んで、ImageOptimとcwebpコマンドラインツールでjpgとwebpに書き出してみました。結果、WebPのファイルサイズが小さくなる画像もあれば、JPEGのほうが小さくなる画像もありました。たまたまだと思い
音を操るWeb技術 - Web Audio API入門 - ICS MEDIA
Webにおける表現はどんどん進化しています。Webサイトには当然のように動画が埋め込まれるようになり、CSSやSVG、canvasでのさまざまな表現が頻繁に見られるようになりました。さらにAR、VRといった表現も台頭し筆者も毎日ワクワクしながらインターネットの海を泳いでいます。 その中であまりメジャーではないと感じるのは「音」による表現です。もちろん音を用いた素晴らしいWebサイトはたくさんありますが、環境の制約が視覚表現以上に大きいため多くは見られないのでしょう。 とはいえ、音と視覚表現を組み合わせることによって表現できる世界観、インタラクション、その他諸々は計り知れないと筆者は思っています。今後オーディオなどの技術の進歩によって上記で述べた制約も乗り越えられるようになるかもしれません。時代を先どりしたい読者に向けて、今回の記事ではWebで音を扱う技術Web Audio APIについてお
Webで使えるカラーネームと、そのカラーコード・RGB値一覧
2019年3月13日 CSS, 色彩 Webサイトを作るとき、通常色の指定にはカラーコードを記述しますが、決められた色名称を使うこともできます。色を自分で一から探すより、リストの中から選ぶ方がイメージにあう色が探しやすいよなぁ…という場面があったり、単純に色の名前からカラーコードやRGB値を知りたいということが時々あったので、一覧にまとめました。新たに加わった「rebeccapurple」も一覧に入れていますよ。 追記：カラーコードをRGB値に変換するツール作りました→「Quick HEX to RGB」 覚えやすい・使いやすい色 Webサイトの制作途中やテスト段階では、手軽に「とりあえず」色をつける…ということもあります。そんな時は短くてスペルの簡単な色名称を覚えておくと便利です。よくある「red」や「blue」だと彩度が高すぎて使いにくい、ということも。まずは私がよく使う、覚えやすく
Webサイトを使いやすく！UIデザインのCSS小技テクニック21個まとめ（実例サンプルコード付）
素敵なインターフェースを心がけ、ユーザーエクスペリエンスを格段に改善することができる、UIデザインの重要ポイントを具体的なHTML/CSSのサンプル例と一緒にご紹介します。これらの各ポイントは、もともと@steveschogerがTwitterでツイートした内容となります。 1. アイコンはラベルよりも少しだけ明るくしよう。 文字ラベルの横にアイコンを配置するときは、少しだけ色を明るくしてみましょう。こうすることで、もっとも重要な情報（文字ラベル）をうまく強調することができます。 See the Pen Little UI Details : 小技テクニック01 by PhotoshopVIP (@vipcrew) on CodePen. 2. 明るい背景色では、白文字に少しだけ影を追加しよう。 背景色が明るく、白文字を利用するときは、文字に少しだけ素敵な影を加えることで、より読みやすくな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web Development Gallery Eases