Nishiki-Hub

国内外のPC/PCパーツ/スマホ/Appleなどの最新情報を取り上げています

Webページから参考文献表示形式を生成してくれるブックマークレット

f:id:doskokimeil127-dosd:20210715184252p:plain

錦です。

私も大学に入って「レポート」を書くようになりました。その中でも参考文献表示を書くことは若干面倒なものです。なのでブックマークレット使って自動化したので配布します。

この記事の注意(必読!!)の欄を読んでから使ってください。

出力されるフォーマット

フォーマット  筆者名:” 記事名(title) ”,URL,(西暦年,月,日 閲覧)
 例:
Nishikiout:”第12世代Core「Alder Lake」のi9-12900K・i7-12700K・i5-12600Kの詳細な仕様がリーク ~ PL1やPL2、全コアブーストも明らかに - Nishiki-Hub”,https://nishikiout.hatenablog.com/entry/2021/07/15/164337,(2021,7,15 閲覧)

登録

全デバイス共通

全デバイス共通で、何らかの方法で以下の文字全体をブックマークします(すべて選択(Ctrl+A)を利用すると便利です)。

この記事自体を一度ブックマークしていただき、ブックマークを編集する画面で、URLを上のリンク(というかスクリプト)にすべて置き換えてください。

簡単な登録方法

PC/Mac

MS Edge/Chrome

Windows/Mac/LinuxChromeMicrosoft Edgeなどのデスクトップ版では以下のリンクをそのままブックマークしてください。

ブックマークを登録

ChromeMicrosoft Edgeでは、このリンクをブックマークバー(Edgeの場合はお気に入りバー)にドラック&ドロップすることでブックマークできます。

ブックマークバーはCtrl+Shift+Bのショートカットで表示/非表示できます。

f:id:doskokimeil127-dosd:20210715194417p:plain
Chromeでの動作画像(Windows

f:id:doskokimeil127-dosd:20210715194504p:plain
MS Edgeでの動作例(Windows

MacSafari

MacSafariでは、このページをブックマークしていただき、ブックマークを編集して、上記の「全デバイス共通」からスクリプトをコピーして、全てをそれに置き換えていただくと簡単です。

スマホ

iOS Safari

iOS Safariでは、Mac同様にこのページをブックマークしていただき、ブックマークを編集して、上記の「全デバイス共通」からスクリプトをコピーして、全てをそれに置き換えていただくと簡単です。

f:id:doskokimeil127-dosd:20210715194006p:plain

まず、本マークを長押ししていただいて「ブックマークに登録」を押します。

そして、ブックマークの画面から、ブックマークを編集します。iOS 13以降なら、ブックマークしたものを長押しすることで編集のボタンが出てくるのでそれを押してください。

f:id:doskokimeil127-dosd:20210715194210p:plain

上の名前は何でも構いません。自分のわかりやすいようにしてください(余談:私はよくコピーをCPと略します)。

下に先程のスクリプトを貼り付けてください。

その後は完了を押したら完成です。

f:id:doskokimeil127-dosd:20210715194636j:plain
iOS Safariでの動作例

使用方法

使用方法は簡単です。引用・参考にしたWebサイトで登録したブックマークを開いてください。上記の動作例のようなポップアップに生成されたものが出てくるので、そのままコピーして、WordなりPagesなりGoogle Docなりの参考文献に貼り付けてください。

注意(必読!!)

  • このブックマークレットは、文字数省略のため外部からJSファイルを呼び出しています。そのため、利用にはネットワーク回線が必要です。
  • HTMLファイルから筆者情報が得られない場合、筆者の部分が「筆者情報は手動で入力してください」となりますので、手動で入力してください(詳細は下記のちょっと詳細な話から)
  • タイトルが不適切な場合、適切に書き換えてください(このブックマークレット機械的にタイトルを取得しています)。

互換性

確認が取れているものに限ります。

EdgeHTMLの確認全くしてないんですけど(というか出来ないんですけど)、どうせ誰も使ってないだろうし。いっか。

ちょっと詳細な話

JSの勉強がてらに作ってみました。

今回、筆者情報を実装するかしないかについて若干悩みましたが、実装しました。筆者情報はMeta要素のAuthorを参照していますが、なかった場合、筆者情報なしとしています。正直、AuthorはSEO的にも何の意味もなく、HTMLの必須要素でもないため、ちゃんと動作するか検証するために50くらいのサイトで検証しましたが、3つくらいしかAuthorが設定されていませんでした。なので、もうほぼ手動で入力を求めることになりそうです。

以下、取得している情報です。

取得要素
筆者 <meta name="author">
タイトル <title>
URL location.href
getFullYear
getMonth
getDate