HMDT Blog | ページ 15

大辞泉のためのレンダリングエンジン、Sayori


先日、『大辞泉』のデザインは紙に近くなったって話をした。明朝、ゴシックなど様々なフォントを混在させて誌面を作っている。

これって、紙やWebのデザインやっている人にはごく当たり前のことだけど、プログラムを組む人にとっては悪夢のような仕様だ。iOSでは文字を描画する基本的な部品として、UILabelというクラスが用意されている。これ、基本は同一フォントしか描画しない。いちおう、iOS 6からフォント混在したリッチテキストも描画できるようになった。でもNSAttributedString使わないといけないんだよなぁ。あれ、めんどくさいんだよなぁ。そもそも、今回の仕様は、約物字詰めあるし、ルビあるし、なにより縦書きあるし。UILabelとNSAttributedStringじゃ力不足だ。

じゃ、HTMLか?たしかに、HTMLとCSSなら、きちんと記述する事はできる。ルビはrubyタグで。縦書きはCSSのwriting modeで。でもその表示を行うWeb Kitが、どうにもイマイチ。いやもちろん、Web KitはWebブラウザとして使うなら、なんの問題はないよ。でも今回は、リッチテキストを表示するためのラベル的な使い方をしたいんだ。それだと、重いし、内部に簡単にアクセスできないし。ひとことで言えば、too muchだ。自転車でちょっとコンビニ行きたいだけなのに、新幹線を持ってくるようなもんだ。

ならば作るしかない!無いものは作る、がエンジニアの思想だ。というわけで、自前のHTMLレンダリングエンジンを開発した。それが、Sayoriレンダリングエンジンだ。ちなみに名前は、うちの会社は伝統的にプロジェクト名に魚の名前を採用するため、こうなった。

Sayoriレンダリングエンジンでは、SYLabelというクラスを提供している。UILabelのように、画面に文字を描画するものだ。通常のテキストではなくて、HTMLとCSSを指定できる。こんな感じで使う。

SYLabel* label;
label = [[SYLabel alloc] init];
label.html = @"<html><body><h1>りんご</h1><p>バラ科の落葉高木。また、その果実。</p></body></html>";
label.css = @"h1 { font-size: 2em; font-weight: bold; } p { line-height: 1.5em; }";
[label sizeToFit];
[self.view addSubview:label];

どうよ?!便利でしょう。

UIWebViewと比較すると、軽量である事、同期的に動作する事が、差異になる。UIWebViewの非同期動作は、ブラウザとして使う分にはいいんだけど、ユーザインタフェース部品として使うときはやっかいだからね。

また、内部の構造にObjective-C APIでアクセスできるのも便利だ。UIWebViewだとJava Scriptしか手段がないから、もう面倒でしょうがない。

その他にも、ルビ、縦書き、縦中横、約物字詰め、均等割付け、リンク、テーブル表示、グリフID指定なんかにも対応。けっこう独自の拡張している。

とにかく軽量だし使いやすいんで、『大辞泉』のあらゆるところで使っているよ。

このエンジン、公開するのはやぶさかではないんだけど、サポートの手間が大変な事になりそうなので、躊躇中。

大辞泉サポートページは、こちら
HMDT大辞泉Facebookページは、こちら

大辞泉はフラットデザインか?


新しい『大辞泉』、あちらとかこちらとかで取り上げてもらって嬉しいけど、ソシャゲ風の課金の話が中心だよね、やっぱり。課金モデルは大きい話題だけど、それはアプリを使う上での入り口でしかない。『大辞泉』が『デジタル大辞泉』のバージョンアップではなく、まったく新しいアプリにしたのは、ユーザエクスペリエンスの分野でたくさんの変革を行ったからだ。そっちの方も、ポツポツと紹介してくね。

まずはデザインの話からいこうか。いま世の中では、iOS 7の登場を控えて、フラットデザインの話題がにぎやかだよね。iOS 7でフラットになるかどうかは噂でしかないけど、いままでのSkeuomorphismから変えてくるのはきっと確実だろう。

