💢 👨‍👦‍👦 🕡 FlashサイトのURLの清潔さに関する考察 🗳️ 🎏 🕺🏻

特定のページを特定のリンクに割り当てる機能、[戻る]および[進む]ボタンが機能しないなど、便利なナビゲーションが不足しているため、ジェイコブニールセンがフラッシュをscった時代は過ぎ去りました。

ジェイコブ・ニールセン、記事- フラッシュは99％受け入れられない：

「サイトの訪問者は、好きなときに好きなときに移動します。 そのため、他の欠点はありますが、Webで作業するのは非常に便利です。 残念ながら、多くのFlashデザイナーはこのユーザーの自由を制限し、サイトをインタラクティブプログラムというよりもテレビ広告のようなプレゼンテーションに変えています。 ビデオを「ねじ戻し」することはできません 。 「戻る」ボタンは機能しません 。」

この記事は1999年に書かれたもので、ジェイコブニールセンが言及したこれらの点はすべて、現実に変換するのが本当に困難でした。それはほとんど不可能です。

このテーマに関するWebでは、それほど多くの情報はありません。フォーラムやニュースレターでは、この質問がよく聞かれます。

FlashGuru 、記事- 効果的なFlashナビゲーション、およびMichael Antipin著、記事-Flash Interaction-JavaScriptおよびFlashサイトナビゲーション。

その結果、これらのレッスンを読んだ後のフラッシュサイトのナビゲーションは次のようになります。http ： //yoursite.com/#news/2006/08/25

さらに、「戻る」および「進む」ボタンが機能します（FlashGuruではボタンのみが機能します。アドレスバーは更新されません）。

この記事はこれについて少しではありません-詳細については、ここでURLをより美しく（きれいに）する方法を示したいと思います。 URLはhttp://yoursite.com/news/2006/08/25のようになります。

前の例との違いに注意してください？はい、＃記号がありません。

些細なことのように思えますが、＃がないと、すべてが早く、きれいになります。

Artemy LebedevのCovodryに関する章を読むことをお勧めします。

§48. URLの純粋さを求めて戦います

しかし、残念ながら私の方法には欠陥がないわけではありません。

「戻る」および「進む」ボタンは機能しますが、押された場合にのみHTMLページが完全にリロードされます。 Flashからリクエストを渡すアドレスバーの実際の更新は行われません。ただし、Flashはアドレスバーからの要求を受け入れ、それに基づいて特定のデータをロードできます。しかし、それについては以下で詳しく説明します。

サーバーは.htaccess

ファイルをサポートする必要があります（mod_rewriteだけでなく）
しかし、もちろん、利点があります：
議論の余地のない-美しくきれいなURL。
すべてのブラウザとプラットフォームでサポートされています。
このメソッドは非常に簡単に実装できます。

この仕組みと.htaccess

ファイルが必要な理由を説明します。

.htaccess

ファイル（Wikipediaに基づく）

.htaccess

-Apache Webサーバーおよび同様のサーバー用の追加の構成ファイル。ディレクトリへのパスワードアクセス、ファイルタイプの再割り当てなど、Webサーバーの多数の追加パラメーターと権限を設定できます。

.htaccess

はhttpd.conf

に似ていますが、それが置かれているディレクトリとその子ディレクトリにのみ影響するという違いがあります。特定のディレクトリで.htaccess

を使用する機能は、httpd.confで指定されています。

.htaccessファイルの詳細については、 en.wikipedia.org / wiki / .htaccess およびapache.orgを ご覧ください。

1）したがって、 .htaccess

ファイルを作成します。

RewriteEngine On 
      

        
        
        
      

     RewriteBase /    
      

        
        
        
      

     RewriteCond %{REQUEST_FILENAME} !-f 
      

        
        
        
      

     RewriteCond %{REQUEST_FILENAME} !-d 
      

        
        
        
      

     RewriteRule . / -     -/index.php [L]

これがどのように機能するかについては詳しく説明しません。一般に、上記のコードを含む.htaccess

ファイルをサイトのルートフォルダーに配置すると、アドレスバーにどのパスを記述しても、 .htaccess

ファイルと共にあるindex.phpファイルはすべて同じルートフォルダーに読み込まれます。。

必ずしもindex.php（お使いのサーバーはPHPをサポートしていないかもしれません）、index.htmおよびindex.htmlも可能です。主なことは、ファイルがインデックスである場合（N解像度）、このディレクトリまたはそのディレクトリをロードする必要があることをサーバーが認識していることです。

私の考えはもう少しはっきりし始めていると思います。

index.phpにswfを埋め込みますが、それは標準の方法で行うことも、 SWFObjectで行うこともできます（推奨）。 swfへのフルパスを指定することは非常に重要です。

var so = new SWFObject("main.swf", "main", "100%", "100%", "8", "0x000000", false, "high");so.addVariable("app", getQueryParamValue("app")); 
      

        
        
        
      

     so.addVariable("id", getQueryParamValue("id")); 
      

        
        
        
      

     so.write("flashcontent");

