JSON Web Token（JWT）の仕様と実装例を紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
システム構成における「フロントエンド/バックエンド」という区分けは、今や当たり前のものとなりました。 かつてはWebページのデザイン、そのコンテンツとデータ表示、認証動作など、すべてがごっちゃになっていましたが、「フロントエンド/バックエンド」で区分けすることでシステム管理やメンテナンスの効率が上がったため、今後もこの区分けはますます推進されていくことが予想されます。 そのなかで、フロントエンド側のHTMLとバックエンド側のシステムとの連携で認証動作の中核を担うのが、今回紹介するJWT（JSON Web Token）です。 そこで本記事では、そもそもJWTとは何か、JWTの実装例について説明します。 そもそもJWTとは？ HTMLファイルでは認証・認可ができないのがこれまでの常識でしたが、Ajax以降、バックエンドのAPIとの通信を行うことで動的なページと同様に認証動作が可能になりました。
2024年版、ファビコン画像の作成方法と設置方法、さまざまなデバイスに対応させるには6種類のファイルが必要
最近のデバイスやブラウザに対応させる最小限のファビコンセットには、6種類のファイルで対応できます。ブラウザはもちろん、スマホやタブレットにも対応し、さらにSVGも含めて6種類だけです。 ファビコンに必要な6種類のファイル、ファビコンの設定方法、ファビコン画像を作成する方法について紹介します。 How to Favicon in 2024: Six files that fit most needs by Andrey Sitnik Sitnik氏は、PostCSS, Autoprefixer, NanoIDの制作者です。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2024/2/28: 元記事がアップデートされたので、当記事もアップデートしました。 はじめに ファビコンの設定方法 -ショートバージョン ファビコンの設定方法
Nuxt.js で Markdown ベースのブログを構築する（Markdown 編） - jmblog.jp
この記事は「Nuxt.js で Markdown ベースのブログを構築する」シリーズの一部です。 Nuxt.js で Markdown ベースのブログを構築する（Markdown 編） ← ここ Nuxt.js で Markdown ベースのブログを構築する（Nuxt.js 編） Nuxt.js で Markdown ベースのブログを構築する（サイトパフォーマンス編） 本ブログは、 Markdown で記事を書き、 Nuxt.js の静的ファイル生成機能を使って静的ファイルを書き出し、 Netlify を使ってホスティングする というシステム構成になっている。具体的にどのようにしているか簡単に紹介する。 processmd を使った Markdown ファイルの変換処理 それぞれのブログ記事は YYYY-MM-DD-xxxxx.md という Markdown ファイルに書いている。ファイル
theme.json を使ったテーマデザインの設定
以下は、Jeff Ong が書いた WordPress.org 公式ブログの記事「Configuring Theme Design with theme.json」を訳したものです。 誤字脱字誤訳などありましたらフォーラムまでお知らせください。 WordPress 5.8以降、新しいツールである “theme.json” をテーマ開発に利用できるようになりました。初めて聞いたかもしれませんし、すでにこれを試用し、テーマを開発しているかもしれません。いずれにせよ、今は WordPress テーマにとってエキサイティングな時期ですので、この記事を読んでいただけて嬉しく思います。 当記事では、この新しいフレームワークを簡単に紹介し、実用的なヒントと例をいくつか共有することで、何ができるのかを説明していきます。 theme.json とは 技術的に言えば、theme.json はテーマのディレクト
)
Grid.js - React/Angular/VueをサポートしたHTMLテーブルライブラリ MOONGIFT
HTMLで使ってデータをテーブル表示するのは簡単です。しかし、ちょっとUIをよくしたり、ソートなどの機能を追加しようと思うと、途端に面倒になります。素のHTMLのままではとても使い勝手がいいとはいえません。 そんなHTMLテーブルを手軽に高機能化してくれるライブラリがGrid.jsになります。 Grid.jsの使い方 データはJSONで渡すだけです。 HTMLを使うこともできます。 ページネーションも使えます。 キーワードによるフィルタリング。 ソート。 横に長いテーブルも問題ありません。 Grid.jsはライブラリ依存がないJavaScriptで作られています。しかし、Angular/React/Vueをサポートしており、フレームワークと組み合わせて高機能なテーブルを提供できます。足りない機能はフレームワーク側で提供すればいいでしょう。 Grid.jsはTypeScript製のオープンソ
世界の250の国の各データをjsonやcsv、xmlなどで配布する・「countries」
countriesは世界の250の国の各データをjsonやcsv、xmlなどで配布するプロジェクトです データ内容は以下の通り { "name": { "common": "Austria", "official": "Republic of Austria", "native": { "bar": { "official": "Republik Österreich", "common": "Österreich" } } }, "tld": [".at"], "cca2": "AT", "ccn3": "040", "cca3": "AUT", "cioc": "AUT", "independent": true, "status": "officially-assigned", "currency": ["EUR"], "idd": { "root": "+4", "suffixes
第Ｎ曜日 - 第2水曜日の一覧などをWeb APIで
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ミーティングなどで、毎月第1、第3水曜日に行うなんて決めたりすることがあります。個人的にはコミュニティの勉強会を毎月第1水曜日と第3水曜日で行っています。そうした時に、次のミーティングやイベントの日がいつになるのか忘れてしまったりします。 それを防ぎ、次の予定がいつなのかすぐに分かるのが第Ｎ曜日です。Web API形式で簡単に取得できます。 第Ｎ曜日の使い方 最初に曜日などを決めます。 そうすると一覧で取れます。HTMLの場合はExcelなどに貼れます。 JSONでも取得できます。 第Ｎ曜日では前後1年の情報も取得できます。これは年末年始の調整があることを考慮してです。JSONで取れれば、プログラムに組み込むこともできるでしょう。シンプルな仕組みなので、融通が利きづらい部分はあるか
WebアニメーションはLottieがオススメ！基本の使い方完全ガイド【2020年版】
最近のウェブサイト制作では、アニメーションがますます重要になってきています。 この記事は、Lottieの使い方をまとめた基本ガイドです。Lottieの魅力はもちろん、After EffectsへのAiファイルの読み込みやアニメーション作成、プラグインを利用したJSONファイルの書き出し、Webサイトでのアニメーション表示まで一連の流れをまとめています。 Lottieを利用すれば、手軽にそして軽量に動画を貼り付けることができるので、これまでアニメーションを試したことのないひとにもオススメです。 コンテンツ目次 1. Lottie（ロッティー）って何？ 2. Lottieを利用するメリットは？ 3. Lottieアニメーション作成手順ガイド 4. After EffectsへのAiファイルの読み込み 5. After Effectsでアニメーション作成 6. Lottie JSONファイルでア
geoapi - IPアドレスを位置情報に変換するWeb API
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 位置情報はGPSからしか取れない訳ではありません。有名なところではWiFiやIPアドレスからも位置情報が取得できます。もちろん精度は高くないことも多いですが、スマートフォンは様々な情報を組み合わせて位置情報を取得しています。 今回紹介するgeoapiはそんなIPアドレスベースの位置情報取得を簡易化してくれるWeb APIです。 geoapiの使い方 /me だと自分のIPアドレスに基づく位置情報が返ってきます。 IPアドレスを指定すると、そのアドレスの位置情報が取得できます。 IP v6にも対応しています。 geoapiはMaxMindのデータを元に、Web API化しています。JSONで返ってきますので、Webアプリケーションの中に組み込んだり、サーバ側で使うこともできるでしょう
PWA asset generator - PWA用のアイコン/スプラッシュスクリーン用画像を一気に生成 MOONGIFT
PWA（Progressive Web Apps）は今後のWebを担う大事な技術になっています。多数ある技術を合わせたものなので、すべてを実装するのは難しいですが、逆に一部からでもはじめられるのがメリットです。 そんなPWAでアプリとしてインストールする機能に注目が集まっていますが、面倒なのが多数のアイコンを作成しなければならない作業です。そこで使ってみたいのがPWA asset generatorです。 PWA asset generatorの使い方 PWA asset generatorを実行します。画像やSVGファイルを指定するだけです。 $ pwa-asset-generator new-org-logo.png 16:24:49 getSplashScreenMetaData Initialising puppeteer to load latest splash screen
アニメーション実装の選択肢のひとつになると思う。Lottieを試してみた。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
サイト制作時に今は当たり前のようにおしゃれなアニメーションがついてる時代がきましたね。 CSS3で実装できることも増え、あんまりゴリゴリJavaScriptでってことは減ってきてる気がします（もちろん必要なときはいっぱいあるのでケースバイケースですが）。 制作者としては、意図した通りのアニメーションをつくりたい、それもなるべく手間をかけずに、という思いがあるのではないでしょうか。 そんな悩みを解決してくれるかもしれない「Lottie」を試してみました！ ※今回、After Effectsの使い方はありません、ごめんね。JavaScript側の組み込み方の説明です。 Lottieとは Airbnb制作のiOSやAndroidにも対応したアニメーション用のライブラリです。Adobe After Effectsで作ったアニメーションを、そのままWebにもってこれるやつらしい。 一部使えない機能も
Googleスプレッドシートを瞬時にJSON形式にするWebアプリ・「Gson」
GsonはGoogleスプレッドシートのデータをURLの入力だけで瞬時にJSON形式にコンバートされたURLを返してくれるWebアプリです。 使い方は他の同様のツールと同じで、CSV形式を選択して公開設定にしてから使えば良いみたいです。URLを入力すると瞬時にJSON形式で書かれたデータのURLを返してくれます。 楽でいいんじゃないでしょうか。尚、データは送信されないそうです。 ツールを使わない方法記事内容を否定するようで若干不本意なんですが、何のツールも使うことなくJSONに変える方法です。 前述と同じようにCSVで公開したシートのURLからスプレッドシートのIDをコピーして以下のURLのID部分にペーストします。 https://spreadsheets.google.com/feeds/worksheets/スプレッドシートのID/public/basic?alt=jsonサンプルと
JavaScriptでJSONデータを作る方法
JavaScriptでJSONデータを作る方法を紹介します。 １．問題点 JavaScriptで下記のようなJSONデータを作りたいと思います。 {"foo":"abc","bar":"xyz","hoge":100} が、JSONデータの作り方が分かりません。 初期値が分かっていれば上記のフォーマットをそのまま書けばいいのですが、foo/bar/hogeの値は処理の中で決まります。 ということで、JavaScriptでJSONデータを作る方法を紹介します。 ２．JavaScriptでJSONデータを作る JavaScriptでJSONデータを作る方法の1つとして下記があります。 <script> var data = {}; data["foo"] = "abc"; data["bar"] = "xyz"; data["hoge"] = 100; json_data = JSON.str
Elegant Wedding Catering in Houston | Bailey Connor Catering
At Bailey Connor Catering, we take immense pride in transforming your most significant moments into cherished memories. Every wedding we cater is a testament to our commitment to excellence and unwavering attention to detail. In the thriving heart of wedding catering in Houston, we transcend the ordinary, offering an elegant amalgamation of the time-honored Lone Star tradition and contemporary cul
JSON to CSV Converter - Konbert
You can also use the API to convert data, check out the documentation to learn more. curl -X POST https://konbert.com/api/v1/convert \ -H "Authorization: Bearer ${API_KEY}" \ -d "input[file]=@myfile.json" \ -d "input[format]=json" \ -d "input[options][flatten_objects]=true" \ -d "output[format]=csv" \ -d "output[options][delimiter]=," JSON stands for JavaScript Object Notation and it's a plain-tex
Best JSON Formatter and JSON Validator: Online JSON Formatter
Ad blocking? It's okay. Please share to support us: JSON Formatter and JSON Validator help to auto format JSON and validate your JSON text. It also provides a tree view that helps to navigate your formatted JSON data. It helps to validate JSON online with Error Messages. It's the only JSON tool that shows the image on hover on Image URL in a tree view. It's also a JSON Beautifier that supports ind
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SVGやJPG等の画像の最適化、JSON/JS/TS/CSSなどのフォーマット、カラーコード変換などフロントエンド開発をサポートするツールをページ移動せずに使えるWebアプリ・「Frontend Toolkit」
)
Gantt Chart - SVG/Canvas/SSRをサポートしたガントチャート MOONGIFT
座標とタイムスタンプのデータをJSONで渡すとGoogleマップ上でその経路をアニメーション表示してくれるスクリプト・「maps-journey-replay」
https://www.lists.design/