JUGEMブログの表示をPC版からスマホ版へ切り替える

7

こんにちわ、ちかです

iPhone/AndroidでのJUGEMブログの表示は
スマホ版からPC版に切り替えることはできますが
PC版からスマホ版に戻す方法が明示されていません

Cookieをクリアすれば戻ります
たかが表示切替のためにCookieをみんなクリアするなんておかしいですよねぇ

なので
ちょっとソースを調べてみました。

PC版への切り替えは
pcview_on() を呼ぶことで行われています。

function pcview_on(){
    document.cookie = "iphone_pcview=on";
    document.cookie = "android_pcview=on";
    window.location.reload();
}

./templates/smartphone/js/smart_phone.js ※ スマホでのみアクセス可

ということは
Cookie "iphone_pcview", "android_pcview" を削除すれば
スマホ版に戻ります!

ということで
スマホ版に切り替えるスクリプトを作りました

スマホ版

スクリプトソース:

(当サイト以外の) JUGEMブログ読者さんへ:

上記スクリプトをブックマークレットにしておけば
PC版からスマホ版へいつでも切り替えられるようになります

※ iPhone (Safari) でのブックマークレット登録方法は次のリンクから↓
ブラウザ「Safari」の使い方。Safariを格段に強化する「ブックマークレット」編。

JUGEMブログオーナーさんへ:

管理者ページの [デザイン] - [HTML・CSS編集] で
上記スクリプトを実行するリンク (下記ソース) をどこかに配置しておけば
PC版からスマホ版へいつでも切り替えられるようになります

ソース:

HTMLを直接編集しなくても
管理者ページの [デザイン] - [フリースペース] で
フリースペースの内容欄に上記ソースを貼り付ければ
同様にスマホ版へ切り替えられるようになります

【JUGEM】スマホ版への切り替え【フリースペース】

※ PCからアクセスしてもスマホ版への切り替えリンクが表示されちゃいますが。。

次は RINO さんです

関連記事


Mobile Safari 5.1 (iOS 5.0) レンダリングの新機能

