ようこそ!浜村拓夫の世界へ

    ブログ内検索

    最近の記事

    ブックマーク数の多い記事

    Blog Translation

    Powered By FC2ブログ

    Powered By FC2ブログ
    ブログやるならFC2ブログ


    FC2ブログ LOGIN

    with Ajax Amazon

    WordPressの脆弱性回避策

    このエントリーを含むはてなブックマーク はてなブックマーク - WordPressの脆弱性回避策 あとで読む
    WordPressの脆弱性が報告されていた。

    人気CMS「WordPress」に脆弱性、至急更新を | マイナビニュース

    脆弱性は、攻撃者が悪用することで、コメントやフォーラム、ディスカッションを通じて「クロスサイトスクリプティング(XSS)」を実行できるというもの。この手法は「蓄積型XSS」と呼ばれるもので、Webサイトが蓄積しているコンテンツ中にスクリプトを紛れ込ませる。



    蓄積型XSS - Google検索

    3種類のクロスサイトスクリプティングとその対策

    クロスサイトスクリプティングは、攻撃者が用意したスクリプトを、ユーザが信頼する第三者の Web サイトから提供されたものとして、ユーザの Web ブラウザ上で実行させる手法です。

    攻撃は、攻撃者のスクリプトを第三者の Web コンテンツ中に紛れ込ませることにより実現されます。紛れ込ませる手法は、次の3種類に分類できます。

    - persistent 型 (stored 型、蓄積型)
    Web サイトが蓄積しているコンテンツ中に紛れ込ませる
    - non-persistent 型 (reflected 型、反射型)
    Web サイトが動的に作り出すコンテンツ中に紛れ込ませる
    - DOM 型
    Web ブラウザ内に蓄積しているコンテンツ中に紛れ込ませる



    PHPやJavaScriptに限らず、動的なWebサイトは、セキュリティーに注意して作らないと、脆弱性が生じる。

    WordPressを安全に利用する一つの方法として、WrodPressを動的Webサイトを作るツールとして使うのではなく、静的Webサイトを作るツールとして利用すれば良い。

    ・静的サイト生成のプラグインを使い、HTMLファイルを作る。
    ・Webサーバーで、PHPインタプリタ―が不要なHTMLファイルなら、高速に処理できる。
    ・静的サイトなら、キャッシュサーバーやCDNを利用して、高速に処理できる。

    WordPressを静的サイト生成(Static Site Generator)ツールとして利用することによって、脆弱性対策のみならず、C10K問題も解決できるだろう。

    基礎からのWordPress 改訂版 (BASIC LESSON For Web Engineers)
    高橋 のり
    SBクリエイティブ
    2015-04-18
    ¥ 3,434

    CMSからSSGへ~静的サイトジェネレーターの活用

    このエントリーを含むはてなブックマーク はてなブックマーク - CMSからSSGへ~静的サイトジェネレーターの活用 あとで読む
    Webサイト制作で、セキュリティーや負荷対策を考慮するとき、静的サイトの重要性に気づきます。
    WordPress等をCMSとして利用する方法も悪くはないと思いますが、Jekyll等の静的サイトジェネレーターを利用したWebサイト制作も、今後は重要になってくるだろうと思います。

    静的サイト生成という「古くて新しい手法」の復活 - モジログ

    この数年くらいで、主にプログラマのあいだに、「静的サイト生成(static site generation)」への人気が復活しつつあるようだ。

    CMSがウェブサイトを自動的に生成する方式として、大きく分けて「動的(dynamic)」と「静的(static)」がある。
    「動的」とは、あらかじめHTMLを生成するのではなく、ウェブサイトに対して要求(HTTPリクエスト)が来たときに、リアルタイムにHTMLを生成して返す方法である。
    「静的」とは、先ほども書いたように、ウェブサイトの全ページのHTMLをあらかじめ生成しておく方法である(関連:「弁当屋の弁当は 「動的」 コンビニ弁当は 「静的」」)。



    黒い画面不要!デザイナ向け静的サイトジェネレーター「Phest」を公開しました | チャットワーククリエーターズブログ

    でも、Webサイトをわざわざ静的サイトとして制作する意味は何でしょうか?

    それはズバリ、圧倒的なサーバー運用の楽さにあります。

    静的サイトジェネレーターで生成されたWebサイトは、PHPやRuby、Perlなどサーバーサイドのコードを一切含まないため、 PHPなどが稼働しないWebサーバーでも運用することができます。

    そのため、低価格かつどんなに大量なアクセスが来ようがまず落ちないAmazon S3や、 完全に無料で運用できるGitHub Pages、ファイル管理が非常に楽なDropboxなどを使ってWebサイトの公開が可能です。

    静的サイトは制作する時にひと手間かかったり、いくつかの制約はあるのですが、 それさえ乗り越えられればサーバー運用にもはや悩まされることはない、とても大きなメリットを得ることができます。

    以下に、静的サイトのメリットを簡単にあげておきます。

    ・サーバー運用不要、コストがとっても安い
    ・BlogやCMSなどのように管理画面が無いためセキュリティ的に安全
    ・ファイルなのでバックアップやバージョン管理が容易



    それでは、どうやって静的サイト生成を行えば良いのでしょうか?

    【“CMSからSSGへ~静的サイトジェネレーターの活用”の続きを読む】

    Open Web Apps API

    このエントリーを含むはてなブックマーク はてなブックマーク - Open Web Apps API あとで読む
    FirefoxOSのプロジェクトを通じて、Webアプリ開発の標準化が模索されているようです。

    アプリのインターフェースは、(1)人間向けと、(2)機械向け、の2種類があります。
    (2)の機械向けのインターフェースである「API」を整備すれば、アプリ間の連携が円滑になり、人間向けの利便性も向上するでしょう。
    アプリの設計では、この二つのインターフェースを整えるようにしたいと思います。

    「Webこそがゲーム・プラットフォームである」──Mozilla開発者が語るWebブラウザ戦略 vol.2 #mozilla #firefox #WebGL|CodeIQ MAGAZINE

    Vladimir Vukicevic氏(以下、Vukicevic):私たちはWebがいつまでもオープンなものであることを願っています。「Webこそがプラットフォームである」というのは私たちの変わらぬ信念ですから。現状ではさまざまなアプリプラットフォームがWeb上にありますが、すべてのプラットフォームは互いに互換性があるべきです。その考え方を実現するために、私たちは Open Web Apps APIを開発し、あらゆるベンダーに対して協力を呼びかけています。



    これまでの数多くのスタートアップが、インタラクティブな3D表現をWeb上で行なおうとしていました。しかし、そこには多くの技術的な制約もありました。また知名度が低いがゆえに、優れたゲームを広げることができなかった企業も多い。まさに、これこそがWebGLやMozillaのOpen Web Apps戦略が解決しようとしている課題なのです。



    【“Open Web Apps API”の続きを読む】

    Bootstrapのレスポンシブデザインで、上端に空白ができるのを防ぐ方法

    このエントリーを含むはてなブックマーク はてなブックマーク - Bootstrapのレスポンシブデザインで、上端に空白ができるのを防ぐ方法 あとで読む
    CSSフレームワークの「Twitter Bootstrap」を使うと、Webデザインが楽になり、捗ります。

    しかし、Bootstrap2.3.2を使って、レスポンシブデザインで縮小した画面を表示させると、画面上部に、「謎の空白」が生じました。

    調べてみると、原因と解決方法が紹介されておりました。

    Bootstrap2.0の、navbar-fixed-topで必要なpadding-top記述場所 : Seraphimis(Tech)
    【“Bootstrapのレスポンシブデザインで、上端に空白ができるのを防ぐ方法”の続きを読む】

    クリックされやすい色=暖色系?

    このエントリーを含むはてなブックマーク はてなブックマーク - クリックされやすい色=暖色系? あとで読む
    色が与える心理的な影響は、ときに無視できない場合があります。
    WebサイトのUIで、基調色を選ぶ場合も、色の選定に苦慮します。

    クリックされやすい色のレポートがありました。
    【検証】クリックされるボタンの色は? | Design | WebNAUT
    なんか、オレンジが結構クリックされやすいみたいです。

    【“クリックされやすい色=暖色系?”の続きを読む】

    jQueryを使い、カラム数が可変の段組で、コンテンツのパネルを隙間なく並べる方法

    このエントリーを含むはてなブックマーク はてなブックマーク - jQueryを使い、カラム数が可変の段組で、コンテンツのパネルを隙間なく並べる方法 あとで読む
    タイトルが長いけど、要するに、
    リキッドレイアウトでコンテンツを配置しよう!
    という話です。

    いつも「検索デスク」(メタ検索サイト)を使っていますが、段組のカラム数や横幅が固定されていて、レスポンシブデザインじゃないんですよね。
    こういうレガシーなデザインのWebサイトを、レスポンシブデザイン+リキッドレイアウトへ変更する場合に便利なjQueryプラグインがありました。

    jQueryの利便性を、改めて実感しました!!!

    【“jQueryを使い、カラム数が可変の段組で、コンテンツのパネルを隙間なく並べる方法”の続きを読む】

    Twitter Bootstrap 3 登場

    このエントリーを含むはてなブックマーク はてなブックマーク - Twitter Bootstrap 3 登場 あとで読む
    最近、CSSフレームワークが便利であることを知り、Twitter Bootstrapを使う機会が増えました。

    Bootstrapの公式サイトを毎日のように眺めていたら、メジャーバージョンアップのお知らせがありました。
    「mobile-first」という新たなコンセプトに基づき、スマホ対応が強化されたようです。

    【“Twitter Bootstrap 3 登場”の続きを読む】

    スマートフォンの標準的な画面サイズ

    このエントリーを含むはてなブックマーク はてなブックマーク - スマートフォンの標準的な画面サイズ あとで読む
    CSSフレームワークは、とりあえず、Twitter Bootstrapを使うことにした。
    Yahoo! Pureは、レスポンシブデザインで、自分の思った通りの挙動をしなかったので、今回は却下。

    さて、ターゲットとなるスマホの画面サイズは、どれぐらいの解像度を想定すれば良いのか?

    Smartphone Comparison Guide 2013


    ●メルクマール
    標準的なスマホとして、以下の3機種に着目してみる。
    ・Apple iPhone
    ・SONY Xperia
    ・Samsung GALAXY

    【“スマートフォンの標準的な画面サイズ”の続きを読む】

    Amazonアソシエイトの「ref=nosim」

    このエントリーを含むはてなブックマーク はてなブックマーク - Amazonアソシエイトの「ref=nosim」 あとで読む
    Amazonアソシエイトの広告URLで、「ref=nosim」というパラメーターがある。
    これは、一体何なのか?

    ref=nosim - Google検索

    Amazonのクッキーの仕組み。もしくはref=nosimの意味。 | ブログ運営のためのブログ運営

    2011.02.13
    さて、アソシエイトのURLの中にref=nosimと入れている人がよくいます。
    これは昔の名残で、今は意味がないです。

    昔は、直接商品を買うと5パーセントで、そこから移動して別の商品を買うと3パーセントだったのです。
    これは、ref=nosimを付けた場合のみ、そうなるのです。
    昔はそういう仕組みだったということです。
    参考:ARTIFACT ―人工事実― : AmazonのURIまめちしき

    今では、直接買っても、そこから移動して別の商品を買っても、収益の違いはないです。



    なるほど、今は意味ないんかー。

    スマートフォン向けのレスポンシブデザインのWebサイトを、PCブラウザーでテストする方法

    このエントリーを含むはてなブックマーク はてなブックマーク - スマートフォン向けのレスポンシブデザインのWebサイトを、PCブラウザーでテストする方法 あとで読む
    CSSフレームワークをいろいろ試してみた。(Twitter BootstrapYahoo Pureなど)
    レスポンシブデザインのWebサイトが、簡単に作れることが分かった。

    今は、インターネット端末で、スマホが主流になってきているそうだ。
    スマートフォンユーザーの特徴(従来型携帯電話ユーザーとの比較) - 総務省|平成24年版 情報通信白書
    D2C、マルチデバイス利用動向調査を発表…スマホ利用者比率は43.3%に上昇、LINE利用者が大幅増 | Social Game Info
    D2Cマルチデバイス利用動向調査(2013年5月実施) - SlideShare


    ●レスポンシブデザイン
    スマートフォンをメインターゲットにしたWebサービスやWebアプリを作成する場合、開発途上で、レスポンシブデザインの表示やタッチ操作を確認するテストツールが欲しい。

    検索したら、いろいろな方法・テストスイーツが紹介されていた。
    ブラウザ テスト スマートフォン - Google検索

    【“スマートフォン向けのレスポンシブデザインのWebサイトを、PCブラウザーでテストする方法”の続きを読む】

    FC2Ad