リンク集サイトが簡単に作れるサンプルを作りました。
データを入力するだけですぐリンク集サイトにできます。
実際に使っているサイトがこちらです。
上のサイトはいろんな個人ゲーム開発者を応援するつもりで作ったんですが、このサイト自体誰にも注目されずネットの闇に埋もれてしまうことがほぼ確定なので、せっかく作ったサイトデザインだけでも世の中の役に立ってもらうために公開します。
本当は有償にしたいんですがどうせ誰も買ってくれないので無料でダウンロードできます↓
(一緒にグッズ買ってくんないかなぁ。。)
使い方
ローカルで使うにはxamppなどのローカルサーバー環境が必要です。
フォルダに入っているdata.jsonにデータを追加するだけで画面に反映されます。
jsonファイルはネット上で見ることができてしまうので個人情報など重要な情報は入れないでください。
プログラム
一応技術ブログなのでどんな感じなのか載せておきます
let listData;
const fileName = "data.json";
let sortType = 2;
let searchType = 0;
let searchWord = "";
window.onload = () => {
//jsonファイル取得
fetch(fileName)
.then(function (response) {
return response.json();
}).then(function (data) {
//タグリスト作成
const tagNames = [];
for(let i = 0; i < data.length; i++){
const tags = data[i].tags.split(',');//タグをカンマで分割
for(let k = 0; k < tags.length; k++){
let flag = false;
for(let j = 0; j < tagNames.length; j++){
if(tagNames[j] == tags[k]){
flag = true;
break;
}
}
if(!flag){//一致が無ければ配列に追加
tagNames.push(tags[k]);
}
}
}
tagNames.sort(new Intl.Collator().compare);
let html = "";
for(let i = 0; i < tagNames.length; i++){
html += `<a href="#result"><div class="tag" onclick="tagSearch('${tagNames[i]}');">${tagNames[i]}</div></a>`;
}
let tagList = document.getElementById("tag-list");
tagList.innerHTML = html;
//サイトリスト作成
const siteNames = [];
for(let i = 0; i < data.length; i++){
let flag = false;
for(let j = 0; j < siteNames.length; j++){
if(siteNames[j] == data[i].siteName){
flag = true;
break;
}
}
if(!flag){//一致が無ければ配列に追加
siteNames.push(data[i].siteName);
}
}
siteNames.sort(new Intl.Collator().compare);
html = "";
for(let i = 0; i < siteNames.length; i++){
html += `<a href="#result"><div class="tag" onclick="siteSearch('${siteNames[i]}');">${siteNames[i]}</div></a>`;
}
let siteList = document.getElementById("site-name-list");
siteList.innerHTML = html;
listData = data;
});
}
/**
* 並び替え
*/
function sort(type){
if(sortType == type)return;
const list = ["new", "old", "a-z", "z-a"];
document.getElementById(list[sortType]).classList.remove('selected');
document.getElementById(list[sortType]).classList.add('cursor');
sortType = type;
document.getElementById(list[sortType]).classList.add('selected');
document.getElementById(list[sortType]).classList.remove('cursor');
if(searchType == 1){
siteSearch(searchWord);
}else if(searchType == 2){
tagSearch(searchWord);
}
}
/**
* サイト名で検索
*/
function siteSearch(str){
searchWord = str;
searchType = 1;
document.getElementById("result").innerHTML = "「" + str + "」検索結果";
const games = listData.filter(function(item, index){
if (item.siteName == str) return true;
});
//並び替え
const list = [compareOlder, compareNewer, compareHigher, compareLower];
games.sort(list[sortType]);
//html作成
let html = "";
for(let i = 0; i < games.length; i++){
html += makeCard(games[i]);
}
var gameList = document.getElementById("game-list");
gameList.innerHTML = html;
}
/**
* タグで検索
*/
function tagSearch(str){
searchWord = str;
searchType = 2;
document.getElementById("result").innerHTML = "「" + str + "」検索結果";
const games = listData.filter(function(item, index){
if (item.tags.indexOf(str) > -1) return true;
});
//並び替え
const list = [compareOlder, compareNewer, compareHigher, compareLower];
games.sort(list[sortType]);
//html作成
let html = "";
for(let i = 0; i < games.length; i++){
html += makeCard(games[i]);
}
var gameList = document.getElementById("game-list");
gameList.innerHTML = html;
}
//html作る
function makeCard(data){
const tags = data.tags.split(',');//タグをカンマで分割
let html = `<div class="card">`;
html += `<a href="${data.url}" target="_blank" rel="nofollow noopener"><img src="thumbnail/${data.thumbnail}"/></a>`;
html += `<div class="right"><div class="title"><a href="${data.url}" target="_blank" rel="nofollow noopener">${data.title}</a></div>`;
for(let i = 0; i < tags.length; i++){
html += `<div class="tag" onclick="tagSearch('${tags[i]}');">${tags[i]}</div>`;
}
html += `<div class="site-name" onclick="siteSearch('${data.siteName}');">${data.siteName}</div>`;
html += `</div></div>`;
return html;
}
//ランダムでリンクを選ぶ
function randomLink(){
const num = listData.length * Math.random() | 0;
window.open(listData[num].url);
}
//aが大きい方が１(昇順に使う)
function compareHigher(a, b){
return new Intl.Collator().compare(a.title, b.title);
}
//aが小さい方が１(降順に使う)
function compareLower(a, b){
return new Intl.Collator().compare(b.title, a.title);
}
//aが新しいが１(昇順に使う)
function compareNewer(a, b){
var r = 0;
if( a.id < b.id ){ r = -1; }
else if( a.id > b.id ){ r = 1; }
return r;
}
//aが古い方が１(降順に使う)
function compareOlder(a, b){
var r = 0;
if( a.id > b.id ){ r = -1; }
else if( a.id < b.id ){ r = 1; }
return r;
}
//メニュー
function menuOpen(){
document.getElementById("menuboard").style.display = "block";
}
function menuClose(){
document.getElementById("menuboard").style.display = "none";
}
//トップへ戻るボタン
function backToTop(){
const pos = window.pageYOffset + document.getElementById("search-area").getBoundingClientRect().top;
window.scrollTo({top: pos, behavior: "smooth"});
}
window.onscroll = function() {
const elm = document.getElementById("top-btn");
if(window.pageYOffset > 300){
elm.style.display = "flex";
}else{
elm.style.display = "none";
}
}
javascriptでこういうサイトを作るのは初めてなので良い作り方なのかどうかは知りません(-_-;)
fetchでjsonを取得してリンクを生成しています。
並び替えを配列のsortというメソッドでやってます。めっちゃ便利です。RPGのアイテムソートとかにも使えるんじゃないかな。
おしまい
サイト制作は自分のサイト以外はしたことが無いのでこういう作り方が良い方法かどうかはわかりませんがjsonとjavascriptでさっくりサイトが作れることだけは間違いないです。
javascriptでブラウザゲーム作ってるとサイトも作れるってことです(htmlとcssの知識も必要だけどね)。