この、なんべん見てもスペルを覚えられない「Skeuomorphism」デザイン、現実世界をエミュレートしたデザインって意味らしいんだけど、いままでのiOSデザインの規範の1つであった。だから、『デジタル大辞泉』もそれを踏襲していた。特にiPad版ではその傾向が顕著。辞書の「本」としての形をそっくり模倣していたんだ。でも新しい『大辞泉』では、この路線はやめる事にした。

やめた理由は、トレンドとしてSkeuomorphismが衰退するということもあったけど、メインの理由は、どうしても複雑度が上がり拡張性が低くなってしまうから。たとえば、『デジタル大辞泉』のデザインでは、画面を切り替える「タブ」の機能を本の「爪」になぞらえたんだけど、これだとそのメタファーに引っ張られて数を増やすのが容易じゃないんだよね。だから、モダンなメニュー構造にした。

ただ、Skeuomorphismじゃないからフラットにしたのか?と言われると、それはちょっと違うかもしれない。確かに、結果としてフラットな感じにはなっている。でもこれは、別のデザインコンセプトによるものだ。それは、「脱テーブル」だ。

「テーブル」は、iOSのユーザインタフェースの中で最も基本的なものだ。あらゆるアプリで使われている。iOSアプリのデザインとは、テーブルをリッチに見せるものである、と言ってもいいかもしれない。『デジタル大辞泉』でも、検索された見出し語を表示するために使っていた。

新しい『大辞泉』では、見出し語と同時に語意も表示するという仕様にした。ということで、最初に考えたのはこんな感じのデザイン。

うーん、確かに語意も確認できるけどさ、なんかちっちゃいし、文字数も少ないから見づらいよな。じゃあ、もう少し行の高さを高くしてみるか。でもそれだと、語意が短いとスカスカになっちゃうし、一画面に表示できる量が減る。

ここで行の高さにしばられているのは、テーブルでは基本的にすべての行の高さが同じ、なのが前提になっているから。可変行高のテーブルも実現できるんだけど、パフォーマンスが著しく落ちる。辞書みたいに、1000行のテーブルが必要な場合は現実的ではない。

この段階で、テーブルを捨てることを決断した。そもそも、縦書きもやろうと考えていたんで、テーブルと相性が悪い事は分かっていた。どうにかしてごまかそうかと思っていたけど、決別した。

じゃあテーブルは使わないとして、もっと自由にデザインを考えたら、どんなのがいいだろう?他のアプリを参考にしたり、いろいろ検討したんだけど、最終的にたどり着いたのは、書籍の大辞泉の誌面だった。そう。紙の辞書の電子化を行っていたはずなのに、結局紙に帰ってきてしまった。

検索画面のデザインへの要求は、限られた画面領域に、見やすく多くの情報を詰め込むことだ。でも実はこれって、紙の辞書がずっと長い間やってきたことだった。その知見に敬意を払い、たくさん参考にさせてもらった。まず見出し語は太字のゴシック、表記は太字の明朝にする。改行せずに本文を続けて、太さはレギュラー。改行するときは、1文字分インデントする。字間も詰める。なるほど。見やすい。すげー見やすい。

この見た目を得ると、いままでのアプリ的なユーザインタフェースが野暮ったく見える。こんな見せ方をしていた時期もあったけど、やっぱやだよね、これ。

セパレータやディスクロージャが、邪魔に感じる。これらは項目が分かれている事を示すためにあるんだけど、タイポグラフィの力ですでにそれは実現されている。だから取っ払っちまえ。

できたー。うん?気付いてみたらフラットだな。ということで、脱テーブルの下あるべき姿を追い求めたら、結局フラットになっちゃった、てとこです。

大辞泉サポートページは、こちら
HMDT大辞泉Facebookページは、こちら

夢荘にてさんで、大辞泉紹介


