モバイル・ゲートウェイ/モバイル用ホームページ整形

From MediaWiki.org
Jump to navigation Jump to search
This page is a translated version of the page Mobile Gateway/Mobile homepage formatting and the translation is 33% complete.

Outdated translations are marked like this.
Other languages:
Bahasa Indonesia • ‎Deutsch • ‎English • ‎Lëtzebuergesch • ‎Tiếng Việt • ‎dansk • ‎español • ‎français • ‎interlingua • ‎italiano • ‎kurdî • ‎lietuvių • ‎magyar • ‎polski • ‎suomi • ‎svenska • ‎македонски • ‎олык марий • ‎русский • ‎удмурт • ‎العربية • ‎روچ کپتین بلوچی • ‎سنڌي • ‎پښتو • ‎বাংলা • ‎ไทย • ‎ဖၠုံလိက် • ‎မြန်မာဘာသာ • ‎中文 • ‎日本語 • ‎粵語 • ‎한국어

もしあなたのウィキメディア・プロジェクトのメインページ(ホームページ)がモバイル端末(スマートフォンやタブレットなど)で閲覧されるように整形されておらず、さらにあなたがそのプロジェクトの管理者ならば、以下の手順に従ってください。

注意してください:ホームページを編集するには管理者権限がなければなりません。

手順1

最初に、モバイル用のホームページに適したコンテンツを決めてください。

下記の要点によって、デスクトップ版のページのコンテンツ(「今日の一枚」など)を評価します。

  • どれくらい人気か。
  • 定期的に更新されているか。
  • ざっと読みに適しているか。
  • モバイルの画面にうまく適しているか。

どのコンテンツが理に適っているか決めたら、手順2に進みます。

手順2

以下を行うためには、ログインして管理権限を持たなければなりません。ホームページのデスクトップビューにおいて、「編集」 をクリックしてモバイル版に表示するコンテンツを探します。

各コンテンツの中で、ページから非表示にしたいものに nomobile クラスを追加するか、このクラスを持つ要素の子要素となるようにします。

<div class="nomobile"> ... </div>

div タグの開始タグと終了タグの間に何が入っていますか?それはおそらく「今日の一枚」といったページのコンテンツのためのテンプレートでしょう。

スタイルの更新

一部のスタイルは、モバイル・フレンドリーではないでしょう(モバイルに適さない)。例えば、width(幅)、height(高さ)、padding(余白)といったCSSの指定が固定ピクセルで指定されているといったことです。もし別のスタイルを適用する必要があれば、Extension:TemplateStylesを用いたり、MediaWiki:Common.cssMediaWiki:Mobile.cssにて指定します。

Making MediaWiki Mobile Friendlyには、共通する問題に対するいくつかのヒントが紹介されています。

「ページを保存」をクリックします。

これでほぼ完了です。

手順3

モバイルビューで表示します。アドレスは通常は、languagecode.m.project.orgとなり、日本語版ではja.m.project.orgです。ブラウザの幅を狭くすることでモバイルの画面を模倣することができます。ページはどのように見えますか?

もし再び変更を行うには手順2に戻ります。満足できるまで手順2、手順3と繰り返します。

満足がいけば完了です!

MFSpecialCaseMainPage

$wgMFSpecialCaseMainPageが有効であれば、(標準では無効)モバイルとデスクトップの利用者に異なるコンテンツを提供できます。この方法は推奨されておらず、また廃止予定であるため as it only works on the `Main Page` and is a maintenance burden and should only be used as a stop-gap measure when transitioning your MediaWiki site to a mobile experience.

The homepages of each language version of Wikipedia and all of the other Wikimedia projects are diverse, so it is impossible to present a universal example. Nevertheless, to give some idea of how this might look on your site, here is the German version of Wikipedia: https://de.wikipedia.org/ If you click on the View source ("Quelltext anzeigen") tab next to "Lesen", you can see the wikitext and using your browser's Find feature, look for the string, "mf-".

