MDM による HTML5 のログインスクリーン

コメントをどうぞ


現在の MDM は HTML5 のテーマをサポートしています。これにより、テーマを作成するデザイナーはアニメーション、ダイナミズム、すでにウェブデザイナーが利用している全ての技術を用いて美しいログインスクリーンをデザインすることができます!

MDM に関する前書きと予備知識

MDM は Linux Mint のデフォルトディスプレーマネージャです。MDM はログインスクリーンおよび認証とデスクトップセッションの起動を担当するソフトウェアです。

MDM では “greeter” の別名でも知られる 3 つの異なるログインスクリーンが利用できます。

“GTK” greeter は GTK ダイアログで作成された単純なログインスクリーンです。以下のようなものです:

GTK greeter、きれいで単純

“GDM” greeter はキャンバスを使うログインスクリーンで、“GDM テーマ”の別名でも知られる XML テーマと互換性があります。“GDM” greeter はおそらく現在利用しているログインスクリーンであり、利用しているテーマごとに全く違う見た目になります。例えば、Arc-Brave-Userlist テーマを使った場合の GDM greeter は以下のようになります:

GDM greeter、見栄えがよく、テーマごとに見た目が異なる

“HTML” greeter は webkit を使う新しいログインスクリーンで、HTML で書かれたテーマと互換性があります。開発チームがデザインしたテーマの例は以下のようになります:

HTML greeter、見栄えがよく、対話的で作成が簡単

このテーマは Web デザイナーではなく MDM/Mint 開発者がデザインしたものであるため見栄えが悪く感じるかもしれません。このテーマは HTML、CSS、Javascript、Bootstrap、JQuery を利用して作成されました。

上の画像はただのスクリーンショットですが、ログインダイアログに対して透過効果が利用されており、マウスカーソルがユーザ画像に重なったときにユーザ画像を回転させる効果が使われていることがわかります。

ウェブ技術を利用することで生まれる可能性の一部

Linux Mint でウェブ技術を利用することの意味とは美しいテーマを作成できることだけでなく動きのあるテーマを作成できること、最大の資源であるウェブコンテンツを利用できることにあります。

今日のウェブ技術を利用することで可能なことの一例:

上に挙げた技術を使うことで、MDM の HTML テーマに対してログインスクリーンの見た目、ナビゲーション機能、ユーザとの対話処理機能、ログインを可能にする状況などを定義することができます。

HTML ログインスクリーンを使うと、ユーザがジャンプしたり、ミニゲームをしたり、ゲームのレベルを 1 上げないとログインできないようにすることもできます。しかし、そんなことはしないでください。

ログインスクリーンに Flash または Java コンテンツを含めたり、ログイン前の読み込みに時間がかかったり、ミニゲームで遊んでもらうようなことをするとユーザがいらいらするのは言うまでもありません。しかし、上に挙げた技術を利用してデザイナーを煩わせることなくユーザに喜ばれる細やかな効果を実装することもできます。以下はその例です:

  • 背景にアニメーション gif または HTML5 video をを使うことで背景を変化させるテーマを作成する
  • ログインダイアログの最前面に雪を降らせる
  • ユーザがマウスカーソルを乗せると表示されるサイドウィジェットにセッションと言語を配置する
  • ユーザ選択などの際に javascript の carousel を利用する

Ubuntu が実装した LightDM greeter である unity-greeter はこれの良い例です:

unity-greeter では細やかな効果とアニメーションがうまく組み合わされており、HTML テーマとして簡単に実装することができます。

unity-greeter は設定可能ではありませんし、もちろんテーマ化されてもいませんが、アニメーションと効果をどのように利用すればユーザの利便性が向上するのかを考えるには良い例です。ウェブ技術を使えば unity-greeter のようなテーマを簡単に作成することができます。

参考作品 (http://mysteryweb.deviantart.com の作品)

Linux Mint 15 における MDM 1.2

MDM 1.2 は Linux Mint 15 で利用可能になる予定です。新しい Webkit greeter と HTML テーマの選択機能が実装される予定です。

MDM 1.1.x はテーマデザイナー向けのベータ版として利用可能になります

github.com 上の MDM (1.1.x) の開発ブランチでは Webkit greeter 機能が実装済みです。

開発チームは関心を持ったすべてのデザイナーとウェブ開発者に対してベータ版を試してもらうよう声をかけ、見栄えのよいテーマをデザインしてもらいたいと思っています。開発チームはデザイナーが我々の開発した greeter を最大限に活用することを支援し、難しい部分についてデザイナーを指導し、greeter を改善して必要かもしれない追加機能を提供するためにデザイナーからのフィードバックに耳を傾けたいと思っています。

HTML ログインスクリーンのデザインに興味があれば:

この後:

  • メニュー->管理->ログインウィンドウをクリック(またはターミナルで“sudo mdmsetup” を実行)して MDM セットアップツールを起動
  • “ローカル” タブで “スタイル” を “HTML” に設定
  • /usr/share/mdm/html-themes/mdm のコピーを作成し、コピーを編集してテーマを作成
  • /usr/share/mdm/html-themes にテーマを配置するか、セットアップダイアログでテーマの tar.gz アーカイブをドロップしてインストール

テーマのテストを簡単にするために、エミュレータを作成しました!

  • ターミナルを開き “mdm-theme-emulator” を実行
  • “開く” をクリックして index.html ファイルを選択
  • “ダミーの追加” をクリックして、適当なユーザとセッションをテーマに追加

HTML テーマをテストするためにエミュレータを利用する

index.html で使われているいくつかの javascript 関数とそのコメントに注目してください。一部は MDM から呼ばれています。

テーマを作成したり質問があれば開発チームにお知らせください。開発チームと連絡を取るには irc.spotchat.org の #linuxmint-dev チャンネルに参加してください。

  • Linux Mint から、メニュー->インターネット->Xchat IRC をクリック、“/join #linuxmint-dev” を実行。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です