HTMLヘッダ内のメタタグ（<meta name="" content="">）を編集（ない場合は作成も）をするスクリプトを書いてみました。
以前にOGPなどの外部表示設定を確認したのでスクリプトで動的に変えてみたかったのが理由です。
ただツイッターなどのサービスではOGPのためのアクセスでスクリプト実行までしてなさそうなので、サーバーサイドで書き換える必要があります。
なので今回のスクリプトはnode.js向け、あるいはタイトルのみの編集向けです。
メタタグ編集クラス
なんとなくクラスにしてますがstaticメソッドなので現状ただのオブジェクトです。
|
1 2 3 4 5 |
import Meta from "./MetaTag" ... Meta.setTitle("New Title"); Meta.setMeta("twitter:description","desc for twitter",false); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
class MetaTag{ static setTitle(title){ document.title = title; this.setMeta("og:title",title); this.setMeta("twitter:title",title); } static setDescription(description){ this.setMeta("description",description); this.setMeta("og:description",description); this.setMeta("twitter:description",description); } static setUrl(url){ this.setMeta("og:url",url); this.setMeta("twitter:site",url); } static setImage(img){ this.setMeta("og:image",img); this.setMeta("twitter:image",img); } //createMeta is create meta static createMeta(name,content){ let _m = document.createElement('meta'); if(name.startsWith("og:")){ _m.setAttribute('property', name); }else{ _m.setAttribute('name', name); } _m.setAttribute('content', content); document.head.appendChild(_m); } //setMeta is change meta tag //eg. name = description, og:type, twitter:card static setMeta(name, content, isCreate=true){ const metas = document.head.getElementsByTagName("meta"); let isRewrited = false; for (let meta of metas) { let _name = null; if (name.startsWith("og:")){ _name = meta.getAttribute('property'); //ogp } else { _name = meta.getAttribute('name'); //other } if (_name !== null && _name === name) { isRewrited = true; meta.setAttribute('content', content); } } if(isCreate && !isRewrited){ this.createMeta(name, content); } } } export default MetaTag; |
まずdocument.headからメタタグを探してOGPならproperty、それ以外ならnameを参照します。
設定したい要素を見つけたらその変更、タグ自体がない場合には作成までしてます。
ついでにタイトルやディスクリプションなど複数に同じ内容を記述するものはまとめておきました。
こんにちは。初めまして。「はたらくくるま図解3D」の製作者のNarumiumさんで宜しいでしょうか？メール送ったのですが、エラーで戻ってきてしまい、この場を使いアプリの感想をさせてください。すみません。
路線バスのモデルが実物のようにリアルに出来ていたので、バスファンの自分は思わずダウンロードしてしまいました！
要望なのですが、ただ眺めるだけではなく、走らせる事もできたらいいなと思います。
バスの行先が、「空01青色駅」ってのも面白いですね！
架空の街「青色町」？を舞台にさまざまな車を運転するシミュレーションゲームなんてのもいいかもしれません。
バスファンとしては、路線バスを運転してみたいです！(路線バス運転シミュレーションを是非製作して！)もちろんタクシーでお客さんを拾い稼いだり、パトカーでパトロールしたり。子供から大人(バスファンや警察・消防ファンなどの方)まで幅広く愛されるアプリを期待しています！長くなってすみませんでした。宜しくお願いします！
こんにちは、たぶん昔開発した「はたらく！くるまずかん３D」のことかと思います。
非常にありがたいお言葉でうれしいです！
アプリのリリース仕様が変更された関係でしばらくUnity（このアプリを作った方法）での開発をする予定はないのですが、色々と環境が整いましたら考えてみたいと思います。