したがって、main.swfを指定した場合、アドレスバー（ http://yoursite.com/eng/portfolio/design/my_first_work/など）から照会すると、SWFObjectは単にmain.swfを見つけられません。これは、engディレクトリとポートフォリオなど現実には存在しません。

では、main.swfがhttp://yoursite.com/eng/portfolio/design/my_first_work/ディレクトリーにあることをどのように確認しますか？

2つの方法があります。

JavaScript（ location.pathname

）とflashvars

を使用する
ActionScript (_root._url

）を直接使用する

私は最初の方法を好みます。

このようなスキーム-location.pathnameプロパティは、URLからそのパスの一部を抽出します。 flashvars

を使用してURLをflashvars

ファイルに渡します（ところで、JavaScriptを使用してlocation.pathname

を解析し、各変数をmain.swfに個別に渡すことができます。私の例では、 location.pathname

はmain.swfで直接解析されます）。

var so = new SWFObject("http://yourserver.com/main.swf", "main", "100%", "100%", "8", "0x000000", false, "high"); 
      

        
        
        
      

     so.addVariable("location_pathname", location.pathname); 
      

        
        
        
      

     so.write("flashcontent");

それでは、main.swfで_root

、次のようにlocation_pathname

変数を取得しlocation_pathname

。

_root.location_pathname="/eng/portfolio/design/my_first_work/"

そして、通常の文字列のシリアル化が行われます。シリアル化プロセスは、サイトの構造に大きく依存します。たとえば、単純なLocation Serializer

関数のコードを示します（これが最も基本的な例です）。

var location:Object = new Object(); 
      

        
        
        
      

     location.pathname = _root.location_pathname 
      

        
        
        
      

     function LocationSerializer(path:String) { 
      

        
        
        
      

     var pathname_str:String = path.substr(1, path.length-2); 
      

        
        
        
      

     var path_arr:Array = pathname_str.split("/"); 
      

        
        
        
      

     trace("Language: " path_arr[0]); 
      

        
        
        
      

     trace("Category: " path_arr[1]); 
      

        
        
        
      

     trace("SubCategory: " path_arr[2]); 
      

        
        
        
      

     trace("Id: " path_arr[3]); 
      

        
        
        
      

     } 
      

        
        
        
      

     LocationSerializer (location.pathname);

path_arr[0]

などに基づいて、xmlをダウンロードするリクエストを送信できます（多くのソリューションがあります-通常の静的xmlへのリンクを提供したり、mysqlにデータを保存してリクエストに応じてxmlを表示できます）。

次のようなもの：

loadXML("project.php?lang="+ path_arr[0]+"&category="+ path_arr[1]+ path_arr[2]+"&id="+ path_arr[3])

当然のことながら、 path_arr[0]

、 [1]

、 [n...]

手動作成は費用対効果が高くありません。私はプロジェクトに賛成です。これを行う特別なクラス（またはクラスのグループ）があります。しかし、これは議論のための別のトピックです。

この記事では、フラッシュサイトのクリーンURL、いわゆるディープリンクを作成する一般的な原則を共有します。それは基本的にそれです。

私が自分の考えを明確にレイアウトし、考えるべき理由を与えたことを願っています。

そして、考えられる理由はたくさんあります-例えば：

xmlがロードされていない場合はどうしますか？ええ、確かに！ページ404を生成します。
シリアル化について考えてください。これはかなり複雑な質問です。このテーマに関する記事を書くかもしれません
ユーザーがメインページから/ eng / portfolio / design / my_first_work /に移動したことを通知する方法

ここでも、2つのオプションがあります。

または、 getURL

ページを開くのは困難getURL

（大量のトラフィックとmain.swfの長時間の読み込みが必要になります）。このオプションを使用することは本当にお勧めしません。
または、現在のサイトのURLを保存する特別なDIRECT LINKパネルを作成します。この効果の実装はthefwa.comで見ることができます

ところで、機能におけるthefwa.comのナビゲーションは、私のものとまったく同じです。

http://www.thefwa.com/?app=winners&id=6025

私の例の利点は、 thefwa.comで使用された場合に明らかです。

http://www.thefwa.com/winners/6025

入力しやすく、読みやすい。そして一般的に、このサイトを訪れた秘書にとって、URLはより明確です。ちなみに、多くの人がhttp://www.thefwa.com/?app=winners&id=6025の実行方法について質問しています。同じSWFObjectを使用して、すべてが基本です。

var so = new SWFObject("main.swf", "main", "100%", "100%", "8", "0x000000", false, "high"); 
      

        
        
        
      

     so.addVariable("app", getQueryParamValue("app")); 
      

        
        
        
      

     so.addVariable("id", getQueryParamValue("id")); 
      

        
        
        
      

     so.write("flashcontent");

ロシアのSWFObjectの記事を読む必要があります-SWFの実装、プレーヤーのバージョンの検出、ExpressInstallについてのすべて。

実際にはすべて。はい、ウェブサイトのURLを「ベビーキスのようにきれいに」しましょう。

更新：私はこのライブラリ-SWFAddressを使用しています。これにより、ナビゲーションに関する多くの問題（戻る、進むなど）が解決されます。

FlashサイトのURLの清潔さに関する考察

More articles: