0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

自己サイト内のタグ検索システムを作った

Posted at

概要

Googleサイト内にタグのような仕組みを作ってみた。

動機

自分のサイトの記事が増えてきたので、同一のテーマについての記事を整理(要するにタグ付け)したい。

開発環境

Googleサイト、Google Apps Script(GAS)

仕様

サイト内の各ページにタグを表す文字列を書いておき、自作のwebアプリで処理
・アプリ側で指定したタグを含むページの検索ができる

実装

検索用アプリ

アプリには①検索(タグ入力・指定)用(デフォルト)、②検索結果表示用、の2ページを作成する

  • それぞれの構造を個別のHTMLで作成し、アプリのURLに指定した検索タグ名を含むプロパティによって表示するページを変更
  • 検索ページにプロパティ付きのURLを生成することで別ページに誘導する
  • 結果ページに該当記事のリンクを表示

サイト側(タグの実装)

記事に付けるタグを該当ページ上部に表示させる
HTMLを埋め込む形でリンクとして作成することで、クリックした際に関連するページ(同タグを含む)を閲覧できるようになった
タグの文字列をページ末尾の目立たない位置に配置し、アプリでの情報取得時に利用する

Googleサイトに埋め込んだリンクは直接のスクレイピングでは取得できないため、シンプルなテキストとして別途記述することにした

使い方

検索

トップページからタグ検索用のアプリを開き(埋め込みでもリンクからでもOK)、検索したいタグを入力する(「#」は含めない)
②「検索」を押して表示されるリンクをクリック

①' 記事に表示されたタグのテキスト部分をクリック

表示された任意のリンクから記事に飛べる

参考サイト

【JavaScript入門】appendと何が違う?appendChild徹底解説 | 侍エンジニアブログ
ウェブアプリ | Apps Script | Google for Developers
URL クエリパラメータの正しい設定方法 – WebAntenna活用ノート
GAS: HTML側にデータを受け渡す方法(スクリプレット) – 微風 on the web…
target=target - ターゲット指定 - とほほのWWW入門
【HTML】スペースを入れる2通りの方法(サンプルコード付き) - WEBCAMP MEDIA

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?