CINXE.COM
話題の本 | カーリル
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>話題の本 | カーリル</title> <meta name="theme-color" content="#00A1EA"> <meta name="application-name" content="カーリル" /> <meta name="apple-mobile-web-app-title" content="カーリル"> <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="shortcut icon" href="/favicon.ico"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> <link rel="search" type="application/opensearchdescription+xml" href="https://calil.jp/public/search.xml" title="カーリル" /> <link rel="alternate" type="application/rss+xml" title="カーリルのブログ" href="https://blog.calil.jp/feed" /> <link rel="stylesheet" href="/public/web-html/css/index.css"> <style type="text/css" media="print"> #menu, #menu_sp, .navigation { display: none; } #next, #next * { -webkit-print-color-adjust: exact; } </style> <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' https://www.googletagmanager.com https://www.google-analytics.com https://ssl.google-analytics.com; script-src-elem 'self' 'unsafe-inline' https://browser.sentry-cdn.com https://js.sentry-cdn.com https://www.googletagmanager.com https://www.google-analytics.com https://ssl.google-analytics.com; connect-src 'self' *.sentry.io https://www.google-analytics.com https://api.calil.jp http://127.0.0.1:8080 http://127.0.0.1:8090; img-src 'self' https: data:; style-src 'unsafe-inline' *;" /> <script> window.sentryOnLoad = function () { Sentry.init({ dsn: "https://50fb31d25d3f70d43eee1e7b578ba61f@o28286.ingest.sentry.io/4506668916146176", release: "467503216480973968", integrations: [ new Sentry.BrowserTracing({ tracingOrigins: ['localhost', /^calil\.jp/, /^\//], }), ], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. // We recommend adjusting this value in production tracesSampleRate: 0.1, }) } </script> <link href="//calil.jp/public/css/category_menu.css" rel="stylesheet" type="text/css" /> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-S0SYRD0CEW"></script> <script> var dnt = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack; if (dnt!=='1' && dnt!=='yes') { window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-S0SYRD0CEW'); } else { console.log('Do-Not-Track, not loading analytics.'); window.gtag = function() {}; } </script> </head> <body> <div id="menu"> <div class="container"> <a href="/"> <img src="/public/web-html/assets/home.svg" title="ホーム"> </a> <a href="/popular/">今話題の本</a><a href="/library/">図書館マップ</a><a href="/recipe">本のレシピ</a><a class="large" href="/list">読みたいリスト</a> <div class="dropdown"> <button aria-disabled="true" onclick="event.target.focus();">もっと見る<span class="caret" aria-hidden="true">▼</span></button> <div class="menu" role="menubar"> <a tabindex="0" class="small" href="/list">読みたいリスト</a> <a tabindex="0" href="/review/">書評</a> <a tabindex="0" href="/local/">カーリルローカル</a> <a tabindex="0" href="/touch/">カーリルタッチ</a> <a tabindex="0" href="/stamp">図書館スタンプラリー</a> </div> </div> <div class="right"> <a href="/login?redirect=/popular/">ログイン・新規登録</a> <div class="dropdown"> <button aria-disabled="true" onclick="event.target.focus();">設定<span class="caret">▼</span> </button> <div class="menu" role="menubar" aria-label="設定"> <a tabindex="0" href="/settings">お気に入り図書館</a> <a tabindex="0" href="/profile/source">高度な検索設定</a> <a tabindex="0" href="/login?redirect=/popular/">ログイン</a> </div> </div> </div> </div> </div> <div id="menu_sp" role="menu"> <div class="container"> <a class="logo" href="/"> <img src="/public/web-html/assets/logo-sp.svg" title="カーリル"> </a> <a class="login" href="/login?redirect=/popular/">ログイン</a> <a class="setting" href="/settings">図書館の設定</a> <a href="/popular/">今話題の本</a> <a href="/library/">図書館マップ</a> <a href="/recipe">本のレシピ</a> <a href="/list">読みたいリスト</a> <a href="/review/">書評</a> <a href="/local/">ローカル</a> <a href="/stamp">スタンプラリー</a> </div> </div> <nav class="navigation"> <button class="menu_icon" aria-label="メニュー" aria-haspopup="true" aria-controls="menu_sp"></button> <button class="search_icon" aria-label="検索フォームの表示"> </nav> <div id="next" class="page_hide"> <div class="container"> <a class="logo" href="/" title="カーリルのホームに戻る"> <picture> <source media="(max-width: 1024px)" srcset="/public/web-html/assets/logo-mini.svg"> <img src="/public/web-html/assets/logo.svg" alt="日本最大の図書館蔵書検索・カーリル"> </picture> </a> <form action="/search" method="get"><input name="q" type="search" value="" placeholder="" autocomplete="off" autofocus="true"><button type="submit">さがす</button></form> </div> </div> <style> .container { max-width: 960px; margin: 0 auto; } .container a { color: #00ABFF; text-decoration: none; } h1 { font-size: 140%; color: #00ABFF; font-weight: 400; } h1 span { font-size: 50%; } h2 { font-size: 30px; } h3 { font-size: 100%; } h2, h3, h4 { font-weight: normal; margin-bottom: 0; } h4 { clear: both; } .clearfix:before, .clearfix:after, .dl-horizontal dd:before, .dl-horizontal dd:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, .btn-toolbar:before, .btn-toolbar:after, .btn-group-vertical>.btn-group:before, .btn-group-vertical>.btn-group:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after, .pager:before, .pager:after, .panel-body:before, .panel-body:after { content: " "; display: table; } .clearfix:after { clear:both; } .tab ul{ list-style-type:none; margin:0; padding:0; height:32px;/*ForIE*/ overflow:hidden; } .tab li{ float:left; list-style-type:none; font-size:87%; height:32px;/*ForIE*/ overflow:hidden; margin:0; padding:0; } .tab li a{ background-image:url(https://calil.jp/public/img/parts/tab.png); background-repeat:no-repeat; color:#00CAFF; background-position:0 2px; line-height: 32px; overflow: hidden; width: 167px; height: 32px; padding-top:4px; display:block; margin-right:5px; text-decoration:none; text-align:center; font-weight:bold; } .tab .border { clear: both; border-top: 5px solid #00CAFF; height: 3px; } .tab li img{ margin-right: 7px; margin-bottom: 2px; } .tab .selected, .tab li a:hover { color:white; background-position:-171px 2px; } @media screen and (max-width: 320px) { .tab li { font-size: 70% !important; } .tab li a { width: 128px !important; } } @media screen and (max-width: 680px) { .tab li a { width: 164px; margin-right: 0px; } .tab li a span img { margin-right: 0px; } } </style> <div class="container" id="result"> <h1>話題の本 <span>毎日更新、気になるベストセラー (<a href="http://amazon.co.jp" target="_blank">Amazonより</a>)</span></h1> <div class="tab popular" style="margin:20px 0 15px;clear:both" > <ul> <li><a class="selected" href="/popular/"><span>話題の本</span></a></li> <li><a href="/author"><span>作家リスト</span></a></li> </ul> <div class="border"></div> </div> <div class="infobar" id="info_bar"> <span>お気に入り図書館を設定すると、貸出状況が表示されます</span> <a href="/settings" class="selectArea"> エリアを選ぶ </a> <a href="javascript:calil.geo.getGeoLib()" class="getGeoLib"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M444.52 3.52L28.74 195.42c-47.97 22.39-31.98 92.75 19.19 92.75h175.91v175.91c0 51.17 70.36 67.17 92.75 19.19l191.9-415.78c15.99-38.39-25.59-79.97-63.97-63.97z"/></svg> 現在地から探す </a> </div> <h4 class="blue" style="margin-left: 1rem;margin-bottom: 1rem;"><a href="/popular/daily"><img align="absmiddle" src="https://calil.jp/public/img/icon/group.png">みんなが読みたい</a></h4> <div class="books"> <div class="book"> <a class="cover" href="/book/4087718794"><img src="https://calil.jp/cover/4087718794" alt=""></a> <a class="title" href="/book/4087718794">世界99 上</a> <div class="authors"> <span class="author">村田 沙耶香</span> </div> <div class="libinfo"></div> <div class="yomitaiButton"></div> </div> <div class="book"> <a class="cover" href="/book/4334104738"><img src="https://calil.jp/cover/4334104738" alt=""></a> <a class="title" href="/book/4334104738">働かないおじさんは資本主義を生き延びる術を知っている (光文社新書 1335)</a> <div class="authors"> <span class="author">侍留 啓介</span> </div> <div class="libinfo"></div> <div class="yomitaiButton"></div> </div> <div class="book"> <a class="cover" href="/book/4087700011"><img src="https://calil.jp/cover/4087700011" alt=""></a> <a class="title" href="/book/4087700011">世界99 下</a> <div class="authors"> <span class="author">村田 沙耶香</span> </div> <div class="libinfo"></div> <div class="yomitaiButton"></div> </div> <div class="book"> <a class="cover" href="/book/4152104112"><img src="https://calil.jp/cover/4152104112" alt=""></a> <a class="title" href="/book/4152104112">ブレイクショットの軌跡</a> <div class="authors"> <span class="author">逢坂 冬馬</span> </div> <div class="libinfo"></div> <div class="yomitaiButton"></div> </div> <div class="book"> <a class="cover" href="/book/4166614908"><img src="https://calil.jp/cover/4166614908" alt=""></a> <a class="title" href="/book/4166614908">高学歴発達障害 エリートたちの転落と再生 (文春新書 1490)</a> <div class="authors"> <span class="author">岩波 明</span> </div> <div class="libinfo"></div> <div class="yomitaiButton"></div> </div> <div class="book"> <a class="cover" href="/book/4120058522"><img src="https://calil.jp/cover/4120058522" alt=""></a> <a class="title" href="/book/4120058522">マンダラチャート (単行本)</a> <div class="authors"> <span class="author">垣谷 美雨</span> </div> <div class="libinfo"></div> <div class="yomitaiButton"></div> </div> <div class="book"> <a class="cover" href="/book/4635350029"><img src="https://calil.jp/cover/4635350029" alt=""></a> <a class="title" href="/book/4635350029">歩くという哲学</a> <div class="authors"> <span class="author">フレデリック・グロ</span> </div> <div class="libinfo"></div> <div class="yomitaiButton"></div> </div> <div class="book"> <a class="cover" href="/book/4413047168"><img src="https://calil.jp/cover/4413047168" alt=""></a> <a class="title" href="/book/4413047168">50歳から8か国語を身につけた翻訳家の独学法 (青春新書インテリジェンス PI 716)</a> <div class="authors"> <span class="author">宮崎伸治</span> </div> <div class="libinfo"></div> <div class="yomitaiButton"></div> </div> <div class="book"> <a class="cover" href="/book/4065350263"><img src="https://calil.jp/cover/4065350263" alt=""></a> <a class="title" href="/book/4065350263">カフネ</a> <div class="authors"> <span class="author">阿部 暁子</span> </div> <div class="libinfo"></div> <div class="yomitaiButton"></div> </div> <div class="book"> <a class="cover" href="/book/4297147084"><img src="https://calil.jp/cover/4297147084" alt=""></a> <a class="title" href="/book/4297147084">イラストをそれっぽく描くコツ</a> <div class="authors"> <span class="author">96こげ</span> </div> <div class="libinfo"></div> <div class="yomitaiButton"></div> </div> </div> <p align="right" style="color: #00CAFF;clear: both;"><small>⇒<a href="/popular/daily">もっと見る</a></small></p> </div> <style> .searchopt_dialog { display:none; z-index:100; position:absolute; background-image:url(https://calil.jp/public/img/parts/tri.png); background-repeat:no-repeat; } /* .top{ background-position:50px top; padding-top:6px; } .bottom{ background-position:50px bottom; padding-bottom:6px; } */ .searchopt_dialog #dlg_content { background-color:#FFFFC7; border:1px solid #999; border-color:#D8D8D8 #A2A2A2 #A2A2A2 #D8D8D8; /* border:5px solid #4396E3;*/ /* padding:5px;*/ color:#333; /* width:100px;*/ min-height:10px; box-shadow:3px 5px 15px #AAA; -moz-box-shadow:3px 5px 15px #AAA; -webkit-box-shadow:0 3px 15px #888888; padding:3px 5px; overflow:hidden; } .searchopt_dialog a{ color:black; } .searchopt_dialog p{ margin:2px 1px; font-size:75%; white-space:no-wrap; } </style> <div class="searchopt_dialog" id="searchopt_dialog" > <div id="dlg_content"> </div> </div> <div class="footer"> <p> <a href="/doc/about.html">カーリルについて</a> - <a href="/doc/lib.html">図書館の方へ</a> - <a href="/local/">ローカル</a> - <a href="/doc/api.html">図書館 API</a> - <a href="/doc/download.html">バナー・素材</a> </p> <p> <a href="/">ホーム</a> - <a href="/company/">運営会社</a> - <a href="https://blog.calil.jp/">ブログ</a> - <a href="https://twitter.com/caliljp">Twitter</a> - <a href="/privacy/freedom.html">図書館の自由</a> - <a href="/privacy/">プライバシーポリシー</a> - <a href="/doc/contact.html">お問い合わせ</a> </p> </div> <script> var calil = {}; function get_query() { var hash, hashes, i, vars; vars = []; hash = void 0; hashes = window.location.href.slice(window.location.href.indexOf("?") + 1).split("&"); i = 0; while (i < hashes.length) { hash = hashes[i].split("="); vars.push(hash[0]); vars[hash[0]] = hash[1]; i++; } return vars; } function buildQueryString(params) { var parts = []; var add = function(key, value) { parts.push(encodeURIComponent(key) + '=' + encodeURIComponent(value)); } for (var key in params) { var param = params[key]; if (Array.isArray(param)) { param.map(function(value) { add(key, value); }); } else { add(key, param); } } return '?' + parts.join('&').replace(/%20/g, '+'); } // 図書館設定 calil.library = { add_mode: false, setAddMode: function() { this.add_mode = true; }, addLibrary: function(sysid, func) { this.setLibrary({ sysid: sysid, add: true, func: func }); }, setLibrary: function(param) { if (this.add_mode) param['add'] = true; var url = '/set_place_json' + buildQueryString(param); fetch(url).then(function(r) { return r.json()}).then((function(_this) { return function(data) { if (data.stat === "ok") { if (location.search.match('from=settings')) { return location.href = '/settings'; } else if (location.pathname === "/" || location.pathname.indexOf('/library') === 0) { return location.href = '/start'; } else if (location.pathname === '/settings') { if ((get_query().redirect != null) === true) { return location.href = get_query().redirect; } else { return location.href = location.pathname + location.search; } } else { return location.reload(); } } else if (data.stat === 'confirm') { if (!confirm(data.message)) { return; } param['force'] = 'true'; return _this.setLibrary(param); } else { return alert('エラー: ' + data.message); } }; })(this) ) .catch(function() { alert('サーバーからの応答がありません。'); }) } }; // 位置情報から探す calil.geo = { getGeoLib: function() { document.querySelectorAll('body, a').forEach(function(element) { element.style.cursor = 'wait'; }); var callback; callback = (function(_this) { return function(lat, lng) { var params = { lat: lat, lon: lng, limit: 30 }; var url = '//api.calil.jp/mobile/recommend' + buildQueryString(params); fetch(url).then(function(r) {return r.json()}).then(function(data) { var j, len, message, n, nearest_lib, ref; if (data.nearby.length <= 0) { return alert('近くに図書館が見つかりません'); } nearest_lib = null; ref = data.nearby; for (j = 0, len = ref.length; j < len; j++) { n = ref[j]; if (n.icon !== 'school') { nearest_lib = n; break; } } if (!nearest_lib) { nearest_lib = data.nearby[0]; } message = nearest_lib.name + 'が見つかりました。この図書館を設定しますか？'; if (confirm(message)) { calil.library.setLibrary({ sysid: nearest_lib.id, add: true }); } document.querySelectorAll('body, a').forEach(function(element) { element.style.cursor = 'auto'; }); }) .catch(function() { alert('読み込みに失敗しました。'); document.querySelectorAll('body, a').forEach(function(element) { element.style.cursor = 'auto'; }); }) }; })(this); return this._getGeolocation(callback); }, _getGeolocation: function(callback, hideerror) { var error; if (!navigator.geolocation) { return; } error = (hideerror ? function() {} : this._errorFunc); return navigator.geolocation.getCurrentPosition((function(position) { var lat, lng; lat = position.coords.latitude; lng = position.coords.longitude; return callback(lat, lng); }), error, { enableHighAccuracy: true }); }, _errorFunc: function(error) { var message = ''; switch (error.code) { case error.POSITION_UNAVAILABLE: message = '位置情報の取得ができませんでした。'; break; case error.PERMISSION_DENIED: message = '位置情報取得の使用許可がされませんでした。'; break; case error.PERMISSION_DENIED_TIMEOUT: message = '位置情報取得中にタイムアウトしました。'; } alert(message); } }; // 図書館の絞り込み calil.filterlib = { change: function(elm) { if (this.value === 'settings') { location.href = '/settings'; return; } calil.filterlib.set(this.value); }, set: function(value) { var t; calil.api.render.filter_system_id = value; calil.api.render.filter_libkey = ""; if (value.indexOf(":") > 0) { t = value.split(":"); calil.api.render.filter_system_id = t[0]; calil.api.render.filter_libkey = t[1]; } calil.api.render.render_books(calil.api.search.data_cache); if (value === 'all') { document.querySelector('#filter_libs_option option:first-child').innerHTML = '▼図書館を絞り込み'; } else { document.querySelector('#filter_libs_option option:first-child').innerHTML = '▲図書館の絞り込みを解除'; } if (value === 'all') { // クッキーを削除 document.cookie = 'filterlib=all; path=/; expires==Thu, 01 Jan 1970 00:00:00 GMT'; } else { document.cookie = 'filterlib='+value+'; path=/;'; } } }; if (document.querySelector('#filter_libs_option')) { document.querySelector('#filter_libs_option').addEventListener('change', calil.filterlib.change); } window.addEventListener('DOMContentLoaded', function() { var filterlib = document.cookie.replace(/(?:(?:^|.*;\s*)filterlib\s*\=\s*([^;]*).*$)|^.*$/, '$1') if (filterlib && document.querySelector('#filter_libs_option')) { [].slice.call(document.querySelectorAll('#filter_libs_option option')).map(function(option, i) { if (option.value === filterlib) { calil.filterlib.set(filterlib); document.querySelector('#filter_libs_option').value = filterlib; } }); } }); var create_uuid = function() { var S4; S4 = function() { return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); }; return S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4(); }; // 蔵書検索 calil.api = { search: { server: 'https://api.calil.jp', appkey: '1f797b9d960207280336610120edb44a', uuid: null, session: false, order: false, systemid_list: [], isbn_list: [], api_url: false, first_apiurl: false, api_retry_count: 0, api_pause: false, api_call_count: 0, api_complete: false, api_timeout_timer: 0, data_cache: "", initialize: function() { this.uuid = create_uuid(); this.order = false; this.systemid_list = []; this.isbn_list = []; this.api_url = false; this.first_apiurl = false; this.api_retry_count = 0; this.api_pause = false; this.api_call_count = 0; this.api_complete = false; this.data_cache = ""; }, add_systemid: function(sytemid) { return this.systemid_list = this.systemid_list.concat(sytemid.split(",")); }, add_isbn: function(isbn) { return this.isbn_list = this.isbn_list.concat(isbn.split(",")); }, start: function() { this.first_apiurl = this.server + '/check?appkey=' + this.appkey + '&systemid=' + this.systemid_list.join(',') + '&isbn=' + this.isbn_list.join(','); if (this.order) { this.first_apiurl += '&order=' + this.order; } return this.call_api(this.first_apiurl); }, api_timeout: function() { return calil.api.render.timeoutSearchProgress(); }, check_change_uuid: function(uuid) { if (this.uuid !== uuid) { console.log('uuidが変更'); return true; } return false; }, call_api: function(url, uuid) { var data; if (uuid == null) { uuid = this.uuid; } this.api_url = url; url += '&callback=no' + '&' + new Date().getTime() // IE11 でキャッシュされる問題対策 fetch(url, {cache: 'no-cache'}).then(function(r) {return r.json()}).then((function(_this) { return function(data) { if (_this.check_change_uuid(uuid)) { return; } _this.callback(data, uuid); }; })(this)) .catch((function(_this) { return function(data) { if (_this.check_change_uuid(uuid)) { return; } if (_this.api_url && _this.api_retry_count <= 2) { _this.api_call_count = 0; return setTimeout((function() { _this.call_api(_this.api_url, uuid); return _this.api_retry_count++; }), 5000); } else { return _this.api_timeout(); } }; })(this)); }, callback: function(data, uuid) { var session = data['session']; var conti = data['continue']; this.data_cache = data; if (conti === 1) { this.api_call_count++; var seconds; if (this.api_call_count < 3) { seconds = 1000; } else if (this.api_call_count < 7) { seconds = 1200; } else { seconds = 3000; } var newurl = this.server + '/check?appkey=' + this.appkey + '&session=' + session; if (this.order) { newurl += '&order=' + this.order; } setTimeout(((function(_this) { return function() { return _this.call_api(newurl, uuid, data); }; })(this)), seconds); } else { this.api_complete = true; } return calil.api.render.render_books(data); }, }, render: { filter_system_id: "all", filter_libkey: "", initialize: function() { this.filter_system_id = "all"; this.filter_libkey = ""; }, timeoutSearchProgress: function() { var i; i = 0; [].slice.call(document.querySelectorAll('.searching')).map(function(item, i) { item.innerHTML = 'タイムアウト'; item.className = 'timeout'; return i++; }); }, render_books: function(data) { // 検索中最初の3個のみ表示 CSSでは実現できなかった if (document.querySelectorAll('.searching').length > 0) { [].slice.call(document.querySelectorAll('.searching')).map(function(item, i) { if (i < 3) item.style.display = 'inline-block'; }); } for (isbn in data.books) { // フィルターの場合、初期化して対応 if (this.filter_system_id !== 'all') delete this.statusTexts[isbn]; for (systemid in data.books[isbn]) { if (this.filter_system_id === "all" || this.filter_system_id === systemid) { var systemData = data.books[isbn][systemid]; var statusText = this.getStatusText(isbn); for (i in systemData.libkey) { if (this.filter_libkey === "" || this.filter_libkey === i) { libkey = systemData.libkey[i]; // 空なら来たやつを入れる if (statusText === '' || statusText === '蔵書あり') { statusText = libkey; // 貸出可が来たときに入れる } else if (libkey === '貸出可') { statusText = libkey; } } } if (data.continue === 0 && systemData.status === "Error" && statusText==='') { statusText = "検索失敗"; } this.render_book(isbn, statusText); } } } // すべての図書館の蔵書を探してもなかった場合 if (data.continue === 0) { for (isbn in data.books) { for (systemid in data.books[isbn]) { var statusText = this.getStatusText(isbn); if (statusText === '') { statusText = '蔵書なし'; this.render_book(isbn, statusText); } } } } }, render_book: function(isbn, statusText) { if (statusText === '') return; var statusId = this.getStatusId(statusText); var link; [].slice.call(document.getElementById(isbn).parentNode.children).map(function(child, i){ if (child.tagName === 'A' && child.className === 'title') { link = child.getAttribute('href'); } }); var span = '<a href="' + link + '">' + statusText + '</a>'; var libinfo = document.getElementById(isbn); if (isbn !== '' && libinfo) { libinfo.innerHTML = span; libinfo.parentNode.className = 'book ' + statusId; } this.statusTexts[isbn] = statusText; }, getStatusId: function(status) { var statusId = ''; var statusIds = { '': 'nostatus', '貸出可': 'available', '蔵書あり': 'collection', '館内のみ': 'inside', '貸出中': 'lending', '予約中': 'reserved', '準備中': 'ordering', '蔵書なし': 'notfound', }; if (statusIds[status]) { statusId = statusIds[status]; } else { // 知らないstatusがきたら、"蔵書あり"と同等に扱う 例) 長期延滞、行方不明 statusId = 'hold'; } return statusId; }, statusTexts: {}, getStatusText: function(isbn) { if (typeof this.statusTexts[isbn] === 'undefined') { return ''; } else { return this.statusTexts[isbn]; } } } }; document.addEventListener('DOMContentLoaded', function() { document.querySelectorAll('.libinfo').forEach(function(libinfo) { libinfo.addEventListener('mouseover', calil.more.libinfo_hover); libinfo.addEventListener('mouseout', calil.more.libinfo_out); }); var searchopt_dialog = document.getElementById('searchopt_dialog') searchopt_dialog.addEventListener('mouseover', calil.more.dlg_mouseover); searchopt_dialog.addEventListener('mouseout', calil.more.dlg_mouseout); }); calil.more = { ondlg: false, closecancel: false, libinfo_hover: function() { var dlg, height, target, left, st, top, width, win_h; target = this; if (target.tagName === 'A') target = target.parentNode; console.log("libinfo_hover" + target.id); if (target.innerText !== "蔵書なし") { return; } calil.more.closecancel = true; win_h = document.documentElement.clientHeight; st = window.scrollY; top = target.offsetTop; left = target.offsetLeft; height = target.offsetHeight; width = target.offsetWidth; dlg = document.getElementById('searchopt_dialog'); dlg.style.display = 'block'; dlg.style.top = (top - dlg.offsetHeight - 3) + 'px'; dlg.style.left = (left - (dlg.offsetWidth - width) / 2) + 'px'; dlg.querySelectorAll('a').forEach(function(a) { a.href = `/book/${target.id}/search?pref=${a.name}#book_info`; }); }, libinfo_out: function() { console.log("libinfo_out" + this.id); calil.more.closecancel = false; return setTimeout(((function(_this) { return function() { if (!calil.more.closecancel) { calil.more.closecancel = true; return document.getElementById('searchopt_dialog').style.display = 'none'; } }; })(this)), 500); }, dlg_mouseover: function() { console.log("dlg_mouseover" + this.id); calil.more.closecancel = true; return calil.more.ondlg = true; }, dlg_mouseout: function() { console.log("dlg_mouseout"); calil.more.closecancel = false; calil.more.ondlg = false; return calil.more.libinfo_out(); } }; </script> <script> calil.api.search.initialize(); calil.api.render.initialize(); calil.api.search.add_isbn('9784087718799,9784334104733,9784087700015,9784152104113,9784166614905,9784120058523,4635350029,4413047168,9784065350263,9784297147082'); </script> <style> .yomitaiButton { position: relative; display: flex; border: 1px solid #dddddd; border-radius: 100px; background: #ffffff; background: linear-gradient(to bottom, #ffffff 0%,#ffffff 68%,#e8e8e9 97%); overflow: hidden; } .yomitaiButton button { cursor: pointer; width: 50%; padding: 5px 0; display: block; font-size: 0.7rem; text-align: center; color: #3E3E3E; background: transparent; z-index: 1; border: none; } .yomitaiButton button.active { position: relative; color: #ffffff; background: #F3AB00; } .yomitaiButton button.wish { padding-left: 0.35rem; } .yomitaiButton button.read { padding-right: 0.25rem; } .yomitaiButton.disabled button { background-color: #E1E1E1; cursor: not-allowed; } .yomitaiButton.disabled button.active { background: #8B8B8B !important; } </style> <script> /** * @typedef State * @property {boolean} wish 読みたいリストに入っているかどうか * @property {boolean} read 読んだリストに入っているかどうか * */ /** * 読みたいリストボタンのクラス * * @class YomitaiButton */ class YomitaiButton { /** * コンストラクタ * * @param {State[]} states 各ボタンの状態 * @param {string} selector ボタンのセレクタ * @param {string} activeClass アクティブ状態のクラス名 */ constructor(states, selector, activeClass, callback) { this.states = states this.selector = selector this.activeClass = activeClass this.callback = callback this.render() } setStates(states) { this.states = states this.render() } /** * ボタンを描画する * */ render() { const buttons = document.querySelectorAll(this.selector) Array.from(buttons).forEach((button, index) => { button.textContent = '' button.appendChild(this.createButton('wish', '読みたい', index)) button.appendChild(this.createButton('read', '読んだ', index)) }) this.addEvent() } /** * ボタンのエレメントを作成する * * @param {string} name リストの名前 wish or read * @param {string} text ボタンのテキスト * @param {number} index ボタンのインデックス */ createButton(name, text, index) { const button = document.createElement('button') button.textContent = text button.dataset.name = name if (this.states[index][name]) button.classList.add(this.activeClass) return button } addEvent() { const buttons = document.querySelectorAll(this.selector + ' > button') Array.from(buttons).forEach((button, i) => { const index = Math.floor(i / 2) 'mousedown keydown'.split(' ').forEach((eventName)=>{ button.addEventListener(eventName, (event) => { if (event.type!=='mousedown') { console.log(event) if (event.type==='keydown') { if (event.key!=='Tab') event.preventDefault() console.log(event.key) if (event.key!=='Enter' && event.keyCode!==32) return } } const name = button.dataset.name const states = this.states.concat() // statesのコピーを作成 const prevState = Object.assign({}, states[index]) // states[index]のコピーを作成 let action if (states[index][name]===true) { // すでにリストに登録されている場合は削除 action = 'delete'; } else { // 別のリストに登録されている場合は移動 const otherName = name==='wish' ? 'read' : 'wish'; if (states[index][otherName]===true) { action = 'move'; } else { action = 'add'; } } if (action==='add') { states[index][name] = true } if (action==='move') { states[index] = { wish: !states[index].wish, read: !states[index].read } } if (action==='delete') { states[index] = { wish: false, read: false } } this.setStates(states) // キャンセルやエラー時に状態を戻す関数 const revertState = () => { const states = this.states.concat() // statesのコピーを作成 states[index] = prevState this.setStates(states) } this.callback(name, action, index, revertState) }) }) }) } } const bookJSON = [ { id: '4087718794', isbn: '4087718794', title: '世界99 上', volume: '', author: '村田 沙耶香', pubdate: '', publisher: '', source: '', }, { id: '4334104738', isbn: '4334104738', title: '働かないおじさんは資本主義を生き延びる術を知っている (光文社新書 1335)', volume: '', author: '侍留 啓介', pubdate: '', publisher: '', source: '', }, { id: '4087700011', isbn: '4087700011', title: '世界99 下', volume: '', author: '村田 沙耶香', pubdate: '', publisher: '', source: '', }, { id: '4152104112', isbn: '4152104112', title: 'ブレイクショットの軌跡', volume: '', author: '逢坂 冬馬', pubdate: '', publisher: '', source: '', }, { id: '4166614908', isbn: '4166614908', title: '高学歴発達障害 エリートたちの転落と再生 (文春新書 1490)', volume: '', author: '岩波 明', pubdate: '', publisher: '', source: '', }, { id: '4120058522', isbn: '4120058522', title: 'マンダラチャート (単行本)', volume: '', author: '垣谷 美雨', pubdate: '', publisher: '', source: '', }, { id: '4635350029', isbn: '4635350029', title: '歩くという哲学', volume: '', author: 'フレデリック・グロ', pubdate: '', publisher: '', source: '', }, { id: '4413047168', isbn: '4413047168', title: '50歳から8か国語を身につけた翻訳家の独学法 (青春新書インテリジェンス PI 716)', volume: '', author: '宮崎伸治', pubdate: '', publisher: '', source: '', }, { id: '4065350263', isbn: '4065350263', title: 'カフネ', volume: '', author: '阿部 暁子', pubdate: '', publisher: '', source: '', }, { id: '4297147084', isbn: '4297147084', title: 'イラストをそれっぽく描くコツ', volume: '', author: '96こげ', pubdate: '', publisher: '', source: '', }, ] new YomitaiButton([ {wish: false, read: false}, {wish: false, read: false}, {wish: false, read: false}, {wish: false, read: false}, {wish: false, read: false}, {wish: false, read: false}, {wish: false, read: false}, {wish: false, read: false}, {wish: false, read: false}, {wish: false, read: false}, ], '.yomitaiButton', 'active', (name, action, index, revertState) => { return location.href = '/login?redirect=' + escape(location.pathname + location.search); }) </script> <script type="text/javascript" charset="utf-8" src="/public/web-html/js/menusp.js"></script> </body> </html>