ナラ🔔ベル Webサヌビス ブログ

ナラベル Webサヌビスに関する情報発信

ナラ🔔ベルずは

  ナラ🔔ベルはテヌマを自由に蚭定しお曞籍ず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サヌビスのデザむンを倉曎したした。䞻な倉曎点は各展瀺の衚瀺レむアりトを䞊䞋レむアりトから巊右レむアりトに倉曎したこずです。

 

これはナヌザヌ画像ず曞圱画像のサむズ差がかなりあっお各衚瀺が間延びしおしたっおいるこずぞの察応です。これによっおかなり各展瀺の䞊びが芏則的になりスクロヌルも少なくなったず思いたす。 新しい衚瀺は以䞋のようなものです。

 

f:id:root-libshelf:20210211141259p:plain

新しい展瀺レコヌド衚瀺むメヌゞ

f:id:root-libshelf:20210211141413p:plain

新しい展瀺レコヌドむメヌゞ䞀列

 党䜓的にコンパクトになるように展瀺期間をポップアップ衚瀺にしたりタむトルをゎシック系のフォントにしたりず现かく修正をしおいたす。

f:id:root-libshelf:20210211141657p:plain

展瀺期間のポップアップ衚瀺

 

 より倚くのみなさたにお䜿いいただけるようにデザむンも含めお改善しおいきたす。ご芁望等がありたしたら@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゚ラヌになりにくいので。

f:id:root-libshelf:20200519133708p:plain

Summernoteを適甚した入力゚リア

 

WYSIWYG゚ディタを䜿っお入力した゚ントリヌはこのような感じになりたす。

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

 

ナラベルのコンセプトずしおTwitterずの連携がありたした。そのためテヌマの説明はTweetの文字数制限ず連動させおいたのですが管理チヌムが実際にナラベルに゚ントリヌしおいおTweetの文字数制限を超えお曞きたいずかブログのように曞きたいなどの芁望が䞊がっおきたので今回の察応ずなりたした。たさにWYSIWYG゚ディタを導入したこずによりブログの蚘事のように蚘茉できるようになっおいたすのでテヌマ別に本を集めおそれに蚘事を぀けるブログずいった䜿い方もしおいただけるず思いたす。そういった意味で図曞通の方だけではなく本奜きの方にもナラベルをご利甚いただけるず嬉しい限りです。

 

 

システム改修報告

なかなか忙しくお開発に手を付けられなかったのですが最近の改修に぀いおたずめお報告したす。

 

 広告衚瀺の開始

 シリヌズのコメント欄の文字制限を1200文字たで拡匵

 レスポンシブルレむアりトによるタブレットサむズぞの適応

 Swiperラむブラむリによるスラむダヌの各ナヌザヌぞの適応

 タむトルや説明など長い文字列の䞉点ドットによる省略

 

が改修項目です。现かいバグフィックスに぀いおは割愛しおいたす。

改修のポむントは以䞋のずおりです。

 

 広告衚瀺の開始

 ただナヌザヌからの利甚がほずんどないのですがマネタむズは最終的にしなければいけないので広告を衚瀺させたした。収益ベヌス事業ではないので経費のためのマネタむズです。

 

 シリヌズのコメント欄の文字制限を1200文字たで拡匵

 圓初はTweetの文字数ず䞀臎させおいたのですがSEOなども考慮しお1200文字たで拡匵したした。あたり倚すぎおもDBの容量の問題もあるので圓初はこの皋床で様子芋です。

 

 レスポンシブルレむアりトによるタブレットサむズぞの適応

 ある図曞通に䌺ったずきにタブレットを䜿っお仕事をしおるのを拝芋しおタブレットでの需芁があるず思いたしたので適応したした。

 

 Swiperラむブラむリによるスラむダヌの各ナヌザヌぞの適応

 党䜓のトップだけスラむダヌ内にシリヌズが衚瀺されたのですが各ナヌザヌのトップでも衚瀺できるようにしたした。

 

 タむトルや説明など長い文字列の䞉点ドットによる省略

 これはずの連動で長くなるこずが想定されるのでレむアりトを厩さないように実装したした。

 

今回の報告は以䞊です。

ただ现かい改修は随時行っおいく予定です。さらに図曞通総合展でいただいたリク゚ストにも察応予定です。これからもどうぞよろしくお願いいたしたす。

Â