0

    ちかです、こんにちわ

    ちかの iPhone 4
    無事 iOS 5 になりまして
    ブラウザ (WebKit; Mobile Safari) も
    バージョンアップ

    ということで
    この場を借りて
    新機能を試してみようかと

    ※ この日記は iOS 5 用に書いてます。あしからず。
    PC のブラウザで動くものもありますが…

    参考にしたページ:
    Safari on iOS 5, HTML5 evolution for iPhone and iPad | Mobile Web Programming
    (上記ページの内容を網羅しているわけではないので、興味ある方は英語ですがリンク先へどうぞ〜)

    ★HTML5/input 要素

    レンジ (スライダー)

    <input type="range"
    min="-100"
    max="100">

    <input type="range"
    min="-100"
    max="100"
    style="-webkit-appearance: slider-vertical;">

    0

    年月
    <input type="month">
    日付
    <input type="date">
    日時 (タイムゾーン:UTC)
    <input type="datetime">
    日時 (タイムゾーンなし)
    <input type="datetime-local">
    時刻
    <input type="time">

    ★HTML5/canvas/CanvasPattern

    <canvas id="chika_cp"
      width="100" height="100">
    </canvas>
    <img src="..."
      style="display:none;"
      onload="
        with(document.getElementById('chika_cp').getContext('2d')){
          fillStyle=createPattern(this,'repeat');
          beginPath();
          arc(50,50,50,0,2*Math.PI,false);
          fill();
        }">

    ★HTML/contenteditable 属性 (編集可能要素)

    <p contenteditable>

    ここをタップすると編集できます

    </p>

    ここをタップすると編集できます

    ★CSS

    position: fixed
    (スクロールしてもついてくる要素)
    非推奨。迷惑です。ストーカー規制法違反!
    スクロールにつきまといます
    WOFF (Web Open Font Format)
    @font-face {

    font-family: mikachan;
    src: url('mikachan.woff') format('woff');

    }
    .mikachan {

    font-family: mikachan;

    }

    これはみかちゃんフォントです!
    (WOFFコンバータで変換)

    ★CSS独自拡張/-webkit-overflow-scrolling (スクロール動作指定)

    なめらかスクロール

    <div style="
    width: 120px;
    height: 180px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch">
    ...

    </div>
    かちこちスクロール

    <div style="
    width: 120px;
    height: 180px;
    overflow: scroll;
    -webkit-overflow-scrolling: auto">
    ...

    </div>

    ★CSS独自拡張/gradient (グラデーション)

    線形グラデーション

    <div style="
    width: 120px;
    height: 120px;
    background: -webkit-linear-gradient(white, blue);">

    </div>
    放射グラデーション

    <div style="
    width: 120px;
    height: 120px;
    background: -webkit-radial-gradient(white, blue);">

    </div>
    線形縞模様

    <div style="
    width: 120px;
    height: 120px;
    background: -webkit-repeating-linear-gradient(white, white 5px, blue 5px, blue 10px);">

    </div>
    放射縞模様

    <div style="
    width: 120px;
    height: 120px;
    background: -webkit-repeating-radial-gradient(white, white 5px, blue 5px, blue 10px);">

    </div>
    こんなのも簡単にできます

    <div style="
    width: 120px;
    height: 120px;
    background: -webkit-linear-gradient(-20deg, red, orange, yellow, green, blue, indigo, violet);">

    </div>

    MathML (数式の記述) (参考: MathMLマニュアル)

    <math xmlns="http://www.w3.org/1998/Math/MathML">
     <mstyle fontsize="16px">
      <mrow>
       <mi>x</mi>
       <mo>=</mo>
       <mfrac>
        <mrow>
         <mrow>
          <mo>-</mo>
          <mi>b</mi>
         </mrow>
         <mo>&PlusMinus;</mo>
         <msqrt>
          <mrow>
           <msup>
            <mi>b</mi>
            <mn>2</mn>
           </msup>
           <mo>-</mo>
           <mrow>
            <mn>4</mn>
            <mo>&InvisibleTimes;</mo>
            <mi>a</mi>
            <mo>&InvisibleTimes;</mo>
            <mi>c</mi>
           </mrow>
          </mrow>
         </msqrt>
        </mrow>
        <mrow>
         <mn>2</mn>
         <mo>&InvisibleTimes;</mo>
         <mi>a</mi>
        </mrow>
       </mfrac>
      </mrow>
     </mstyle>
    </math>
    x = - b ± b 2 - 4 a c 2 a

    SVG (ベクターグラフィック) (参考: svgリファレンス)

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120" height="100">
     <rect x="0" y="0" width="120" height="100" style="fill:rgb(255,160,200)" />
     <defs>
      <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
       <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
       <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
      </radialGradient>
     </defs>
     <ellipse cx="60" cy="50" rx="50" ry="40" fill="url(#grad1)" />
    </svg>
    こんなのも描けます
    (ここのソースを流用)

    スクリプト

    async: 非同期実行
    (ページ読み込みを止めずに非同期でスクリプトの読み込み・実行が行われます。)

    <script type="text/javascript"
    src="xxx.js"
    async>

    </script>
    (いいサンプル思いつかず。)
    defer: 遅延実行
    (ページ読み込み後にスクリプトの読み込み・実行が行われます。)

    <script type="text/javascript"
    src="xxx.js"
    defer>

    </script>
    (いいサンプル思いつかず。)
    onerror: エラーハンドリング
    (スクリプトエラー発生時に指定の関数が呼ばれます。)
    window.onerror =
      function (msg, file, line) {
        alert(msg+' @'+file+':'+line);
      };

    ★script/コンパス

    DeviceOrientationEvent.webkitCompassHeading (コンパスの方位)
    DeviceOrientationEvent.webkitCompassAccuracy (コンパスの精度)

    コンパスの方位 (北方向からの時計回りの角度 [degree]) 取得
    window.addEventListener('deviceorientation', function(e) {
      doSomething(
        e.webkitCompassHeading, // 方位
        e.webkitCompassAccuracy; // 精度
      );
    });
    方位:-
    精度:0

    iOS 4.x で動かないことを確認することはもうできないんですけどね〜

    次は マスヲット さんです

    タグ: #ちか #iPhone


    教室情報

    無料体験申込



    ハロー!パソコン教室
    イトーヨーカドー大森校
    〒143-0016
    大田区大森北2-13-1
    イトーヨーカドー大森店3F

    お問合せ(お電話)
    03-3762-8600

    営業時間などの詳細はこちらをご覧ください

    ハロー!パソコン教室イトーヨーカドー大森校無料体験レッスンのお申し込みはこちらから

    ハロー!パソコン教室イトーヨーカドー大森校の地図

    MOS試験会場校

    大森校はこんなところ!


    明るく楽しいスタッフ達があなたのやりたいことを徹底的にサポートします!
    MOS資格も保持していますので、安心して何でもご質問ください!


    大森校ではMOS資格を取得された生徒様が多数いらっしゃいます!
    合格率100%を誇る教室で、あなたもきっと合格できます。

    安心の個別学習
    レッスンは集合形式ではなく、個別学習式。パーテーションで区切られた個別空間でご自分のペースでレッスンを受講いただけるのが人気の理由の一つです!

    雇用保険に加入している方へ
    教育訓練給付金制度のお知らせ
    教育訓練給付制度のお知らせ

    iPhone講座 開講中
    iPhoneの使い方を
    基礎から丁寧に学べます。

    最近の記事

    カテゴリ

    アーカイブ

    コメント

    時間割

    10:10〜
    11:10〜
    12:20〜
    13:20〜
    14:20〜 休み時間
    15:20〜
    16:20〜
    17:30〜
    18:30〜
    19:30〜
    20:30〜
    店舗都合により上記以外にお休みをいただく場合がございますので、ご来校の際は事前に教室までお問い合わせ下さい。

    その他のリンク

            

    Microsoft Office Specialist

    サイト内検索

    その他

    携帯用QRコード

    qrcode

    PR