hypweb.net
XOOPSマニア  最新情報のRSS(サイト全体)
[ 自宅サーバーWebRing |ID=54 前後5表示乱移動サイト一覧 ]

19年7月16日(Tue) 6時18分
TOP » UsersWiki » nao-pon » blog » 2011-09-04

RSS of nao-pon/blog
Sun 4 Sep 2011
 

HypCommonFunc 更新 (Ver. 20110904) スマートフォン対応関連 anchor.png

HypCommonFunc を更新して、Ver. 20110904 としました。

ダウンロードは、HypCommonFunc のページからどうぞ。

Page Top

主な更新内容 anchor.png

  • html側のテーマ変更
    • theme.html に "<{$xoops_module_header}>" を挿入。(前回忘れてました。)
    • smart.css に、ビデオ表示を画面幅に合わせる CSS を追加した。
      • ビデオ表示する <iframe>, <object>, <embed> を class="video" を持った <div> 又は <span> で囲むと適用されます。
      • 表示例

      • ビデオエレメントが画面横幅にフィットする様子 (端末 Desire HD 標準ブラウザ)

  • XOOPS Cube Legacy 2.2.0 で標準になった jQuery 読み込み環境でも問題にならないように修正。
    • したつもり。本当はスマフォアクセス時は、jQuery 読み込みをしないようにしたかったけど、その仕方がよく分からなかった。
  • Google Adsense のタグが、<div data-role="content"> の外に出ていたのでその修正。
  • 定数 HYP_K_TAI_RENDER に jQuery mobile 使用時は 2、通常の携帯対応時は 1 をセットするようにしました。そのメリットとしてテンプレートなどで場合分けができるようになりました。
    • このサイトでは、スマートフォンに基本は携帯テンプレートを適用しています。携帯テンプレートのメインメニュー、ユーザーメニューを場合分けしてみました。
    • メインメニュー ( block : system_block_mainmenu.html ) のサンプル
      Everything is expanded.Everything is shortened.
       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
       
      
      <{if ($smarty.const.HYP_K_TAI_RENDER == 2)}>
      <a href="<{$xoops_url}>/" id="mainmenu" data-role="button" data-icon="home"><{$block.lang_home}></a><br />
      <ul data-role="listview">
      <!-- start module menu loop -->
      <{foreach item=module from=$block.modules name=main}>
      <li data-role="list-divider" role="heading">
      <a href="<{$xoops_url}>/modules/<{$module.directory}>/"><{$module.name}></a>
      <{if $module.sublinks}>
      <{foreach item=sublink from=$module.sublinks name=sub}>
      <li class="ui-li-divider"><a href="<{$sublink.url}>"><{$sublink.name}></a></li>
      <{/foreach}>
      <{/if}>
      </li>
      <{/foreach}>
      </ul>
      <!-- end module menu loop -->
      <{else}>
      ((i:f8c4)) <a href="<{$xoops_url}>/" id="mainmenu"><{$block.lang_home}></a><br />
      <!-- start module menu loop -->
      <{foreach item=module from=$block.modules name=main}>
      <{if ($smarty.foreach.main.last)}>└<{else}>├<{/if}> <a href="<{$xoops_url}>/modules/<{$module.directory}>/"><{$module.name}></a><br />
      <{foreach item=sublink from=$module.sublinks name=sub}>
      │<{if ($smarty.foreach.sub.last)}>└<{else}>├<{/if}> <a href="<{$sublink.url}>"><{$sublink.name}></a><br />
      <{/foreach}>
      <{/foreach}>
      <!-- end module menu loop -->
      <{/if}>
Page Top

更新ファイル anchor.png

  • 2011-09-04 22:04 nao-pon
    • preload/hyp_preload.php (1.84)
      • Include Ads in '<div data-role="content">'.
  • 2011-09-04 20:51 nao-pon
    • version.php (1.124)
      • Version 20110904.
  • 2011-09-04 20:51 nao-pon
    • html/themes/ktai_default/smart.css (1.5)
      • Image, video width adjustment. It need to wrap by <div> or <span> having 'class="video"'.
  • 2011-09-04 17:27 nao-pon
    • preload/hyp_preload.php (1.83)
      • Defined "HYP_K_TAI_RENDER" to "2" when jQuery mobile uses.
      • Correction for XCL 2.2.0.
  • 2011-09-04 17:23 nao-pon
    • html/themes/ktai_default/smart.css (1.4)
      • Image, video width adjustment. It need to wrap by div having 'class="video"'.
  • 2011-09-04 17:04 nao-pon
    • html/themes/ktai_default/theme.html (1.9)
      • Insert "<{$xoops_module_header}>".


Comments list

Posts tree