夢荘にてさんで、新しい大辞泉を紹介していただきました。ありがとうございます。夢荘にてさんは、Mac時代からの老舗サイト。よく読んでいるサイトに紹介していただくと、嬉しいね。

大辞泉が使いやすく変身、そして回数制限付き無料、これまでのユーザーは回数制限解除

 最初の画面が検索になったのでスッキリ感が出たようです。これまでは紙を電子版に置き換えたようなゴチャゴチャしたスタート画面でした。やはり紙と電子版ではアプローチが違って良いはず。それに変身しました。それと、画像や動画も豊富、これも電子版のメリット。

そう。以前の『デジタル大辞泉』からは、大きくデザインコンセプトを変えた。いま流行の言い方をすれば、Skeuomorphismからフラットデザインへ、ってことになるかもしれないけど、ただのフラットじゃなくて、そこには色々と込められているものがある。それについては、また別のポストで。

大辞泉サポートページは、こちら
HMDT大辞泉Facebookページは、こちら

大辞泉1.0.1をApp Storeに申請


『大辞泉』アプリ、公開されて間もないんだけど、バージョン1.0.1をApp Storeに申請した。最初のバージョンである1.0申請後、すぐに1.0.1の開発にとりかかっていたからね。

1.0.1での修正項目は、以下の通り。

  • 本文検索のAND検索対応
  • 検索画面でのスクロール処理改善
  • 利用可能回数が回復しない事がある問題の修正
  • 『デジタル大辞泉』から追加コンテンツを引き継いだとき、ストアにおいて購入済みとする対応
  • 検索画面で長押しをしたときに操作できなくなることがある問題の修正
  • 他アプリからの検索連携に対応
  • 画面回転時にクラッシュすることがある問題の修正
  • 曖昧検索の改善
  • テキスト描画の改善
  • その他安定性の改善、動作速度の向上

いくつか補足しよう。「本文検索のAND検索対応」は、1.0では本文検索をするとき、2つ以上の語句を指定しても、ANDとしてしてされていなかった。それを、きちんと対応。たとえば、「ドイツ 詩人」を1.0と1.0.1で検索すると、次の通り。左が1.0、右が1.0.1ね。

「検索画面でのスクロール処理改善」は、スクロールにちょっともたつく感じがあったのを修正。これでキビキビと動くようになった。「利用可能回数が回復しない事がある問題の修正」は、文字通りの問題で、今回のアプリでは致命的な問題。修正しました。すいませんでした。

「他アプリからの検索連携に対応」は、どちらかというと開発者向けの機能。URLを使って、他のアプリから大辞泉で検索する事ができる。URLスキーマは、「hmdaijisen」だ。これに関しては、現在詳しいドキュメントを用意しているので、しばしお待ちを。

「曖昧検索の改善」は、棒引きに対する処理を改善した。たとえば、「iPhone(アイフォーン)」を検索するとき、1.0は「あいふぉおん」ではひっかからなかったのが、1.0.1では対応した。

その他、細かな修正や改善が含まれている。

審査にどのくらい時間かかるかは、これはもうApple任せなので分からないけど、5日から10日の間かなぁ。公開された暁には、アップデートをお願いします。

さぁて、1.1の開発にとりかかるぞ。

大辞泉サポートページは、こちら
HMDT大辞泉Facebookページは、こちら

『デジタル大辞泉』から追加コンテンツを引き継いだときの注意点


新しい『大辞泉』アプリは、その前身にあたる『デジタル大辞泉』から、各種引き継ぎを行える。まず、『デジタル大辞泉』を購入済みのユーザは、利用可能回数の制限無し!履歴とブックマークも引き継げる。そして、追加コンテンツである『大辞泉プラス』と『日本の歳事記』の購入履歴も引き継げる、んだけど、ちょっとそれについて注意を。

追加コンテンツの引き継ぎを行うと、『大辞泉』でそれらを利用できるようになる。確認するには、設定画面の「検索する辞書コンテンツ」の項目を確認してほしい。ここにあるスイッチボタンが使用可能なら、無事コンテンツが引き継げた、ということだ。

でも、ここで注意してほしい事がある。バージョン1.0では、購入履歴が無事引き継げても、ストア画面における追加コンテンツの項目は購入済みにならない。これは、App Store上では『大辞泉』と『デジタル大辞泉』は別物として扱われているからだ。したがって、ここで購入ボタンを押してしまうと、別途課金されてしまう。購入履歴の引き継ぎを行った方は、購入をしてしまわないように注意してほしい。

次のバージョンでは、購入履歴を引き継いだ場合でも、購入済みになるように変更を行います。

大辞泉サポートページは、こちら
HMDT大辞泉Facebookページは、こちら

新しい大辞泉、App Storeの辞書ランキングで、Googleを抜いて1位を獲得!


新しい大辞泉、App Storeの辞書ランキングで、Googleを抜いて1位を獲得!

公開3日目にして、1位を奪取したぜ!Google翻訳およびGoogle検索を抜いてやったぜ!よーし、よし。

ダウンロードしていただいた方、ありがとうございました。

大辞泉サポートページは、こちら
HMDT大辞泉Facebookページは、こちら

大辞泉がソーシャルゲームになった理由


新しい大辞泉、無料化と同時にソーシャルゲーム的な、利用回数の概念を取り入れた事が、ちょっと話題になっている

簡単に説明すると、利用可能回数の上限が決まっていて、検索すると1減る。画像を表示すると3減る。動画を再生すると10減る。回数が足りなくなると、機能が一部使えなくなる。減少した回数は、時間が経つと回復する。まさにソシャゲだ。

この決断、HMDT内部だけでなく、コンテンツ提供元である小学館さんも巻き込んで大論争したんだけど、現在のような形にした。

なんでこうなったかというと、まず背景としてあったのが、App Storeにおいて有料アプリが売れないこと。たとえば、今日のApp Storeのトップセールスランキングを見ると、100位までの中に有料アプリは、、、0!100位を超えるとかろうじて有料アプリがポツポツと出てくるものの、ほんの一握りだけ。つまり、売り上げを立てているのは、ほぼすべてアドオン課金タイプのアプリ、ということだ。

「いや、有料アプリだって売れているものはあるよ」「逆に言うと、有料アプリランキングの方が手薄だからランキング上げやすいよ」という意見があるのも知っている。85円のアプリを10,000本売る、というビジネスモデルだったら、それはありだ。でも、辞書アプリはどうしても単価が高い。この戦略はとれない。

とにかく、アプリはユーザに触ってもらえないと話にならない。うちで作るアプリは、触ってさえもらえれば、気に入ってもらう自信はある。だけど、2,000円のアプリでは、このハードルがとても高い。だから、無料にした。無料にするしかなかった、と考えている。

アドオンの販売方法は、始めは機能毎にバラ売りにすることを考えていた。前方一致検索は無料、後方一致検索85円、本文検索170円、画像検索450円、動画検索600円、、、ってな具合にね。でもこれ、一個ずつチマチマ買っていくのは分かりにくい。それに、いろんな機能を触ってもらおうと思って無料化したのに、お金払わないと触れないんじゃ本末転倒だ。ということで、無料状態ですべての機能にアクセスできるのが必須だった。

じゃあどうすんのよと、七転八倒しながら考えていたんだけど、最終的にたどり着いたのが、利用可能回数の導入だった。もちろん、ソーシャルゲームを参考にした。パズドラ好きだし。これだったら、辞書機能を試したい人にはすぐ使ってもらえる。ガッツリ使いたい人は、サクッとアドオン1つ購入するだけで済む。

次の問題は、このやり方がApp Storeの審査を通過するかどうかだった。App Storeのガイドラインでは、試用版を禁止しているからね。

2.9 Apps that are “beta”, “demo”, “trial”, or “test” versions will be rejected

