ナラ🔔ベルとは

  ナラ🔔ベルは，テーマを自由に設定して，書籍とWebページをまとめて公開できるWebサービスです。

想定している利用者と利用方法は，以下のとおりです。

【利用者】

• 公共図書館，学校図書館，専門図書館，美術館，博物館
• 図書館員，司書，図書館を基盤に活動しているグループ（図書館友の会など）
• 展覧会や催事，研究会を主宰する方や組織
• 授業や講義，講座などを開催している方や組織
• 研究活動や調査活動などを行いその成果を公表している個人や組織
• その他，書籍やWebページをリスティングして公開・配布している個人や組織

【利用方法】

• 図書館や学校で行う書籍に関わる展示をWebで公開する。
• 図書館や学校で作成しているいろいろな書籍リストをWebで簡単に公開する。
• 展示会や催事の実施に合わせて，補足情報として書籍やWebの情報をまとめて公開する。
• いろいろな講座や授業などで必要となる参考資料のリストを作って公開する。
• 個人で調べたことを公開・広報する際に，参考資料として本やWebページをまとめて公開する。

利用までの手順は非常にシンプルで，

1. ユーザー登録をする
2. テーマを設定する
3. 本やWebを登録する
4. 公開する

の4ステップだけです。

　ユーザー登録に必要なのは，Twitterのアカウントだけです。誰でもすぐにユーザー登録することができます。ユーザーは専用ページを持ち，まとめたいテーマを設定することができます。専用ページのスタイルやタイトルは，ユーザー自身で変更できます。また，作成したテーマを簡単にツイートすることもできます。

 　本の情報を登録する際に必要なのは，ISBNだけです。タイトルや著者は，openBDをメインに，いくつかの書誌データベースから流用します。また，書誌データベースに書影情報がある場合には，自動的に書影画像が表示されます。

　Webページの場合は，URLだけあればOKです。指定したURLの画面スクリーンショットが，本の書影と同じく自動で表示されます。

　設定したテーマには，1枚の画像をアップロードして表示することができます。例えば，資料展示であれば，展示イメージの写真を，展覧会であれば，展覧会のパンフレットイメージを，テーマと共に表示できます。イメージ画像をアップロードしなかった場合には，テーマに登録した書籍の書影やWebページのスクリーンショットが自動的に表示されます。

　登録したテーマごとに，CSV形式でデータをダウンロードすることも可能です。これまで，書籍リストを手作業で作成していたのであれば，ナラ🔔ベルにISBNを使って資料を一括登録するだけで，簡単に書籍リストを作ることができます。

　ナラ🔔ベルではテーマごと，情報ごとに公開と非公開を決められます。また日程を事前に決めて，予約公開することも可能です。プライベートな利用として，全く公開しないこともできます。さらに，展示会や催事と連動する場合には，展覧会や催事の開催期間を表示することも可能です。

　ナラ🔔ベルは，いろいろなWebサービスとの連携もできます。新着情報はRSSで配信します。ご自分のWebサイトやホームページへ，<iframe>タグを使って，ナラ🔔ベルを組み込むこともできます。OGP（Open Graph Protocol)にも対応しているので，SNSでのナラ🔔ベルへのリンクもSNSでのリンクデザインが適用されます。

　ナラ🔔ベルは，簡単な操作とシンプルな画面デザインで，いままでちょっと面倒だったことを，気軽にできるようにします。あなたの手元に眠っている情報が，わずかな手間で多くの人たちの役に立つかもしれません。

ぜひ，ナラ🔔ベルをご活用ください。

noteとの連携エントリー

　ナラベルWebサービスの新しい使い方の提案の一つとして，noteとの連携エントリーをしてみました。noteとは，ご存知のとおり，

「だれもが創作をはじめ、続けられるようにする」 

 をミッションとする新しい創作プラットフォームです。

note ――つくる、つながる、とどける。

　文章だけに限らず，写真など，自由な創作活動を支援する仕組みや機能が充実しています。

　ナラベルは，テーマごとの推薦本を紹介する仕組みですが，長い文章を書いたり，ユーザー同士のコミュニケーションを促進するような仕組みはありません。そこで，それぞれの機能の特性を活かせないかと考えて，文章をnoteで作成し，関連書籍はナラベルで作成・公開する連携エントリーを試してみました。ナラベルは，図書館に特化したサービスではありますが，いろいろなコンテンツと本を関連づけることもできるツールですので，図書館以外の方にもぜひ活用していただければと思います。

noteとの連携エントリーは，こちら。

note.com

naraberu.info

デザイン変更について

　お知らせがかなりおそくなりましたが，ナラベルWebサービスのデザインを変更しました。主な変更点は，各展示の表示レイアウトを上下レイアウトから，左右レイアウトに変更したことです。

これは，ユーザー画像と書影画像のサイズ差がかなりあって，各表示が間延びしてしまっていることへの対応です。これによって，かなり各展示の並びが規則的になり，スクロールも少なくなったと思います。　新しい表示は以下のようなものです。

新しい展示レコード表示イメージ

新しい展示レコードイメージ（一列）

　全体的にコンパクトになるように，展示期間をポップアップ表示にしたり，タイトルをゴシック系のフォントにしたりと，細かく修正をしています。

展示期間のポップアップ表示

　より多くのみなさまにお使いいただけるように，デザインも含めて改善していきます。ご要望等がありましたら，@root_libshelfへDMでご連絡ください。

一括登録機能の強化について

ナラベルの一括登録機能について，CSVで読み込める項目を追加し，より簡単に多様な資料を一括登録の対象にできるようになりました。

これまでは，以下の項目のみをCSVで読み込み可能でした。

• ISBN
• 資料のユニーク番号（登録番号など）
• 請求記号
• 配置場所
• タグ（キーワード）
• 資料へのコメント

上記項目に加えて

