[Linuxmint-jp-devel:272] The Linux Mint Blog - 2013 年 2 月 27 日 (MDM による HTML5 のログインスクリーン)

AYANOKOUZI, Ryuunosuke i38w7i3 ＠ yahoo.co.jp
2013年 3月 1日 (金) 23:13:50 JST 

綾小路です。

表題の翻訳です。査読をお願いします。

------------------------------------------------------------------------
Linux Mint                                         http://linuxmint.com/
The Linux Mint Blog (開発チームニュース)      http://blog.linuxmint.com/
2013 年 2 月 27 日                     http://blog.linuxmint.com/?p=2327
------------------------------------------------------------------------
HTML5 Login Screens with MDM
----------------------------
MDM による HTML5 のログインスクリーン
-------------------------------------

Written by Clem on Wednesday, February 27th, 2013 @ 8:33 am | Main Topics
[1]
Clem 著 2013 年 2 月 27 日 水曜日 午前 8:33 | Main Topics [1]

In brief

簡単な説明

MDM now supports HTML5 themes. This allows artists to design beautiful
login screens with animations, dynamism and all the technologies which
are already available to web designers!

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

Introduction and background info about MDM

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

In Linux Mint, MDM is the default display manager. It is the software
which is responsible for the login screen, and which coordinates the
authentication and the launching of the desktop sessions.

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

MDM features 3 different login screens, also known as “greeters”.

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

The “GTK” greeter is a simple login screen made of a GTK dialog. It looks
like that:

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

[IMAGE] [2]

The GTK greeter, clean and simple

GTK greeter、きれいで単純

The “GDM” greeter is a login screen which uses a canvas and is compatible
with XML themes known as “GDM themes”. It’s probably the one you’re using
right now, and it can look very different depending on which theme you’re
using. Here’s an example of the GDM greeter running the
Arc-Brave-Userlist theme:

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

[IMAGE] [3]

The GDM greeter, good looking and themeable

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

The “HTML” greeter is a new login screen which uses webkit and is
compatible with themes written in HTML. Here’s an example of a theme
designed by the development team:

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

[IMAGE] [4]

The HTML greeter, good looking, interactive and easy to theme

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

It might not look great like that, but keep in mind that this was
designed by the MDM/Mint developers.. not by Web artists. This particular
theme was made using HTML, CSS, Javascript, Bootstrap and JQuery.

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

Even though it’s only a screenshot, you can see the transparency used on
the login dialog and see how the user picture rotated when we placed the
mouse over it.

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

Some of the possibilities provided by Web technologies

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

Using web technologies within Linux Mint means we can not only create
beautiful themes but also dynamic ones and use one of the biggest
resources available: web content.

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

Here are a few examples of what can be done using Web technologies today:

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

* Easy background effects: http://hakim.se/experiments/html5/origami
[5]
* A dynamic interface: http://www.theamazingspidermangame.com/ [6]
* An entire game: http://www.cuttherope.ie/ [7]
* Another game: http://canvasrider.com/ [8]

* 簡単な背景効果: http://hakim.se/experiments/html5/origami [5]
* ダイナミックインターフェイス: http://www.theamazingspidermangame.com/ [6]
* 完全なゲーム: http://www.cuttherope.ie/ [7]
* 完全なゲーム: http://canvasrider.com/ [8]

Using these technologies, MDM HTML themes can define the way the login
screen looks, but also the way the navigation works, how the user
interaction works, the conditions to enable log in etc etc…

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

[IMAGE] [9]

Your HTML login screen can make the user jump, play a minigame and even
finish a level before he can log in…. but please don’t do that…

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

It goes without saying that including Flash or Java content in the login
screen, asking the user to wait for something to load, or to play a
minigame to be able to log in would cause some frustrating experience.
But these technologies can be used to implement subtle effects
appreciated by users and without efforts from the artist, for instance:

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

* Giving the theme an animated background by using an animated gif or
playing an HTML5 video in the background
* Making snow flakes fall on top of the login dialog
* Placing sessions and languages in side-widgets which expand when the
user hovers them
* Using a javascript carousel for user selection… etc etc..

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

A good example of this is unity-greeter, the LightDM greeter implemented
by Ubuntu:

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

[IMAGE] [10]

unity-greeter is a good mix or subtle effects and animations and is easy
to implement as an HTML theme

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

Although this greeter is non-configurable and certainly non-themeable,
the end result is a good example of how animations and effects can be
used to improve the user experience. Using web technologies, a
unity-greeter looking theme can be made easily.

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

[IMAGE] [11]

A simple concept (credits to http://mysteryweb.deviantart.com [12] )

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

MDM 1.2 in Linux Mint 15

Linux Mint 15 における MDM 1.2

MDM 1.2 will be available in Linux Mint 15 and will feature this new
Webkit greeter and a selection of HTML themes.

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

MDM 1.1.x available as BETA for theme artists

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

On github.com, the development branch of MDM (1.1.x) already features a
functional Webkit greeter.

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

We’re calling all interested artists and web designers to participate in
this. We’d like to design good looking themes for it. We want to help
artists make the most of the greeter we developed, guide them through and
listen to their feedback to improve it and provide additional features
themes might need.

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

If you’re interested in designing an HTML login screen:

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

* Grab and install the latest development package for MDM at
http://build.linuxmint.com/automate/www/instances/linuxmint/ubuntu/pool/main/m/mdm/
[13]
* Open a terminal and remove the Mint adjustment by typing this
(without the quotes): “rm -f
/etc/linuxmint/adjustments/15-mdm.overwrite”
* Reboot your computer

* 以下の URL から MDM の最新版開発パッケージを入手してインストール
  http://build.linuxmint.com/automate/www/instances/linuxmint/ubuntu/pool/main/m/mdm/
  [13]
* ターミナルを開いて以下のコマンドを入力して Mint 用の修正ファイルを削
  除(引用符は含めないでください): “rm -f
  /etc/linuxmint/adjustments/15-mdm.overwrite”
* コンピュータを再起動

Then:

この後:

* Launch the MDM setup tool by clicking on Menu->Administration->Login
Window (or from a terminal with “sudo mdmsetup”)
* In the “local” tab, set the “Style” to “HTML”.
* Make a copy of /usr/share/mdm/html-themes/mdm and modify it to create
your own theme
* Place your theme in /usr/share/mdm/html-themes or drop an tar.gz
archive of it on the setup dialog to install it

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

To test your theme easily, we made an emulator!

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

* Open a terminal and type “mdm-theme-emulator”
* Click “open” and select your index.html file
* Click “Add dummies” to add random users and sessions to your theme

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

[IMAGE] [14]

Use the emulator to test your HTML theme

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

Note the various javascript functions present in index.html and read
their comments. Some of them are called by MDM.

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

Let us know about your theme or any question you might have. The
development team is available on IRC at irc.spotchat.org on
#linuxmint-dev

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

  * From Linux Mint, launch Menu->Internet->Xchat IRC, then type “/join
    #linuxmint-dev”

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

  * You can also use the forums. We created a dedicated thread for MDM
    HTML theme designers at
    http://forums.linuxmint.com/viewtopic.php?f=25&t=126979 [15]

  * フォーラムを利用することもできます。我々は MDM の HTML テーマデザイ
    ナー専用のスレッドを作成しました。
    http://forums.linuxmint.com/viewtopic.php?f=25&t=126979 [15]

You can follow any responses to this entry through the RSS 2.0 [16] feed.
You can leave a response, or trackback [17] from your own site.

RSS 2.0 [16] フィードを使ってこのエントリーに対する反応をフォローできま
す。コメントを残したり、ご自身のサイトからトラックバック [17] を送るこ
ともできます。

    [1] http://blog.linuxmint.com/?cat=1
    [2] http://www.linuxmint.com/tmp/blog/2327/mdmlogin.png
    [3] http://www.linuxmint.com/tmp/blog/2327/mdmgreeter.png
    [4] http://www.linuxmint.com/tmp/blog/2327/mdmwebkit.png
    [5] http://hakim.se/experiments/html5/origami
    [6] http://www.theamazingspidermangame.com/
    [7] http://www.cuttherope.ie/
    [8] http://canvasrider.com/
    [9] http://www.linuxmint.com/tmp/blog/2327/thumb_mario.png
    [10] http://www.linuxmint.com/tmp/blog/2327/unity-greeter.png
    [11] http://www.linuxmint.com/tmp/blog/2327/eos-concept.png
    [12] http://mysteryweb.deviantart.com
    [13] http://build.linuxmint.com/automate/www/instances/linuxmint/ubuntu/pool/main/m/mdm/
    [14] http://www.linuxmint.com/tmp/blog/2327/emulator.png
    [15] http://forums.linuxmint.com/viewtopic.php?f=25&t=126979
    [16] http://blog.linuxmint.com/?feed=rss2&p=2327
    [17] http://blog.linuxmint.com/wp-trackback.php?p=2327

よろしくお願いします。
綾小路龍之介
--
AYANOKOUZI, Ryuunosuke <i38w7i3 ＠ yahoo.co.jp>

-------------- next part --------------
テキスト形式以外の添付ファイルを保管しました...
ファイル名: 無し
型:         application/pgp-signature
サイズ:     836 バイト
説明:       無し
URL:        <http://linuxmint-jp.net/pipermail/linuxmint-jp-devel/attachments/20130301/f3b50310/attachment.sig>

Linuxmint-jp-devel メーリングリストの案内