In this case, the div tag for the mf selectors are part of larger page objects. Only someone familiar with that project's homepage formatting will understand this in detail.

Now go to: https://de.m.wikipedia.org/ The resulting mobile page will be visible. The sections of content corresponding to the mf selectors are rendered in the mobile view.

Deprecation steps for wikis using MFSpecialCaseMainPage

MobileFrontend is in the process of deprecating the code relating to main page special casing. If you have a wiki using it you'll want to stop using it immediately. If you have any questions please don't hesitate to use the talk page!

How can I tell if I'm using it?

If your main page contains "mf-" or "mp-" in the HTML markup, you are using it. You can check this by inspecting the HTML for your main page. If this is too technical, you can also check this by copying and pasting the wiki markup into your user namespace and visiting the page in mobile. If there is a visual difference between your main page and the page in your user namespace you are using main page special casing.

E.g. compare https://en.m.wikipedia.org/wiki/User:Jdlrobson/Main_page_formatting_test with the actual main page for English Wikipedia.

What can I do to fix this?

Assuming you do not want to do a big redesign and just want to retain the existing main page design, you can follow this guide.

Copy the main page markup into a sandbox e.g. a sub page of the user namespace. Now switch to mobile mode. Note, the mobile site can be viewed in your desktop browser, so if you can you may want to consider using the wikitext editor of the mobile site.

You'll need the TemplateStyles extension deployed on your wiki. You can see if it's installed on your wiki by visiting Special:Version. If it's not for whatever reason please request it.

Known problems are listed below:

1. Stop using tables

If your main page uses table's in any way, please remove them. There are many tutorials on the web for doing column layouts. Please put "responsive column layout" into your favorite search engine. If this is confusing, you'll probably want to seek help from a CSS expert!

DivTable converter provides a way for you to convert a table HTML to divs. You should aim to put the associated CSS in MediaWiki:Common.css. This act alone should improve your rendering in mobile greatly.

2. Review any inline styles

Search for any instances of styles which make use of the css properties "width", "float", "padding" or "margin"

For example:

<div style="float: left; width: 200px;"

Move these into a TemplateStyle. Use a class and move the css declaration to css.

<div class="main-page-box"

Example CSS:

/* Scope your styles inside a media query. This means they will only apply on tablet or desktop.  */
@media all and ( min-width: 720px ) {
    .main-page-box {
        float: left;
        width: 200px;
    }
}

e.g. Example - note the pre tag is only included for example purposes - this should be put into a TemplateStyle.

3. Reskin for mobile

With the above steps applied your page should look no different on a desktop browser, but as you shrink the screen (horizontal width) to under 720px - the threshold you introduced in step 2 the styles should disappear. You'll want to add new styles (outside the media query you introduced in step 3). These styles will apply to mobile devices and will be overridden.

If there is any content in the page that you do not want to render in the mobile skin you should add the class "nomobile". e.g.

<div class="nomobile">This content should not show on the mobile site but it will show on the desktop site.</div>

4. Apply the new template

Copy and paste the sandbox page into your Main page. Refresh the browser and verify that it works as expected on both mobile and desktop.

5. Make a site request to turn off main page special casing

If your site is now no longer using the special page casing and your site appears in this config:

https://github.com/wikimedia/operations-mediawiki-config/blob/master/dblists/mobilemainpagelegacy.dblist

You'll want to let a Wikimedia site admin know that you are ready for main page special casing to be turned off. File a Phabricator ticket using this link that links to this web page and lists your wiki.

You'll be able to tell when this has been successful if you've been using the mp- prefixes as suddenly other content will display on your mobile site!

6. Remove any mobile specific ids.

i.e. any instance of the following:

id="mp-

These are not necessary any more. Previously these would choose which content to show on mobile, but now you have a new mobile first responsive design and have disabled main they will be ignored.

e.g. This example