アキハバラのメイドさん系のアルバイト情報アプリを作ってみました。

アキハバラのメイドさん系のアルバイト情報アプリを作ってみました。

単純にお店情報を取得して表示しているだけのものです。
今後もちょくちょく機能を増やして行こうと思いますのでよかったらインストールしてくださいませ。メイドとかで検索すれば出てくるかと思います。

今回のアプリ作成で新しく知った点

List の MobileIconItemRenderer には labelField 以外にも messageFiled が存在する

<s:MobileIconItemRenderer
    iconField="icon" messageStyleName="myMessage"
    messageField="name"
    labelField="todouhuken"/>

Group で clipAndEnableScrolling="true" っとすると切り抜きができる。Group は htmlでの "div" 。clipAndEnableScrolling は CSS の overflow みたいなもの。

<s:Group width="100%" clipAndEnableScrolling="true" height="70">
    <s:Image source="{data.image3}" verticalCenter="0" horizontalCenter="0"/>
</s:Group>

ArrayCollectionにはsourceというプロパティがあり、一括で入れることも可能

<s:ArrayCollection id="myArr" source="mytext.split(' ')"/>

ソースは以下になります。

main

<?xml version="1.0" encoding="utf-8"?>
<s:MobileApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                     xmlns:s="library://ns.adobe.com/flex/spark"
                     sessionCachingEnabled="false"
                     splashScreenImage="@Embed('assets/moejobtitle.jpg')"
                     splashScreenScaleMode="letterbox"
                     backgroundColor="#FFFFFF"
                     firstView="views.maidMoeJobNaviHome"
                     xmlns:mx="library://ns.adobe.com/flex/mx"
                     creationComplete="mobileapplication1_creationCompleteHandler(event)"
                     >
    <fx:Style source="maidMoeJobNavi.css"/>
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            protected function mobileapplication1_creationCompleteHandler(event:FlexEvent):void
            {
                sound01.play();
            }
        ]]>
    </fx:Script>
    <fx:Declarations>
        <mx:SoundEffect id="sound01" target="{this}" source="assets/OMT004_19S008.mp3" useDuration="false"/>
    </fx:Declarations>
    <s:navigationContent>
        <s:Button icon="@Embed('assets/home.png')" click="navigator.popToFirstView()" height="67">
            <s:filters>
                <s:DropShadowFilter blurX="4" blurY="4" angle="0" distance="0"/>
            </s:filters>
            </s:Button>
    </s:navigationContent>
</s:MobileApplication>

view

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        chromeColor="#FF65AA"
        contentBackgroundColor="#FFFFFF"
        creationComplete="view1_creationCompleteHandler(event)"
        destructionPolicy="none"
        title="メイド萌え求人ナビ！"
        >
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        .myMessage{
            color:#ff4ec3;
            border-color:#ffffff;
            font-size:24px;
            font-weight:normal;
        }
    </fx:Style>
    <fx:Script>
        <![CDATA[
            import com.adobe.serialization.json.JSON;
            import flash.net.navigateToURL;
            import mx.events.FlexEvent;
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.InvokeEvent;
            import mx.rpc.events.ResultEvent;
            import spark.effects.easing.Linear;
            import spark.events.IndexChangeEvent;
            protected function view1_creationCompleteHandler(event:FlexEvent):void
            {
                nowLoading.visible = true;
                hts.send();
            }
            protected function hts_resultHandler(event:ResultEvent):void
            {
                nowLoading.visible = false;
                var obj:Object = JSON.decode(event.result.toString());
                myArr.source = obj as Array;
            }
            protected function hts_faultHandler(event:FaultEvent):void
            {
            }
            protected function hts_invokeHandler(event:mx.rpc.events.InvokeEvent):void
            {
            }
            protected function list_changeHandler(event:IndexChangeEvent):void
            {
                navigator.pushView(DetailView, list.selectedItem);
            }
            protected function myImageAd_clickHandler(event:MouseEvent):void
            {
                navigateToURL( new URLRequest( "http://www.pinkycafe.com/" ) );
            }
        ]]>
    </fx:Script>
    <fx:Declarations>
        <s:Sequence  id="myShowAd" repeatCount="0">
            <s:Pause duration="6000"/>
            <s:Rotate3D angleXFrom="360" angleXTo="0" easer="{new Linear()}"
                        autoCenterProjection="true" autoCenterTransform="true" duration="3000"/>
        </s:Sequence>
        <s:ArrayCollection id="myArr" />
        <s:HTTPService id="hts" url="http://moeten.info/maidcafe/json.php?m=baito" resultFormat="text"
                       result="hts_resultHandler(event)" fault="hts_faultHandler(event)" invoke="hts_invokeHandler(event)"/>
    </fx:Declarations>
    <s:Group width="100%" height="100%">
        <s:layout>
            <s:VerticalLayout gap="0" />
        </s:layout>
        <s:Group width="100%" height="38" alpha="0.8"
                 clipAndEnableScrolling="true">
            <s:Label id="myLabel" x="133" y="11" color="0x5e33ff" fontSize="15"
                     text="萌バイト検索なら萌店インフォ！145件掲載中！！"/>
        </s:Group>
        <s:List id="list" width="100%" height="100%" alternatingItemColors="[0xffedff,0xffffff]"
                borderAlpha="0" borderColor="0xffffff" borderVisible="false"
                change="list_changeHandler(event)" chromeColor="#FF7B7B" dataProvider="{myArr}"
                direction="ltr" kerning="off" ligatureLevel="common" lineHeight="0" lineThrough="false"
                symbolColor="#FFFFFF">
        <s:itemRenderer>
            <fx:Component>
                <s:MobileIconItemRenderer
                    selectionColor="0xedd0ff"
                    creationCompleteEffect="Fade"
                    iconField="icon" messageStyleName="myMessage"
                    iconWidth="80" iconHeight="80" height="100"
                    color="0x4e56ff" fontSize="20" fontWeight="normal"
                    messageField="name"
                    labelField="todouhuken"/>
            </fx:Component>
        </s:itemRenderer>
        </s:List>
        <s:Group width="100%" height="74">
            <s:Rect width="100%" height="100%">
                <s:fill>
                    <s:SolidColor color="0xffedff" />
                </s:fill>
            </s:Rect>
            <s:Image id="myImageAd" source="http://www.pinkycafe.com/Bayoko.jpg" horizontalCenter="0" verticalCenter="0"
                     creationCompleteEffect="myShowAd" click="myImageAd_clickHandler(event)"/>
        </s:Group>
    </s:Group>
    <s:Label id="nowLoading" text="サーバーから最新情報を取得中・・・" fontSize="24"
             creationCompleteEffect="Fade" hideEffect="Fade" horizontalCenter="0"  verticalCenter="0"/>
</s:View>

detailview

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        title="{data.name}"
        viewActivate="refresh()"
        destructionPolicy="none"
        >
    <fx:Script>
        <![CDATA[
            import flash.net.navigateToURL;
            public function refresh():void
            {
            }
            protected function launchButton_clickHandler(event:MouseEvent):void
            {
                navigateToURL(new URLRequest(data.demo));
            }
            protected function backButton_clickHandler(event:MouseEvent):void
            {
                navigator.popView();
            }
            protected function urlBtn_clickHandler(event:MouseEvent):void
            {
                navigateToURL( new URLRequest ( data.url ) );
            }
        ]]>
    </fx:Script>
    <fx:Declarations>
    </fx:Declarations>
    <s:layout>
        <s:VerticalLayout horizontalAlign="center" gap="10" paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
    </s:layout>
    <s:Group width="100%" clipAndEnableScrolling="true" height="70">
        <s:Image source="{data.image1}" verticalCenter="0" horizontalCenter="0"/>
    </s:Group>
    <s:Group width="100%" clipAndEnableScrolling="true" height="70">
        <s:Image source="{data.image2}" verticalCenter="0" horizontalCenter="0"/>
    </s:Group>
    <s:Group width="100%" clipAndEnableScrolling="true" height="70">
        <s:Image source="{data.image3}" verticalCenter="0" horizontalCenter="0"/>
    </s:Group>
    <s:Group id="detailComment" width="100%" height="100%"
             horizontalCenter="0" clipAndEnableScrolling="true"
             >
        <s:Rect width="100%" height="100%" alpha="0.9"
                topLeftRadiusX="10" topLeftRadiusY="10" topRightRadiusX="10" topRightRadiusY="10"
                bottomLeftRadiusX="10" bottomLeftRadiusY="10" bottomRightRadiusX="10" bottomRightRadiusY="10">
            <s:fill >
                <s:SolidColor color="0xffffff"/>
            </s:fill>
        </s:Rect>
        <s:Group id="g" clipAndEnableScrolling="true" width="100%" height="100%" color="0xad0072">
            <s:Scroller>
                <s:VGroup width="{g.width}" height="{g.height}"
                          clipAndEnableScrolling="true" color="0x666666"
                          paddingBottom="10" paddingLeft="10" paddingRight="15" paddingTop="10"
                          fontSize="16" gap="10">
                    <s:Label text="■住所" fontSize="18"/>
                    <s:Label text="{data.todouhuken+data.zyuusyo}" width="100%" lineHeight="20" paddingBottom="10"/>
                    <s:Label text="■カテゴリ" fontSize="18"/>
                    <s:Label text="{data.category}" width="100%" paddingBottom="10" lineHeight="20"/>
                    <s:Label text="■時給" fontSize="18"/>
                    <s:Label text="{data.jikyuu}" width="100%" paddingBottom="10" lineHeight="20"/>
                    <s:Label text="■お店名" fontSize="18"/>
                    <s:Label text="{data.name}" width="100%" paddingBottom="10" lineHeight="20"/>
                    <s:Label text="■説明" fontSize="18" />
                    <s:Label text="{data.shopinfo}" width="100%" lineHeight="20"/>
                </s:VGroup>
            </s:Scroller>
        </s:Group>
    </s:Group>
    <s:Button id="urlBtn" width="100%" height="43" label="公式サイトへGO!"
              click="urlBtn_clickHandler(event)" color="#FFFFFF" horizontalCenter="0"/>
</s:View>