Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

データベース不要!!データをURL上に保存する方法

上記のgulp-generatorで、自分が作成した設定項目を他の人と共有できるように以下のようなことをやってみました。


gulp-generatorの右のボックスの「設定URLを取得」というボタンを押すと


このように短縮URLが取得できます。
このURLにアクセスする事で先ほどと全く同じ設定から始める事ができます。
つまり、gulpfile.jsやpackage.jsonを他の人と共有したり、プロジェクトごとにブックマークして使うと言った事もできます。
ではどうやってデータの受け渡しをしているのでしょうか?
私の考えた方法は下のようにURLのハッシュにJSONデータを付与する事でした。

http://steelydylan.github.io/gulp-generator/#{useAltJs:true,minifyCss:true,useBrowserify:true,.....}

ただしこのサイトでは設定項目が多すぎるのでハッシュタグが長くなりすぎてしまい、あまり他の人とのURLの共有に向きません。
なので、一度設定したJSONをしたのようにBase64で圧縮し、その圧縮したURLをGoogle URL Shortener APIで圧縮する方法で今回の実装を実現しました。

共有する側

  1. 設定データをJSON化
  2. JSONをstringifyで文字列化
  3. 文字列をBase64エンコード
  4. エンコードした文字列をURLのハッシュタグに付与
  5. Google URL Shortener APIでURLを短くする
  6. 共有

共有されたURLを開く側

  1. 短縮URLからエンコードされた文字列の入ったハッシュタグ付きのURLを取得
  2. ハッシュタグをデコード
  3. デコードされた文字列をJSONに変換
  4. 設定データに反映

使用したライブラリ


使用したAPI


使い方として、まず以下のサイトにアクセスします。


その後、新規プロジェクトを以下のリンクをクリックして作成します。


次に以下のリンクをクリックしてAPIの選択画面に移動します。


次にフォームに「shortener」と入力する事で短縮URLを作成するためのAPIを絞り込めますので、そのAPIを有効にしましょう。後は、そのAPIで発行されたキーをプロジェクトで使用するだけです。


以下のようにjQueryのAjaxからでも短縮URLを取得する事が出来ます。

$.ajax({
	url: "https://www.googleapis.com/urlshortener/v1/url?key=" + key,
	type: "POST",
	contentType: "application/json; charset=utf-8",
	data: JSON.stringify({
		longUrl: url,
	}),
	dataType: "json",
	success: function(res) {
		console.log( res.id);
	},
})

ただし、他のURLで使用されないように必ず、プロジェクトページでリファラーを設定してください。


参考にしたサイト



堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド