バグ修正など ２０２１−０３−２４
ナラベルのいくつかのバグを修正し，機能を追加しました。
- 公開期間の表示を修正（終了日が設定されてないと，公開終了表示となってしまう）
- ログイン後に表示される総件数が，登録件数が０の場合，総件数が表示されてしまう
- 一括書籍登録機能で，検索した結果について，１冊のみ登録する場合，正しく登録できないバグを修正
- Iframeを使った組み込み機能で，テーマの表示スタイルで新しいスタイル（スクエア）を追加。
- GoogleAdsenseの表示が崩れるバグ修正
以上を修正しています。
Googleアカウントでログインが可能となりました
ナラベルWebサービスで，Googleアカウントでのログインが可能となりました。これまでは，Twitterアカウントでのログインのみ可能でしたが，利用拡大を目指して，実装しました。
稼働開始は，２０２１年３月１２日です。技術的にはそれほど難しくはなかったのですが，開発のためのまとまった時間がなかなか取れず，かなり時間を要しました。
GoogleやTwitterなどのアカウントによるログインだけではなく，ナラベル独自でのユーザー登録機能を実装して欲しいとの要望もいただいておりますが，こちらはセキュリティ的にハードルがやや高く，実装までは至っておりません。今後は，FacebookやLineのアカウントでのログインについても検討していきたいと思います。
レイアウトの大幅変更や今回のログイン機能の追加など，少しづつですが改善を進めています。次の機能追加は，ユーザーによる評価機能（いいね！のような機能)を予定しています。
noteとの連携エントリー
ナラベルWebサービスの新しい使い方の提案の一つとして，noteとの連携エントリーをしてみました。noteとは，ご存知のとおり，
「だれもが創作をはじめ、続けられるようにする」
をミッションとする新しい創作プラットフォームです。
文章だけに限らず，写真など，自由な創作活動を支援する仕組みや機能が充実しています。
ナラベルは，テーマごとの推薦本を紹介する仕組みですが，長い文章を書いたり，ユーザー同士のコミュニケーションを促進するような仕組みはありません。そこで，それぞれの機能の特性を活かせないかと考えて，文章をnoteで作成し，関連書籍はナラベルで作成・公開する連携エントリーを試してみました。ナラベルは，図書館に特化したサービスではありますが，いろいろなコンテンツと本を関連づけることもできるツールですので，図書館以外の方にもぜひ活用していただければと思います。
noteとの連携エントリーは，こちら。
デザイン変更について
お知らせがかなりおそくなりましたが，ナラベルWebサービスのデザインを変更しました。主な変更点は，各展示の表示レイアウトを上下レイアウトから，左右レイアウトに変更したことです。
これは，ユーザー画像と書影画像のサイズ差がかなりあって，各表示が間延びしてしまっていることへの対応です。これによって，かなり各展示の並びが規則的になり，スクロールも少なくなったと思います。 新しい表示は以下のようなものです。
全体的にコンパクトになるように，展示期間をポップアップ表示にしたり，タイトルをゴシック系のフォントにしたりと，細かく修正をしています。
より多くのみなさまにお使いいただけるように，デザインも含めて改善していきます。ご要望等がありましたら，@root_libshelfへDMでご連絡ください。
一括登録機能の強化について
ナラベルの一括登録機能について，CSVで読み込める項目を追加し，より簡単に多様な資料を一括登録の対象にできるようになりました。
これまでは，以下の項目のみをCSVで読み込み可能でした。
- ISBN
- 資料のユニーク番号（登録番号など）
- 請求記号
- 配置場所
- タグ（キーワード）
- 資料へのコメント
上記項目に加えて
- その他のID(国立国会図書館書誌IDもしくはJPマークID）
- タイトル
- 巻号
- 著者
- 出版社
- 出版年
- 当該資料へのダイレクトリンクURL（図書館所蔵確認ボタンの遷移先）
- 当該資料が電子ブックの場合のURL（電子ブックで読むボタンの遷移先）
を読み込めるようになりました。これによって，ISBNのない資料やISBNはないが国立国会図書館に書誌がある資料，ローカルの図書館システムにしかない資料など，さまざまな状態の資料をCSV形式で一括登録することができます。
→CSVデータの項目順は，上記の表示順どおりです。
多くの図書館システムでは，所蔵データを書誌データ付きでダウンロードできる機能があると思いますので，図書館システムからデータダウンロード → ナラベルへ一括登録といったシンプルなデータ連携が可能となると思います。
一括登録時のデータ利用ルールは，以下のとおりです。
- ISBNがある場合には，openBD→楽天BOOKS→国立国会図書館の順に参照し，最初にヒットしたデータを利用する。３つすべてのデータソースにヒットする書誌はないが，CSVデータにタイトルが含まれている場合には，登録対象とする。３つのデータソースでいずれもヒットせず，かつCSVデータにタイトルがない場合には，登録対象としない。
- ISBNとその他のIDが両方ある場合，ISBNだけを利用する。その他のIDを使って国立国会図書館を検索しない。ISBNでいずれのデータソースにもヒットしなかったが，CSVデータにタイトルが含まれる場合には，登録対象とする。
- ISBNがなく，その他のIDがある場合には，国立国会図書館を検索し，ヒットしたデータを利用しますが，当該データにISBNが含まれていた場合には，そのISBNを使って，１．のステップを行います。
- ISBNもその他のIDもなく，CSVデータにタイトルが含まれている場合には，そのタイトルを使って登録対象とします。
注意していただきたいのは，CSVデータにタイトルや著者などの書誌情報が含まれていても，ISBNやその他のIDで検索して各データソースにヒットした場合には，ヒットしたデータの書誌で登録される点です。CSVデータに含まれるタイトルや著者を使いたい場合には，ISBNやその他のIDをCSVデータに含めないでください。
また，CSVの作成については，MS Excelを想定しています。それ以外のツールで作成したCSVファイルについては，読み込みエラーが発生する場合がありますので，ご注意ください。サポートしている文字コードは，シフトJISのみです。
この機能のリリースは，１２月７日頃を予定していますが，リリースはTwitterで改めてお知らせいたします。
引き続き，ナラベルをご利用いただけますようどうぞよろしくお願いいたします。
Swiper（スライダー機能）関係の改善など
ずっと手をつけていないかったSwiper（スライダー）部分を修正した。やはり開発テストだけでは判明しない修正箇所が使われることによって炙りだされてきた。システムは使い始めて，ユーザーと共に成長していくことが重要という，諸先輩方の教えを再認識した。
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によるスライダーは視覚効果のためなので，なくても全体の機能には影響ありません。
少しづつテスト&修正を行っているので，思いの外時間がかかりましたが，少しづつ改善していると思います。商業ベースのシステムのようにはいきませんが，粘り強くシステム改修をしていきたいと思います。
WYSIWYGエディタの導入とシリーズ説明項目の拡張について
WYSIWYGエディタを導入しました。エディタはsummernoteを使っています。
導入も簡単で多機能，かなり満足です。一つ問題は，改行した場合に設定されるHTMLタグが<p>であるため，無駄に行間が開いてなんとなく締まりのない印象がでてしまうこと。これを<BR>に変更したのですが，なかなか実装できずに，結局は以下のサイトのやり方で対応しました。
ただし，この設定をおこなうと箇条書きがうまく動かなかったので，箇条書きのメニューボタンを非表示にとりあえず設定した。まだ，同時に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>​");
e.preventDefault();
}).on('summernote.keyup', function(we, e) {
$('#charcnt').text($(this).summernote('code').length);
});$('#charcnt').text($('#mes').summernote('code').length);
純粋な文字数ではなく，非表示のHTMLタグも文字数に含まれている。ナラベルへのレコード登録の都合上，非表示文字も含まれている方が，MaxLengthエラーになりにくいので。
WYSIWYGエディタを使って入力したエントリーは，このような感じになります。
ナラベルのコンセプトとして，Twitterとの連携がありました。そのため，テーマの説明はTweetの文字数制限と連動させていたのですが，管理チームが実際にナラベルにエントリーしていて，Tweetの文字数制限を超えて書きたいとかブログのように書きたいなどの要望が上がってきたので，今回の対応となりました。まさに，WYSIWYGエディタを導入したことにより，ブログの記事のように記載できるようになっていますので，テーマ別に本を集めて，それに記事をつけるブログといった使い方もしていただけると思います。そういった意味で，図書館の方だけではなく，本好きの方にもナラベルをご利用いただけると嬉しい限りです。