naaon  Posted on 2011-9-11 19:21 | Last modified

nao-ponさん、こんにちは。

いよいよ本格的にスマホ対応に動き出しましたね!
どうもありがとうございます。 :-)

naao'nWeb も、早速xpWikiとともにHypCommonFunc上げてみました。 前回のバージョンで投スマホで稿フォーム周りが操作し辛かったのですが、その辺が改善されていそうなのでそこを中心に使って確認しています。 以下、AndroidスマホIS11CAで確認した内容です。

  1. smartフォン用にテキストエリアのサイズ指定の件です。、 smart.cssの textareaの
    height: 5em !important;
    の部分で調整できることは確認しました。
    ただ、モジュールのテンプレートで、textareaごとに高さを指定している場合にそれが効かずに、一律で調整されてしまいますね。。 !important外すと指定が効かないですし。。  具体的には、d3diaryの投稿フォームで、オリジナルのモジュールテンプレートで指定しているように、記事本文は高さを広くして、画像説明書きは狭くしたいのです。

  2. xpWikiのページ権限設定で、メンバー指定するsuggest機能が、スマホだと効かないですね。 d3diaryでも参考にさせていただき実装してあるのですがこれも効きませんでした。 prototype.jsとjQuery干渉の関係でしょうか。

  3. スマホテーマのtheme.htmlの<head>内で、各UA用のcss読み込みを<link>でやっていますが、これって毎回全部読み込みに行くからレスポンスが悪い、とか無いですかね・・ このテーマ読む段階ではHyp_common_preloadでUAはわかっていて読み込み対象が絞れる気がするんですが。。

以上、取り急ぎ気付いた内容です。よろしくお願いします。 :thinking:

nao-pon  Posted on 2011-9-12 0:17 | Last modified

naaon さん、色々試して頂きありがとうございます。

テキストエリアのサイズですが、私も試行錯誤しながら苦戦しています。本当は jQuery mobile の機能で行が増えると自動拡張されるはずなのですが現状では上手くできていません。

このサイトの smart.css は、頻繁に変更していて、現状は次のようになっています。

Everything is expanded.Everything is shortened.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
-
|
|
!
-
|
|
|
|
!
-
|
!
-
|
!
-
|
|
|
!
-
|
!
-
|
|
!
-
|
!
 
-
|
|
|
|
|
|
!
 
 
-
|
|
|
|
|
!
-
|
|
!
body {
    line-height: 1.6;
    -webkit-text-size-adjust: none;
}
a {
    display: inline-block;
    padding-top: .5em;
    padding-bottom: .5em;
    -webkit-tap-highlight-color:rgba(255,0,0,0.40);
}
a + a {
    padding-left: .5em;
}
table,tr,td {
    max-width: 100% !important;
}
textarea {
    /*height: auto !important;*/
    min-width: 60% !important;
    max-width: 100% !important;
}
textarea:focus, textarea:hover {
    min-height: 15em !important;
}
img {
    max-width: 100% !important;
    height: auto !important;
}
div,ul,li {
    margin-left:0 !important;
}
 
.video {
    display: block;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.video embed,
.video object,
.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
video {
    max-width: 100%;
    height: auto;
}

元のソースの高さを維持しつつ、フォーカスが当たった時だけ拡張するようにしてあるつもりです。

サジェストの件は、たしかに動いていませんね。デバグが大変そうですが、調べてみますね。

テーマの theme.html の <head> の CSS は、レンダリング時に必要なものだけ選択して出力するようになっているので、問題はないと思います。
ただ、軽量化ということになるとまだ色々と余地があると思うので、また知恵を貸してくださいね。 :-D

追記:
d3forum 用のテーマ下テンプレート()をベースに jQuery mobile 使用時なんとなくいい感じになるようにいじってます。モバイルテンプハウスにアップしようとしましたが、なぜかファイル添付できなかったので、とりあえずここに置いておきます。 :-)

naaon  Posted on 2011-9-12 7:41 | Last modified

nao-ponさん、こんにちは。

お返事ありがとうございます。

テキストエリアの件ですが、参考に貼っていただいたソースを使ってみたのですが、d3diaryの本文テキストエリアに「pagebreak」を挿入する動作が動かなくなってしまい、戻しました。 javascriptでスマホ表示、デバグが難しいですね。 シミュレータには何を使われていますか、当方Firemobilesimulatorがスマホでうまく表示できず、参考までに教えていただきたく。 :-D

テーマのcss読み込みの件、ああなるほどそうなんですね、了解しました。 (的外れな心配でした)

携帯+スマホ対応テンプレートの寄贈ありがとございます!
モバイルテンプハウスに転載しておきました。
attach.inc.phpが、以前painterプラグインをテストした時のまま置いてありました。 今回のxpWikiバージョンアップでnaaonWEBとtrust側同一なサイト全てでattachプラグインが上書きされ、painterプラグインだけ取り残されたためにアップロードできない状況でした。 テスト用painter.inc.phpを削除して治りました。 :shy:

nao-pon  Posted on 2011-9-12 22:00
引用:

テキストエリアの件ですが、参考に貼っていただいたソースを使ってみたのですが、d3diaryの本文テキストエリアに「pagebreak」を挿入する動作が動かなくなってしまい、戻しました。

"pagebreak" を挿入する動作というのは、JavaScript でユーザー操作により挿入するのでしょうか。CSS を変えただけで動作しなくなってしまいますか?

シミュレータは、Firefox の Firemobile simulator です。ただ、簡単な動作確認ぐらいしかできないし、jQuery mobile での装飾が実機で表示できるページが表示できなかったり(真っ白)するので、主に実機で確認しています。ただ、JavaScriptのデバグができないに等しいのでなかなか辛いです。
ADT Plugin for Eclipse | Android Developers] というものがあるらしいので、今度入れてみようかと思っています。

あと、サジェストについては <!-- --> で囲まれた JavaScript を除去するようになっていたのでそれが原因です。
このサイトでは、修正してみました。

また、jQuery mobile でフォームタグを装飾すると、タグ直接書かれた "on〜" が効かなくなるようです。これは、携帯対応レンダラーの方で対応して、"on〜" があるタグについては装飾を行わないようにしてみました。
ちなみに、DOM のイベントハンドラに登録した場合は、問題がないようです。

とりあえず、こんなところです。

naaon  Posted on 2011-9-13 22:23 | Last modified

nao-ponさん、こんばんは。

引用:
"pagebreak" を挿入する動作というのは、JavaScript でユーザー操作により挿入するのでしょうか。CSS を変えただけで動作しなくなってしまいますか?

そうなんですよ。 javascriptの onclick='xoopsCodeSmilie("diary", "\n[pagebreak]\n");'を呼んで挿入しているんですが、それがうまく動きません。 以前動かなかった際に、javascriptを別ファイルではなく、テンプレートの最後に直接書けばOKだったので、このxoops標準のJSもスマホ用のみに同テンプレートに追記して動作していました。時間がある時にもう少し調べてみます。

引用:
シミュレータは、Firefox の Firemobile simulator です。ただ、簡単な動作確認ぐらいしかできないし、jQuery mobile での装飾が実機で表示できるページが表示できなかったり(真っ白)するので、主に実機で確認しています。ただ、JavaScriptのデバグができないに等しいのでなかなか辛いです。
ADT Plugin for Eclipse | Android Developers] というものがあるらしいので、今度入れてみようかと思っています。

私もほぼ真っ白になってしまい、FireMobileSimulatorは使えてないですね。

引用:
あと、サジェストについては <!-- --> で囲まれた JavaScript を除去するようになっていたのでそれが原因です。
このサイトでは、修正してみました。

pginfo.inc.php プラグインですね。 私のサイトでも修正してみたところ、正常に動作するようになりました。 :-)
d3diaryのsuggestのほうは、何か別の要因がありそうなので、自分で調べてみます。

ありがとうございました。



Post a new comment

Subject
guestname
Body

Go to richer form

Front page   Freeze Diff Backup Copy Rename ReloadPrint View   New Page Page list Search Recent changes   Help   RSS of recent changes (RSS 1.0) RSS of recent changes (RSS 2.0) RSS of recent changes (RSS Atom) Powered by xpWiki
Counter: 6988, today: 2, yesterday: 2
Princeps date: 2011-09-04 (Sun) 22:59:48
Last-modified: 2011-09-05 (Mon) 00:09:38 (JST) (2871d) by nao-pon
このページのTopへ
ログイン
ユーザ名:

パスワード:

オートログイン

Basic 認証

Register now! | Lost Password?



メインメニュー
UsersWiki メニュー
付箋メニュー
Fusen(Tag) menu 
Tag Editor
Color: BG:
Name:  Connect line ID:
 
ブックマーク
Please log in to use it.
[Login]
サイト内 Wiki
☆ 検索 ☆



高度な検索(サイト内)
FireFox検索プラグイン
オンライン状況
合計 54 人がオンライン中 :-)
(UsersWiki : 5 人)

登録ユーザ: 0 & ゲスト: 54

もっと...
サイト情報
管理人

nao-pon
 

登録ユーザ数: 4610


Web Services by Yahoo! JAPAN
楽天ウェブサービスセンター
Amazon.co.jpアソシエイト
現在ページのQRコード
現在ページのQRコード
[携帯対応]
参照元情報