この記事を書いた人:

【超かんたん!】10秒ジャストで止めるゲーム、ジャストタイムアプリを開発してみよう(Part2)

iPhoneアプリ開発

みなさんこんにちは。Yuta Fujii(@HofuCamera)です。

今回は「ジャストタイムiPhoneアプリ」の続きを開発していきたいと思います。

スタートでタイマーがスタートし、10秒になったときにストップボタンを押すことができると「おめでとう」と表示されるストップウォッチアプリになります。

今回は、SNSへの投稿を行いたいと思います。
ここでいうSNSへの投稿とはFacebookとTwitterのことになります。

このSNSへの投稿ができるようになると「Social.framework」というフレームワークの使い方をマスターできるとともに、簡単にSNSへ投稿を行うことができるようになります。

また、実際に自分でオリジナルアプリに変更していろいろな応用アプリを作れるようになるかと思いますので、それでは作っていきましょう!

《前回までの講座》


iPhoneアプリ開発の環境を整えよう
iPhoneアプリ開発に必要なこと
プログラムなしで、 レッドカードiPhoneアプリを開発してみよう
プログラムなしで、カラフルカードアプリを開発してみよう
お気に入りのサイト集アプリを開発してみよう
ノートメールアプリを開発してみよう(Part1)
ノートメールアプリを開発してみよう(Part2)
10秒で止める「ジャストタイムiPhoneアプリ」を開発してみよう(Part1)

画面を整える

画面デザインする

それでは作成していきましょう。前回まではタイマーを再生して、10秒になった時にストップボタンを押すと「おめでとう」と表示される部分までを実装しました。

今回は、SNSへその結果を投稿する部分を行っていきたいと思います。

まず、「ボタンを押すと投稿画面がでる」ということを行いたいので「Facebookへ投稿」ボタンと「Twitterへ投稿」ボタンを作成していきます。

Buttonを画面の上にのせていきます。右側からButtonを選択して、画面へドラッグ&ドロップしてのせてください。

そして、ボタンをダブルクリックして「Facebookへ投稿」と名前をつけてください。
xcode_justTime1
それが完了したら、このButtonを押したときの処理を記述する場所を作っていきたいと思います。

Facebookへ投稿」ボタンを選択した状態でcontrolを押しながら、プログラムの方へドラッグ&ドロップをしていきます。

すると、線が伸びていることがわかるかと思います。

名前を決める画面が出るので、「shareFacebook」と名付けます。
xcode_justTime2
xcode_justTime3
同じように、Twitterへ投稿ボタンも作っていきます。

Buttonを画面の上にのせていきます。

右側からButtonを選択して、画面へドラッグ&ドロップしてのせてください。

xcode_justTime4

そして、ボタンをダブルクリックして「Twitterへ投稿」と名前をつけてください。

xcode_justTime5

「Twitterへ投稿」ボタンを選択した状態でcontrolを押しながらプログラムの方へドラッグ&ドロップをしていきます。

すると、線が伸びていることがわかるかと思います。

名前を決める画面が出るので、「shareTwitter」と名付けます。

xcode_justTime6

フレームワークを導入する

Social.frameworkとは

続いてSNSへ投稿するためのフレームワークを導入していきます。

左端の赤い部分をクリックすると、下記のような画面が出てくると思います。

左側の画面を下へドラッグ&ドロップしていくと、
xcode_justTime7
「Linked Frameworks and Libraries」という箇所があると思います。
ここのプラスボタンを押してください。
xcode_justTime8

するとフレームワークを導入する画面をでてくるので、「Social.framework」と検索して、Addボタンをクリックします。

これで導入部分は完了です。

xcode_justTime9
xcode_justTime10
この「Social.framework」とは、iPhoneからSNSへ投稿する際に簡単に投稿できる道具が入っているものとなります。
それでは、この道具「Social.framework」をプログラムへ導入していきます。
ViewController.mへ#import と記述します。
これで「Social.framework」のプログラムへの読み込みは完了です。
xcode_justTime11

Facebookへ文字を投稿するには

さらに、投稿するメソッドを作成していきます。
まずはFacebookへ投稿するメソッドを作っていきたいと思います。
下記のように、

-(void)shareFB{
    
    NSString *serviceType = SLServiceTypeFacebook;
    if ([SLComposeViewController isAvailableForServiceType:serviceType]) {
        SLComposeViewController *controller = [SLComposeViewController composeViewControllerForServiceType:serviceType];
        [controller setInitialText:@""];

        
        [self presentViewController:controller
                           animated:YES
                         completion:NULL];
    }   
}

と記述してください。
xcode_justTime12
重要な箇所を説明します。
まず、最初の部分である、

NSString *serviceType = SLServiceTypeFacebook;

でFacebookへ投稿することを示しています。
xcode_justTime13
これはTwitterへ投稿する際は、

NSString *serviceType = SLServiceTypeTwitter;

となります。
重要なのはSLServiceTypeTwitterの部分です。
フレームワークの使い方として、このSLServiceTypeTwitterという箇所を変えるだけで、どちらに投稿したいかを決定することができます。
しかし、まだ何を投稿したいのかを決めていません。
これもテンプレートとして用意してあり、

[controller setInitialText:@“”];

の部分の

@“ここに文字を記入します”

これでFacebookへ投稿する準備ができました。
xcode_justTime14

Twitterへ文字を投稿するには

同じようにTwitterへ投稿するものも作っていきます。
下記のように記述します。

-(void)shareTw{
    
    NSString *serviceType = SLServiceTypeTwitter;
    if ([SLComposeViewController isAvailableForServiceType:serviceType]) {
        SLComposeViewController *controller = [SLComposeViewController composeViewControllerForServiceType:serviceType];
 
        
        [controller setInitialText:@"10秒ジャストでとめたよ!!"];
        
        [self presentViewController:controller
                           animated:YES
                         completion:NULL];
    }
}

xcode_justTime17
ここでも重要な箇所だけ変更しています。

SLServiceTypeTwitterとなっていることを確認してください。これでTwitterへ投稿する準備ができました。

ただ、このままではこれらのプログラムの箇所は呼び出されることはありません。なので、「Facebookへ投稿」ボタンが押されたとき、または「Twitterへ投稿」ボタンが押されたときに呼び出したいと思います。

下記のように記述します。

まず、shareFacebookの中で、

[self shareFB];

xcode_justTime18
次にshareTwitterの中で、

[self shareTw];

と記述します。
xcode_justTime19
これで、先ほど作った投稿するメソッドが呼ばれることになります。

シミュレーターで確認してみよう

それでは、シミュレーターで確認してみたいと思います。

左上の▶ボタンを押してシミュレーターを立ち上げてみてください。

下記は「Facebookへ投稿」ボタンを押したとき、
xcode_justTime20
そして、下記は「Twitterへ投稿」ボタンを押したとき、
xcode_justTime21
の画面になります。

どちらもはじめから文字が挿入されていることがわかると思います。これで完了です!

最後に

いかがでしたか?

このように簡単にSNSへの投稿も行うことができます。よくミニゲームアプリなどでみる光景だと思います。

次回は、これらの機能や今までやってきたことを踏まえて【超かんたん!】嘘電話アプリを開発してみよう
をやっていきたいと思います。

この記事が気に入ったら
いいね!しよう

creiveの最新情報をお届けします

この記事を書いた人

yuta
知識ゼロからプロのInstagram風画像加工iPhoneアプリを作る 特別クーポン配布中! 詳しくはこちらから! エンジニアでプロデューサー ピーターティールが大好きです! Twitter:Yuta Fujii 質問はお気軽にどうぞ!

関連する記事

Recommended by