• その他のID(国立国会図書館書誌IDもしくはJPマークID）
• タイトル
• 巻号
• 著者
• 出版社
• 出版年
• 当該資料へのダイレクトリンクURL（図書館所蔵確認ボタンの遷移先）
• 当該資料が電子ブックの場合のURL（電子ブックで読むボタンの遷移先）

を読み込めるようになりました。これによって，ISBNのない資料やISBNはないが国立国会図書館に書誌がある資料，ローカルの図書館システムにしかない資料など，さまざまな状態の資料をCSV形式で一括登録することができます。

　→CSVデータの項目順は，上記の表示順どおりです。

多くの図書館システムでは，所蔵データを書誌データ付きでダウンロードできる機能があると思いますので，図書館システムからデータダウンロード →　ナラベルへ一括登録といったシンプルなデータ連携が可能となると思います。

一括登録時のデータ利用ルールは，以下のとおりです。

1. ISBNがある場合には，openBD→楽天BOOKS→国立国会図書館の順に参照し，最初にヒットしたデータを利用する。３つすべてのデータソースにヒットする書誌はないが，CSVデータにタイトルが含まれている場合には，登録対象とする。３つのデータソースでいずれもヒットせず，かつCSVデータにタイトルがない場合には，登録対象としない。
2. ISBNとその他のIDが両方ある場合，ISBNだけを利用する。その他のIDを使って国立国会図書館を検索しない。ISBNでいずれのデータソースにもヒットしなかったが，CSVデータにタイトルが含まれる場合には，登録対象とする。
3. ISBNがなく，その他のIDがある場合には，国立国会図書館を検索し，ヒットしたデータを利用しますが，当該データにISBNが含まれていた場合には，そのISBNを使って，１．のステップを行います。
4. ISBNもその他のIDもなく，CSVデータにタイトルが含まれている場合には，そのタイトルを使って登録対象とします。

注意していただきたいのは，CSVデータにタイトルや著者などの書誌情報が含まれていても，ISBNやその他のIDで検索して各データソースにヒットした場合には，ヒットしたデータの書誌で登録される点です。CSVデータに含まれるタイトルや著者を使いたい場合には，ISBNやその他のIDをCSVデータに含めないでください。

また，CSVの作成については，MS Excelを想定しています。それ以外のツールで作成したCSVファイルについては，読み込みエラーが発生する場合がありますので，ご注意ください。サポートしている文字コードは，シフトJISのみです。

この機能のリリースは，１２月７日頃を予定していますが，リリースはTwitterで改めてお知らせいたします。

引き続き，ナラベルをご利用いただけますようどうぞよろしくお願いいたします。

ナラベルWebサービスの動画資料作成

ナラベルWebサービスは，2020年度の図書館総合展に出展しますが，それに合わせて，YouTubeで動画資料を公開することにしました。

2020.libraryfair.jp

2020.libraryfair.jp

ざっくりとした資料ですが，ナラベルWebサービスの成り立ちとコンセプト，画面遷移などがご理解いただけるかと思います。ナラベルWebサービスのご利用をご検討いただいているみなさまにお役に立てればと思います。

ナラベルWebサービスのコンセプト紹介

www.youtube.com

ナラベルWebサービスの画面遷移と特徴紹介

www.youtube.com

ナラベルWebサービス利用者登録と削除

www.youtube.com

ナラベルWebサービス　テーマの新規登録

ナラベルWebサービス　一括登録

youtu.be

youtu.be

Swiper（スライダー機能）関係の改善など

　ずっと手をつけていないかったSwiper（スライダー）部分を修正した。やはり開発テストだけでは判明しない修正箇所が使われることによって炙りだされてきた。システムは使い始めて，ユーザーと共に成長していくことが重要という，諸先輩方の教えを再認識した。

swiperjs.com

　Swiperでの問題は，ユーザーがアップロードした画像がシステム側で想定したサイズでない場合，大きくレイアウトが崩れてしまっていたことだ。Swiperでは，書影かもしくは展示イメージ画像をスライダーの要素として利用しているのですが，この２つともサイズは固定でなくバラつきがあることから，画像の縦横比を変更せずに表示エリアに収めるのが難しかった。各エントリーの表示は，Bootstrapのカードを使っているのですが，Card-Deckスタイルがよしなに画像サイズを変更してくれるので問題なしだったのですが，Swiperは自力で対応する必要がありました。

　いろいろ試したのですが，結局，以下の方法を採用しました。

　１）画像を表示するエリアをpxでCSSで指定する（width,height共）

　２）CSSで画像にobject-fit: scale-down を設定

この２つの設定で，表示エリアよりも大きいサイズの画像は，自動的に縦横比を変更せずに縮小されます。表示エリアより小さい画像は，何も変更されません。

最初は，width:100%; height:auto　としていたのですが，表示エリアより大きい画像はこれでもよいのですが，表示エリアより小さい画像が表示エリアと同等い拡大されてしまうのが，問題でした。object-fitを使うことにより，縮小しか行われなくなったので，問題は解決です。コツは，ちゃんと明示的に表示エリアを設定することです。単純にobject-fitだけでは想定どおりの動きはしません。表示エリアは本来であればレスポンシブルとして拡大・縮小するのがよいですが，object-fit:を使う場合には，自動的に算出された表示エリアでは正しく効果を発揮しないようです。（もしうまく動く方法があれば，どなたかお教えいただければと思います。）

次の課題は，IEへの対応です。すでにMSのIE非推奨を受けて，ユーザーも減っていくと考えて，IEへの対応はあまり気にしていなかったのですが，そもそもobject-fitはCSS3でIE11非対応なので，これを機にSwiperをIE対応させようと思ったのですが，抜本的にソースに手をいれないと行けないような情報が多々流れていたので，ちょっと方向性を変えて，IEの場合は，Swiperによるスライダーを非表示になるようにしました。Swiperによるスライダーは視覚効果のためなので，なくても全体の機能には影響ありません。

少しづつテスト&修正を行っているので，思いの外時間がかかりましたが，少しづつ改善していると思います。商業ベースのシステムのようにはいきませんが，粘り強くシステム改修をしていきたいと思います。

naraberu.info

WYSIWYGエディタの導入とシリーズ説明項目の拡張について

WYSIWYGエディタを導入しました。エディタはsummernoteを使っています。

summernote.org

導入も簡単で多機能，かなり満足です。一つ問題は，改行した場合に設定されるHTMLタグが<p>であるため，無駄に行間が開いてなんとなく締まりのない印象がでてしまうこと。これを<BR>に変更したのですが，なかなか実装できずに，結局は以下のサイトのやり方で対応しました。

takahashi-it.com

ただし，この設定をおこなうと箇条書きがうまく動かなかったので，箇条書きのメニューボタンを非表示にとりあえず設定した。まだ，同時にsummernoteを適用したtextareaの文字数カウント機能も実装したので，結局初期化は，以下のような感じになりました。

$('#mes').summernote({
toolbar: [
　　['style', ['style']],
　　['font', ['bold', 'underline', 'clear']],
　　['fontsize', ['fontsize']],
　　['fontname', ['fontname']],
　　['color', ['color']],
　　<%-- ['para', ['ul', 'ol', 'paragraph']], --%>
　　['table', ['table']],
　　['insert', ['hr','link']],
　　['view', ['undo','redo','help']],
　],
　fontNames: ['Arial', 'Arial Black', 'Courier New','YuGothic'],
　height:300，
　lang: "ja-JP"

　}).on("summernote.enter", function(we, e) {
　　　$(this).summernote("pasteHTML", "<br>&#8203;");
　　　e.preventDefault();
　}).on('summernote.keyup', function(we, e) {
　　$('#charcnt').text($(this).summernote('code').length);
　});

　$('#charcnt').text($('#mes').summernote('code').length);

 純粋な文字数ではなく，非表示のHTMLタグも文字数に含まれている。ナラベルへのレコード登録の都合上，非表示文字も含まれている方が，MaxLengthエラーになりにくいので。

Summernoteを適用した入力エリア

WYSIWYGエディタを使って入力したエントリーは，このような感じになります。

【決断】が語る未来 / ナラベル運営チーム / ナラベル

ナラベルのコンセプトとして，Twitterとの連携がありました。そのため，テーマの説明はTweetの文字数制限と連動させていたのですが，管理チームが実際にナラベルにエントリーしていて，Tweetの文字数制限を超えて書きたいとかブログのように書きたいなどの要望が上がってきたので，今回の対応となりました。まさに，WYSIWYGエディタを導入したことにより，ブログの記事のように記載できるようになっていますので，テーマ別に本を集めて，それに記事をつけるブログといった使い方もしていただけると思います。そういった意味で，図書館の方だけではなく，本好きの方にもナラベルをご利用いただけると嬉しい限りです。

システム改修報告

なかなか忙しくて開発に手を付けられなかったのですが，最近の改修について，まとめて報告します。

　１）広告表示の開始

　２）シリーズのコメント欄の文字制限を1200文字まで拡張

　３）レスポンシブルレイアウトによるタブレットサイズへの適応

　４）Swiperライブライリによるスライダーの各ユーザーへの適応

　５）タイトルや説明など長い文字列の三点ドットによる省略

が改修項目です。細かいバグフィックスについては，割愛しています。

改修のポイントは，以下のとおりです。

　１）広告表示の開始

　まだユーザーからの利用がほとんどないのですが，マネタイズは最終的にしなければいけないので広告を表示させました。収益ベース事業ではないので，経費のためのマネタイズです。

　２）シリーズのコメント欄の文字制限を1200文字まで拡張

　当初は，Tweetの文字数と一致させていたのですが，SEOなども考慮して，1200文字まで拡張しました。あまり多すぎてもDBの容量の問題もあるので，当初はこの程度で様子見です。

　３）レスポンシブルレイアウトによるタブレットサイズへの適応

　ある図書館に伺ったときに，タブレットを使って仕事をしてるのを拝見して，タブレットでの需要があると思いましたので，適応しました。

　４）Swiperライブライリによるスライダーの各ユーザーへの適応

　全体のトップだけスライダー内にシリーズが表示されたのですが，各ユーザーのトップでも表示できるようにしました。

　５）タイトルや説明など長い文字列の三点ドットによる省略

 これは３）との連動で，長くなることが想定されるので，レイアウトを崩さないように実装しました。

今回の報告は以上です。

まだ細かい改修は随時行っていく予定です。さらに図書館総合展でいただいたリクエストにも対応予定です。これからもどうぞよろしくお願いいたします。