今回の大辞泉のやり方が、「試用版」や「デモ」に相当するのか?HMDTでは、そうではないと考えている。以下の2つがポイントだと思っている。

  • 無料状態で、すべての機能にアクセスできる
  • 試用期間はなく、起動不能になることはない

唯一の制限は、連続して利用する事はできない、ということだけだ。結果として審査は通過したので、この考え方はずれてないらしい。

後は、このままアプリの開発を継続できるかどうかは、アドオン課金率がどの程度になるかにかかっている。ここは、アプリの出来と、コンテンツの中身の勝負だと思っている。このアプリのコンセプトとユーザインタフェースには自信があるし、バックグラウンドの技術もかなり先を見越して設計している。

とにかく、がんばりますよ。

大辞泉サポートページは、こちら
HMDT大辞泉Facebookページは、こちら

Love iPhoneさんで、新しい大辞泉を紹介


Love iPhoneさんで、新しい大辞泉を紹介していただきました。ありがとうございます。

あの大人気デジタル百科辞書『大辞泉』が無料にっ!! \(^o^)/

こちら、既に使っている方も多いのではないかと

思われるほど、超有名な辞書アプリです。

総項目数26万2500語を誇り、言葉の繋がりや類義語、関連するジャンルを

調べたりするのもお手の物なのです。

また、表示される日本語フォントもとても綺麗で、

非常に読みやすい辞書となっています。

また、豊富な画像や動画、地図とのリンクなど、

デジタル辞書としての機能は最高です。 (〃^∇^)o_彡☆

ということで、無料化を契機に多くの人に使ってほしいです。

大辞泉サポートページは、こちら
HMDT大辞泉Facebookページは、こちら

ACH & PFUIさんで、新しい大辞泉を紹介


ACH & PFUIさんで、新しい大辞泉を紹介していただきました。ありがとうございます。

新しい「大辞泉」をダウンロードしてみた。

しかし、この辞書、なかなかよくできていて、
ある言葉を検索すると、いくつかの候補の見出しが語意とともに一覧表示される。
あるようでなかった配慮だ。

また、検索した単語の関連語も表示されて、移動も滑らか。

旧大辞泉を使っていないので、どのような機能が充実しているかは不明だが、
見た目はとても美しく、使ってみたくアプリである。

辞書アプリは、定義の内容ではなく、
いかに美しく見せるか、
いかに検索をストレスなくスムーズに実現するかが選択のポイントだ。
(「広辞苑」アプリを使わないのは、8,500円という値段のせいだけではない。)

そう!そこなんですよ!言葉を検索したとき、候補の見出し語だけでなく、スニペット表示をする。語釈を表示するときに、その語だけでなく、関連する項目も同時に検索して表示する。こういった「つながっている言葉」を同時に表示するだけで、使い勝手がグッと上がるんですよ。

ただしこれって、プログラム的にはかなり難しい。だってある語を表示するときに、1つだけ検索するのではなく、数十個一気に検索しなくてはいけないから。これをパフォーマンスを犠牲にせずに実現するため、内部ではエライ大変な事をやっております。

大辞泉サポートページは、こちら
HMDT大辞泉Facebookページは、こちら

AppleFan!さんで、新しい大辞泉を紹介


AppleFan!さんで、新しい大辞泉を紹介していただきました。ありがとうございます。

まるでソーシャルゲーム? 一定時間ごとに「利用可能回数」が増える、基本無料の辞典アプリ【大辞泉】

普段あまり辞書を引かない人にこそオススメです。

【大辞泉】は、総項目数26万2,500語を載録した本格的な百科+国語の大型辞典アプリ。

時間経過により「利用可能回数」が1ずつ増えるという、まるでソーシャルゲームのようなシステムが採用されているため、本来であれば高価な機能を誰でも無料で使うことができます。

記事のタイトルにあるように、ソーシャルゲームの考え方を取り入れた、新しい試み。ユーザにとっての利点は、無料で使えるということに尽きますな。ぜひ、お試しを。

大辞泉サポートページは、こちら
HMDT大辞泉Facebookページは、こちら