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

19年1月24日(Thu) 1時53分
TOP » UsersWiki » nao-pon » blog » 2011-09-04

RSS of nao-pon/blog
2011 9月 4 (日)
 

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}>".


コメント一覧

投稿ツリー


naaon  投稿日時 2011-9-11 19:21 | 最終変更

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  投稿日時 2011-9-12 0:17 | 最終変更

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  投稿日時 2011-9-12 7:41 | 最終変更

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

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

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

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

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

nao-pon  投稿日時 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  投稿日時 2011-9-13 22:23 | 最終変更

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のほうは、何か別の要因がありそうなので、自分で調べてみます。

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



新しくコメントをつける

題名
ゲスト名
投稿本文

より詳細なコメント入力フォームへ

トップ   凍結 差分 バックアップ 複製 名前変更 リロード印刷に適した表示   ページ新規作成 全ページ一覧 単語検索 最新ページの一覧   ヘルプ   最新ページのRSS 1.0 最新ページのRSS 2.0 最新ページのRSS Atom Powered by xpWiki
Counter: 6430, today: 1, yesterday: 2
初版日時: 2011-09-04 (日) 22:59:48
最終更新: 2011-09-05 (月) 00:09:38 (JST) (2698d) by nao-pon
このページのTopへ
ログイン
ユーザ名:

パスワード:

オートログイン

Basic 認証

新規登録 | パスワード紛失



メインメニュー
UsersWiki メニュー
付箋メニュー
付箋メニュー 
付箋の編集
文字色: 背景色:
お名前:  線接続id:
 
ブックマーク
オンサイトブックマークは
ログインするとご利用になれます
[ログインする]
サイト内 Wiki
☆ 検索 ☆



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

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

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

nao-pon
 

登録ユーザ数: 4594


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