2009年5月15日
11日目は、vkontakte.ruのアプリケーションの開発者になることを決めたときに始まりました。 ちょうど11日前、Flex 3 Builderを初めてダウンロードして起動しました。 結局のところ、最初のステップが最も難しいため、ブログを開始する必要がありました。 一方、最初のステップはまだ行われており、最も興味深いものはまだありません。
背景のビット。
私は絶望的な状況に陥ることを恐れたことがないので、経済危機は私を本当に悩ませませんでした。 それにもかかわらず、私はあまりにもリラックスしていたことを認めなければならず、危機は私の収入が非常に貧弱で不安定になり、お金を稼ぐ新しい方法を模索しなければならなかったという事実につながった。 新しいパスとして、vkontakte.ruのアプリケーション開発が選択されました。
これにはいくつかの理由がありました。
1.大きな可能性と多くの空いているニッチ。
2.たくさんのアイデア。
3.完成したアプリケーションのプロモーションと収益化の容易さ。
私はこの問題を長い箱で延ばしませんでした（実際、非常に驚くべきことです。私の「長い箱」にたくさんの物が置いてあるので、そのサイズは「長い金星」のサイズにかなり匹敵します） 3ビルダー。 初日は、テキストフィールドに単語を入力して、Flickrから写真を取得できる簡単なチュートリアルを実行しました。 これは非常に簡単に思えましたが、これまでのところ、VKontakte APIからデータを取得する方法を明確にしていませんでした。 あちこち突っついた後、「はじめに」セクションの残りのチュートリアルをすべて読むことにしました。 数日後、私は今までよりもはるかに多くを知っていると感じましたが、正確に知っていることとそれが私の主な目的にどのように使用できるかを理解できませんでした。
この瞬間から、アプリケーション作成の現在のステップを解決するのに役立つ問題のみに関する情報を検索することにしました。 私の最初のアプリケーションは、音楽プレーヤーを作ることにしました。 Vkontakteにはすでに機能が異なる6人ほどのプレーヤーがいましたが、私は自分のものが欲しかったので、他のすべてのプレーヤーは私のものと比べてWindows Media Player Classicのように見えました。
最初の目標は、Vkontakte APIから完全な応答を取得して出力することでした。 まず、自分のアプリケーション用の場所を予約し、対応するapi_idとシークレットコードを取得しました。 次に、これらすべてから本格的なリクエストを作成する必要がありました。主な問題は、md5を使用して署名をコンパイルすることでした。 ここで、Test Applicationアプリケーション（http://vkontakte.ru/app35569_1933734）は私を大いに助けてくれました。その助けを借りて、リクエストを行って友人のリストを取得することができました。 ここで、独自のアプリケーションから同じリクエストを送信する必要がありました。 始めるには、どういうわけかmd5暗号化を接続する必要がありました。 このために、私は無料の暗号ライブラリを使用しました。いくつかの操作の後、適切にインポートする方法と、目的の関数を呼び出し、結果を取得して出力する方法を理解しました。 ここで、初めて、進歩があったと感じ、それが私に誇りを与えました（後でそれを定期的に経験し、それを食べました）。 次に、<mx：HTTPService>を使用してリクエストを行い、見よ、友人のリストを取得しました。
次の目標は、VKontakteページから任意のオーディオファイルを再生することでした。 そもそも、XMLレコードで完全なオーディオレコードのリストを取得するようにリクエストで学びました。 最初に、Flex 3開発者ガイドのサウンドの操作に関するセクションを読んで、理論的にはすべてが再びシンプルに見えましたが、必要な機能を実際に書きたくありませんでした（そのための十分な知識がありませんでした）。すぐに使えるフラッシュmp3プレーヤーを探して、私はいくつかの作品を見つけて、長い間いじって、再び新しい知識を受け取りましたが、必要な方法で動作させることができませんでした。 Flex 3開発者ガイドのサウンドの操作に戻り、そこで例を注意深く研究する必要がありました。 この例から、例で使用されているSoundFocadeライブラリ（またはそのようなもの）を使用して目標を達成できることが明らかになりましたが、最初にVKontakteレコードのリストを使用してxml応答から必要なパラメーターを抽出する方法を学習する必要がありました。 SoundFocadeをしばらく延期し、xml、xmlオブジェクトの個々の要素にアクセスする方法、<mx：list>リスト、CollectionsやdataProviderなどを操作する方法を検討しなければなりませんでした。 それが今日、5月15日にやったことです。 その結果、シンプルなプレーヤーインターフェースを作成し、[トラックリストをリクエスト]ボタンを使用して、ページから曲のリストを取得することができました。 このように見えた：
さて、背景は終わり、今ではリアルタイムでブログを書くことができます。 現在のタスクは、テキストフィールドを追加し、選択したトラックのURLをそこに表示することです。 お茶を注いで<mx：list>のヘルプを読みます。
お茶を注ぐ時間すらありませんでした。 このタスクは、itemClickイベントによって基本的に解決されました。 私の場合、itemClick = "showURL（event）"。 もっと面白いデザイン
event.currentTarget.selectedItem.url、特にcurrentTargetを使用して、より詳細に理解する必要があります。
さて、今から面白いことが始まります。 私はトラックに関するすべての情報を手に入れたので、今ではすべてを再生する必要があります。 音楽を聞かせてください。
できた！ すべてが非常にシンプルであることが判明しました。 SoundPlayerから必要な機能を引き出し、不要なものをすべて削除しました（不要なものはそれほど多くありませんが、最も単純なバージョンではなくてもかまいません）。 そのため、最も重要な中間目標の1つが達成されました。私は自分のページから曲の完全なリストをダウンロードし、それらのいずれかを再生することができました。 新しい目標を設定する時が来ました。
次の目標：
プレーヤーを完全に機能させます。
-一時停止ボタン
-前進する
-トラックバック
-スクロールバー
-ローディングインジケータ
-ボリューム
-ミキシング
-プレイリスト全体をループする
-1曲のループ
-現在のアーティストと歌の出力
-再生時間の追跡
グローバル目標：
-プレーヤーにlast.fm APIリクエストを追加します
-データベースと対話する
-ドラッグアンドドロップリストアイテムを追加してすべて保存
-友達はよく耳を傾けます
-VKontakteの同様の味
-一時停止ボタンは非常にシンプルでした。
まず、eventListenterの追加と削除では、一時停止と再開が同じボタン上にあります。 その後、彼はSoundFacadeに登りました。何らかの理由で、曲が完全に読み込まれた後にのみ一時停止できるようになり、すぐにその機能が追加されました。
パブリック関数pausePlayback（pos：int = 0）：void
{
this.pausePosition = pos;
this.sc.stop（）;
this.playTimer.stop（）;
this.isPlaying = false;
}
そして、それは完全に機能しました。
次に、スクロールバーを作成する必要があります。 最初はprogressBarを作成することが判明しました。これは、曲のどの部分がすでに再生されており、どれだけ残っているかを示していますが、問題はそれが変更できないことです。 曲を巻き戻すことはできません。また、同じ進捗バーにある種の淡い色で読み込みの割合を表示したいと思います。 一般に、いくつかの検索の後、英語ではシークバーと呼ばれ、すぐに見つかることを思い出しました
Flex 3クックブック：第8章、画像、ビットマップ、ビデオ、サウンド。この問題に対処しています。 勉強します。
したがって、progressBarの代わりに、HSliderを明示的に使用する必要があります。 私はこれから始めました：
パブリック関数onPlayProgress（evt：ProgressEvent）：void
{
var playingPercent：uint = 100 *（evt.bytesLoaded / evt.bytesTotal）;
pbSlider.value = playbackPercent;
}
スライダーは音楽の直後に移動します。次に、音楽をその後に移動する必要があります。
試行錯誤を通して、彼は望ましい結果を達成し、音楽を巻き戻すことができました。 ここで、何らかの方法で巻き戻しインジケータとトラック負荷インジケータを組み合わせる必要があります。 さらに、予想外の障害に遭遇しました。すでに完全にキャッシュにあるトラックを再生すると、他のトラックに切り替えることはできません。 問題は、存在しない接続を閉じようとしている.close（）メソッドにあるという疑いがあります。 やった！ 予想通り、問題は.close（）にありましたが、間違った場所で探していました。.close（）の最初の呼び出しはさらに早いことがわかりました。 確かに、ダウンロードインジケータは今や何らかの奇妙な動作を開始しましたが、これは前の問題と比較してナンセンスです。 プレイヤーは次のようになります。
一般的に、今日の最大プログラムを超えています。 もう朝になります。寝ることができます。
05/16/09
今日は土曜日で、休むこともできますが、プロジェクトを継続したいと思っています。 今日の最大プログラムは次のとおりです。
-ダウンロードインジケータを修正
-ボリューム
-前進する
-トラックバック
-1曲のループ
-現在のアーティストと歌の出力
-再生時間の追跡
ダウンロードインジケータの問題は正常に解決されました。 問題は、.close（）メソッドを使いすぎて、this.s.addEventListener（flash.events.ProgressEvent.PROGRESS、onLoadProgress）の結果として、負荷の低いトラックへの接続が完全に閉じるのを停止したことです。 私は一度に複数のスレッドを処理し始め、それに応じて、同じprogressBarで各スレッドの進捗を交互に表示しました。 この問題は解決しましたが、「重いトラック」のいくつかを接続するとロードする時間がなく、しつこい音がすることに気付きました。 そのため、バッファ時間を増やす必要があります。
何らかの理由でbufferTimeが私のアクションに応答しませんが、おそらくこれはアプリケーションが既に連絡先サーバーにダウンロードされている必要があるためです。
ボリュームに目を向けます。
ボリュームに特別な問題はありませんでした。flash.media.soundtransformを接続し、新しいオブジェクトを作成し、volumeSliderの値を変更した場合は渡します。
私は心配し始めています、プロジェクトの貧弱な構造、すべてが不調和に詰め込まれています。 プレーヤーのすべての機能を完了した後、コードの設計、リファクタリング、最適化を取り上げます。
今ボタンを前後に。
予想どおり、ボタンに問題はありませんでした。ここに機能があり、すべてが正常に機能しています。
trackList.selectedIndex = trackList.selectedIndex + 1;
var newUrl：String = trackList.selectedItem.url;
pbSlider.value = 0;
ロード（newUrl）;
1曲のループ
この組み合わせでも問題ありません。
this.s.addEventListener（flash.events.Event.SOUND_COMPLETE、onPlayComplete）;
パブリック関数onPlayComplete（evt：Event）：void
{
if（repeatTrack.selected == true）this.s.play（）;
}
「現在のアーティストと曲の出力」と「トラックの再生時間」を完了してから、ボリュームを元の状態に戻すときに、ボリュームの問題を修正する必要があります。
05/17/09
残念ながら、昨日、ビジョンはユーロに気を取られ、計画を最後までやり遂げませんでした。
05/18/09
5月17日は休みにも関わらず仕事をしたかったが、それでも休まなければならなかった。 午前中に友人が電話をかけて、2、3時間歩くことを考えました。その結果、私は夜の近くに帰ってきました。たぶん、より良い結果になりました。そうでなければ、実際に人々との連絡を失い始め、家で1週間過ごし、実際に誰ともコミュニケーションを取りませんでした。
さて、今日は次のことを行う必要があります。
現在のアーティストと歌の結論
プレイリストのトラック出力を修正
再生時間の出力を追跡する
ボリュームの問題を修正
攪拌
プレイリスト全体をループする
ボリュームが修正されました。 再び、開いた接続とのギャップがありましたが、今回は一時停止しました。 決めます。
問題は解決しました。
他のすべての質問も決定しました。特別な状況は発生しなかったため、説明する意味がありません。 明日は、プレイリストの移動のみを残しました。ミキシングの準備ができたら、コード、プレーヤーのデザインなどのクリーニングを開始できます。 プレーヤーを販売可能な状態にします。
05/19/09
今日は、必須のケースから、プレイリストのミキシングのみを行います。 次に、プレーヤーの研磨作業を開始します。 ミキシングには、ほとんどの場合、ランダムにミキシングされたトラック番号の配列を使用する必要があります。 いつものようにGoogleに乗り込んで、「flex 3 array random」と「flex 3 array shuffle」を探します
このコードは最もよく機能します：
パッケージcom.interactiveSection.utils {
パブリッククラスRandomArray {
パブリック関数RandomArray（）：void {};
public static function generateRdmArray（numElements：int、origArray：Array = null）：Array {
if（origArray == null || numElements> origArray.length）{
origArray =（origArray == null）？ 新しい配列（）：origArray;
for（var i：int = origArray.length; numElements> i; i ++）{
origArray.push（i）;
}
}
//
var tempArray：Array = new Array（）;
tempArray = origArray.slice（）;
var resultArray：Array = new Array（）;
while（tempArray.length> 0 && numElements> resultArray.length）{
var rdm：int = Math.floor（Math.random（）* tempArray.length）;
resultArray.push（tempArray [rdm]）;
tempArray.splice（rdm、1）;
}
trace（ "生成された配列を返す：„ + resultArray）;
return resultArray;
}
}
}
驚いたことに、ランダムトラックの再生は初めて機能しましたが、FlexとActionScriptの内容を少しずつ理解し始めたようです。
だから、私は次の機能を備えた本格的なプレーヤーを持っています：
-出力プレイリスト
-再生、停止、一時停止
-巻き戻し
-ボリューム
-トラックバック、トラックバック
-トラックまたはプレイリスト全体のループ
-アーティストと曲のタイトルの結論
-合計トラック時間と現在の再生時間を表示する
つまり、基本的な機能はすべて、今ではコードを美しく便利な状態にしてから、プレーヤーのために素敵なデザインを作成する必要があります。
歌とアーティストの名前の表示を調整することで、ささいなことに取り組み始めました。 問題は、歌に「または＆などの特殊文字が含まれていた場合、それらは2回エスケープされ、「＆$＃39」のようになり、結果として所定の場所に配置された」ということでした。 最初は、decodeやunescapeのような単純な関数があるはずだと思っていました。そのような関数は実際に見つかりましたが、私の場合、その効果は適用されませんでした。 私は長い間簡単な方法を探していましたが、最終的にはこれらすべてを.replaceとreguyarnyeの表現で行うことにしました。 幸いなことに、その前に連絡先Rostislav Sirakを含め、どこにでも、どこにでも問題を投稿することができました。 Rostislavは、ItemRendererのhtmlTextを介してメソッドを提案することで、私を大いに助けてくれました。 貴重なアドバイスをありがとうございました;同時に、私はより多くの有用なことを学びました。
今、いくつかの困難に直面して、どのようにコードをきれいにするのですか。 ほとんどの場合、独自のコンポーネントを作成し、個別のファイルのコードとして取り出す必要があります。 問題は、これをより良く整理する方法です。 おそらく、独自のコンポーネントを作成することから始めます。時間の経過とともに、プレーヤーをメインアプリケーションから分離する必要が生じるでしょう。
05/20/09
何もしませんでした。 恥と恥。
05/21/09
もう一つの恥
05/22/09
もっと
05/23/09
今日、私はまだ心を取りました。 コードをきれいにする前に、ドキュメントとアプリケーションの例を読んで、ある種の「ハウツー」の例があるようにしました。
まず、クリーニングが必要なもののリストを作成します。
1.曲のリストをXMLだけでなくCollectionに渡します。
一般的に、私は「Getting started with flex 3」を読みました。
05/24/09
AS Action Script 3.0 Essentialチュートリアルを読み始めました。 原則として、教科書から180ページを読みます。400〜500ページ必要です。今週は最後まで読む必要があります。 これは、すべてがどのように配置され、どこに進むべきかを理解する上で大きなブレークスルーを与えると思います。 この本の後、私は自分のコンポーネントの作成に関するマニュアルを読みますが、これはさらなる開発の前に必要なステップでもあると思います。
05/25/09
Action Script 3.0 Essentialチュートリアルを読み続けます。 さらにダウンロードされた「アプリケーションアーキテクチャガイド2.0」のパターンとプラクティス。
「Action Script 3.0 Essential」からすべての基本情報を読みましたが、多くのことが理解しやすくなりました。 「adobe flex 3コンポーネントの作成と拡張」を読み始めましたが、多くの情報がありますが、英語ですべてを読むのは少し長くなるので、今のところ第7章「第7章：高度なMXMLコンポーネント」に限定します。 。 今日は以上です。
05/26/09
ドキュメントに目を向けると、自分のコンポーネントの作成について読み、基本的な本質を理解しました。 Flex 3 Builderで新しいプロジェクトを作成しました。このプロジェクトでは、プレーヤー、コンポーネント、クラス、モジュールなどで既に分離されたクリーンなバージョンを作成し、同時にデザインを添付します。
06/06/09
丸11日間、何も記録しませんでしたが、同時に頭で作品に没頭しました。 彼はすべてをこなしましたが、最近ではFlex 3 Builderをインストールしてからちょうど1か月でプレーヤーを完了するために文字通り一晩中働かなければなりませんでした。 一般に、この11日間で発生した問題について簡単に説明します。 最初は新しいプロジェクトを作成しましたが、今回はメインファイルに直接すべてのコードを書くのではなく、個々のモジュールの「コンテナー」の役割を割り当てました。 このような要素を配置することにしました：上部にヘッダーと水平メニュー（まだ利用できませんが、将来的に計画されています）があり、ヘッダーの下に2つの列があります：左の列のプレーヤーと右の追加情報。 メインファイルをマークしたら、プレーヤーでコンポーネントを作成することにしました。 ファイル->新規-> MXMLコンポーネント。 コードはすでに（ドラフト形式で）書かれているので、設計から始めました。 デザインをグレーでミニマルで「金属のよう」にすることにしました。リッチなデザインに多くの時間を費やすことができなかったため、このような選択が行われましたが、グレーでミニマルです。 Fireworks MXを開き、背景を作成しました。 上記では、曲の名前の付いたランニングラインが必要でしたが、もう一度Googleに例として参加しました。 「スクロールテキスト」という単語を検索しましたが、多くのナンセンスが見つかりましたが、その結果、単語marqueが望ましい結果をはるかによく表していることがわかりました。 グーグルの「フレックスマーキー」は、はるかに有用な結果をもたらし、自分のニーズに簡単に適合させました。 行が完了しました。 スクロールバーはすぐ下に配置する必要があります。 すでに大変でした。 まず、標準のストリップとスライダーが好きではありませんでした。次に、どういうわけかこのストリップに音楽ファイルをロードするプロセスを表示する必要がありました。 再びグーグル、もう一度検索します。 最後に、スクロールバーを非表示にし、スライダーのみを残して、プログレスバーコンポーネントの上に配置しました。スクロールバーは実際には表示されませんが、ロードプロセスを完全に表示します。 thumbSkinプロパティを使用して、自分でスライダーを再作成しました。 これで私は決めました、そして、私はプレー時間のディスプレイを作らなければなりませんでした。 ここでは複雑なことはありません、TextArea +埋め込みフォント。 その後、再び困難、視覚化を行う必要があります。 その後、私は長い間立ち往生し、適切なコンポーネントに出くわすまで多くのソースを調べ、少しセットアップしてプレーヤーに挿入しましたが、驚いたことに動作しました。 とても嬉しかったです。 その後、あらゆる種類のボタンとボリュームが登場しました。複雑なものは何もありませんでした。詳細に説明するのは意味がありません。 ボタンの後、ユーザーのすべての友達とComboBox（ドロップダウンリスト）を作成する必要がありました。ComboBox自体の作成は簡単で、記入も簡単です。リストに碑文を表示するのに問題がありました。再びhtmlTextを使用して特殊文字を表示する必要があり、すでに経験があったため、ItemRenedererとLabelの組み合わせをすぐに追加しました。特殊文字が表示され始めましたが、碑文は常に選択されたアイテムとして表示されました。私はこの問題に長い間苦労し、その原因が理解できませんでした。最後に、偏狭コーディングの最高の伝統で、選択したアイテムの碑文をキャンバスで閉じ、キャンバスにラベルを配置し、選択したアイテムのテキストを割り当てました。ほとんどの場合、これは最善の解決策ではありませんが、それ以外では成功しませんでした。次に、プレイリストにDataGridを追加し、デザインで準備が整いました。プレーヤーのソフトウェア部分はすでに準備ができていたので、それをとかしてすぐに取り付けました。次に、LastFM APIを使用して、アーティストに関する情報を表示するコンポーネントを作成する必要があります。最初に、伝統に従って、私はコンポーネントの設計を準備し（それを気にしませんでした）、必要なフィールドを準備しました。その後、彼はAPIとの相互作用を確立しました。プレーヤーコンポーネントからLastFMを使用してコンポーネントに現在のトラックを転送するために、トラックに関する情報をメインアプリケーションに送信する独自のイベントを使用し、LastFMを使用してコンポーネントにリクエストをリダイレクトしました。それで、すぐに帽子を追加しました。ロゴを作成して完了です。プレーヤーは実行中です。現在、ここから入手できます。プレーヤーコンポーネントからLastFMを使用してコンポーネントに現在のトラックを転送するために、トラックに関する情報をメインアプリケーションに送信する独自のイベントを使用し、リクエストをLastFMを使用してコンポーネントにリダイレクトしました。それで、すぐに帽子を追加しました。ロゴを作成して完了です。プレーヤーは実行中です。現在、ここから入手できます。プレーヤーコンポーネントからLastFMを使用してコンポーネントに現在のトラックを転送するために、トラックに関する情報をメインアプリケーションに送信する独自のイベントを使用し、リクエストをLastFMを使用してコンポーネントにリダイレクトしました。それで、すぐに帽子を追加しました。ロゴを作成して完了です。プレーヤーは実行中です。現在、ここから入手できます。vkontakte.ru/app593265
