• Tips

    iframe(スクロールバー無し+クロスドメイン)のページ内リンク

    あまり…ほとんど需要が無いと思いますが、以前詰まった iframeのページ内リンクについて書きます。

    あるwebサービスで別途作成したhtmlコンテンツを表示させるためにiframeを使用しました。 その際にhtmlコンテンツでページ内リンクが効かないという問題が発生しました。

    iframeにスクロールバーがあれば通常の方法でページ内リンクができるのですが、 1枚のページであるように見せるため、スクロールバーを表示させることはできません。 また、クロスドメインの場合、親子間でオブジェクトの操作ができないようです(XSRF防止のため)

    色々試した結果、javascriptのpostMessage(子 - htmlコンテンツ)とaddEventListener(親 - 元のwebサービス)の組み合わせで実現できました。

    子から親にpostMessageでスクロール先のY座標を通知 ↓ 親がaddEventListenerで登録したコールバック先でスクロール処理

    kodomo.html(子)

    <html>
    <head>
        <script type="text/javascript">
        $(document).ready(function(){
            // 親フレームにスクロール(=ページ内リンク)する命令を送る
            $(".PageNaiLink").click(function(){
                var parentFrame = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
                var target = $(this).attr("href");
                if(typeof parentFrame != "undefined"){
                    
                    // 【メインの処理】
                    // messageイベントで処理を識別する文字列(この場合は'page_nai_link')と飛び先のy座標を送る
                    // ※この場合、リンク元のタグのhref属性は'#リンク先'のみ
                    parentFrame.postMessage( "page_nai_link" + $(target).offset().top, "*");
                    
                }else{
                    // エラー処理
                }
            });
        });
        </script>
    </head>
    <body>
        <!-- ページ内リンク -->
        <a class="PageNaiLink" href="#link1">ページ内リンク1へ</a><br />
        <a class="PageNaiLink" href="#linl2">ページ内リンク2へ</a><br />
        <a class="PageNaiLink" href="#link3">ページ内リンク3へ</a><br />
        <a class="PageNaiLink" href="#link4">ページ内リンク4へ</a><br />
        <!-- ページ内リンク end -->

        <div style="height:200px;"></div><!-- 余白 -->

        <a id="link1"></a>リンク1

        <div style="height:200px;"></div><!-- 余白 -->

        <a id="link2"></a>リンク2

        <div style="height:200px;"></div><!-- 余白 -->

        <a id="link3"></a>リンク3

        <div style="height:200px;"></div><!-- 余白 -->

        <a id="link4"></a>リンク4
    </body>
</html>

     

    ...

  • Tips

    フロントエンド開発ツールマップみたいな何か。JavaScriptフレームワーク、AltJS、CSSプリプロセッサ、HTMLテンプレートとかまとめ。

    2月1日より社員になりましたくぼたなるひとです。初ブログです。つーかいっそ今日から社員なので初業務です。

    ちなみにデザイナーです。でもフロントエンドエンジニアになりつつあります。でもデザイナーです。

    はい、意味不明な前置きはやめて本題です。 今日はフロントエンド開発ツールについて概観してみようと思います。 「やっぱりフロントエンドエンジニアじゃねえか！」とか言わないでください。

    HTML/CSS/JavaScriptだよね。

    フロントエンド開発の人が扱うものといえば、基本はHTML/CSS/JavaScriptという認識ですよね。 その他ツールとしてはブラウザとエディタさえあれば、極端ですが即開発できます。簡単ですね。 およそ間違ってないですね。 こんな感じ。

    frontendMap-base

    フロントエンド開発に携わっていない方の認識はざっくりとこんな感じだと思います。 およそ間違ってないですね。(2回目)

    ベストプラクティスを追い求めてみた。

    さて、では開発のベストプラクティスを求めていくとどうなるでしょうか。 ぱーっと思いつく限りで一覧っぽくしてみようと思いました。

     

     

     

     

     

     

     

     

     

     

     

     

      こんな感じ

     

    frontendMap  

     

    は？

     

     

      嘘だ・・・・・・夢だろ・・・・・・これ・・・・・・夢に決まってる・・・・・・・・・！

     

     

     

     

    ところがどっこい・・・・・・夢じゃありません・・・・・・！現実です・・・・・・！これが現実です・・・！

    フロントエンドエンジニアに求められているものは右肩上がりに増え続けています。もちろんお給料はきっと据え置きです。世の中無情である。

    言うまでもなく、技術を追い続けるか、知らんぷりするかは個人の裁量に委ねられる訳ですが。

    どうしてこんなことになってるわけよ？

    ／)( ◕ ‿‿ ◕ )(＼ わけがわからないよ

    要因1 - Webのリッチ化＆モバイル化

    Ajax

    非同期通信の使用したUI構築技術。ページ遷移せずにデータを持ってこれる。 これのおかげでGoogleMapsが使えると思えば感謝せずにはいられない。 今ではページ遷移しないでいろいろできるなんてふつうの感覚になっているが、それくらい当然のように恩恵を受けている技術です。

    他にもすごーくたくさん増えたものがあります。

    • クロスサイトスクリプティング
    • クロスサイトリクエストフォージェリ
    • SQLインジェクション

    厨二病っぽい感じありますね。心がくすぐられます！ 全部セキュリティ問題です。 統計的に見ると3つトータルで1,000件/年間くらい起きてるらしいです。それまでほとんどなかったのに。統計データのグラフとかどっかから引用したかったのですが、じょうほうじゃくしゃなので見つけられませんでした( ◠‿◠ )うーむ 詳しく知りたい人は以下のリンクへどうぞ。とてもよくまとまっています。

    ...