SwiftでGoogleAdmobバナー広告を貼る方法

admob事前導入がお済みでない方はこちらを参照してください
boostnote.hatenablog.com

バナー広告の貼り方

最初にテスト表示する時は
ca-app-pub-3940256099942544/2934735716
こちらのテスト用のbannerIDを使用してください。
アカウントが削除される恐れがあります。

今回の実装は
Xcode: v9.1
シミュレータ: iPhone 8 Plus - iOS11.1
を使用しています。

ViewController.swiftに以下のソースコードをコピペすると完了です。
詳細な説明は番号を参照してください。

import GoogleMobileAds // 1

class ViewController: UIViewController, GADBannerViewDelegate { // 2

    var bannerView: GADBannerView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 3
        // In this case, we instantiate the banner with desired ad size.
        bannerView = GADBannerView(adSize: kGADAdSizeBanner)
        bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
        bannerView.rootViewController = self
        bannerView.load(GADRequest())
        bannerView.delegate = self
        addBannerViewToView(bannerView)
    }
    
    // 4
    func addBannerViewToView(_ bannerView: GADBannerView) {
        bannerView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(bannerView)
        view.addConstraints(
            [NSLayoutConstraint(item: bannerView,
                                attribute: .bottom,
                                relatedBy: .equal,
                                toItem: bottomLayoutGuide,
                                attribute: .top,
                                multiplier: 1,
                                constant: 0),
             NSLayoutConstraint(item: bannerView,
                                attribute: .centerX,
                                relatedBy: .equal,
                                toItem: view,
                                attribute: .centerX,
                                multiplier: 1,
                                constant: 0)
            ])
    }
    
// 4 
    /// Tells the delegate an ad request loaded an ad.
    func adViewDidReceiveAd(_ bannerView: GADBannerView) {
        print("adViewDidReceiveAd")
    }
    
    /// Tells the delegate an ad request failed.
    func adView(_ bannerView: GADBannerView,
                didFailToReceiveAdWithError error: GADRequestError) {
        print("adView:didFailToReceiveAdWithError: \(error.localizedDescription)")
    }
    
    /// Tells the delegate that a full-screen view will be presented in response
    /// to the user clicking on an ad.
    func adViewWillPresentScreen(_ bannerView: GADBannerView) {
        print("adViewWillPresentScreen")
    }
    
    /// Tells the delegate that the full-screen view will be dismissed.
    func adViewWillDismissScreen(_ bannerView: GADBannerView) {
        print("adViewWillDismissScreen")
    }
    
    /// Tells the delegate that the full-screen view has been dismissed.
    func adViewDidDismissScreen(_ bannerView: GADBannerView) {
        print("adViewDidDismissScreen")
    }
    
    /// Tells the delegate that a user click will open another app (such as
    /// the App Store), backgrounding the current app.
    func adViewWillLeaveApplication(_ bannerView: GADBannerView) {
        print("adViewWillLeaveApplication")
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    

}

1.事前準備で用意した「GoogleMobileAds」をインポートしてます
2.GADBannerViewDelegateを呼びます
3.BannerViewのサイズなどを指定しています。特に触ることはないです
4.デリゲートメソッドで、広告がロードされた時や、広告の配信に失敗した場合などに、処理を自分で事細かにカスタマイズできます
f:id:junp0819:20171212171602p:plain:w200

実際に本物の広告を貼る際には、
bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
このadUnitIDに自分のadmobアカウントで申請したアプリのIDを貼ってください。

以上、SwiftでのAdmobバナー広告の貼り方でした。

SwiftでGoogleAdmobを導入する方法 - 事前準備編 -

今回は、GoogleAdmobをSwiftを使用して貼っていきます。
公式リファレンスはこちらですが
内容を簡略化したのでお届けします。
全てを一度に書くと長くなるため、こちらの記事は事前準備にとどめております。
記事の最後に各広告の導入方法のリンクを貼るのでそちらから実際のソースコードは確認してください。

前提条件

・Xcode 7.0以上
・iOS 6.0以上がターゲット
Admobアカウントを作成

1.Google Mobile Ads SDK ダウンロード方法

1.cocoapodでのダウンロード
2.マニュアルのダウンロード
以上の2つの方法でダウンロードできますが、今回はマニュアルのダウンロードで紹介していきたいと思います。
まずは、こちらのサイトのzipファイルを解凍してください。
ブログ作成時、sdkのバージョンは7.26.0でした。
このsdkの「GoogleMobileAds.framework」をXcodeにドラッグ&ドロップします。
f:id:junp0819:20171212170522p:plain この時の注意点として、 Copy items if neededに必ずチェックを入れておいてください。

f:id:junp0819:20171212170612p:plain

2.フレームワークのインポート

プロジェクトのディレクトリ(Xcode左部分の一番上のファイル)を開き、
タブは「General」で、下の方にスクロールすると、
「Linked Frameworks and Library」というのがあるので、そこの+ボタンを押してフレームワークをインポートします。 (画像参照)
f:id:junp0819:20171212170850p:plain 追加するフレームワークは下記の10個です。
・AdSupport
・AudioToolbox
・AVFoundation
・CoreGraphics
・CoreTelephony
・EventKit
・EventKitUI
・MessageUI
・StoreKit
・SystemConfiguration
f:id:junp0819:20171212170922p:plain:w400
フレームワークが入りました。
これでadmobを導入する準備が整いました。

3.広告について

広告は以下の4つの形式があります。

バナー

オーソドックスな形の広告です。画面上部や下部によくある長方形の小さな広告です。
boostnote.hatenablog.com

インタースティシャル

画面を覆い尽くすほど大きい下から出現する広告です。

動画広告

これも見たことあると思いますが、その名の通りムービーが流れる広告です。

ネイティブ

普通の広告ではなく、固有なUIにカスタマイズ可能な広告ですが、2018/03月に廃止なので割愛させていただきます。

GitHubで人気のオープンソースTOP5 - Java編 🌟

12月4日〜11日の間に、GitHubで公開されているオープンソースの中で最もStarが付いたプロジェクトを紹介していきます🌟

今回はJavaを集めました。

No.1

Qihoo360 / XLearning

f:id:junp0819:20171210122233j:plain Hadoop上のAI Star:794 github.com

No.2

Blankj / awesome-java-leetcode

f:id:junp0819:20171210122648p:plain 👑 Javaソリューションによるアルゴリズム Star:1,993 github.com

No.3

uber / NullAway

f:id:junp0819:20171210123137p:plain JavaコードのNullPointerExceptions(NPE)を排除するためのツール Star:1,124 github.com

No.4

iluwatar / java-design-patterns

f:id:junp0819:20171210124139p:plain Javaで実装されたデザインパターン Star:27,382
github.com

No.5

spring-projects / spring-boot

f:id:junp0819:20171210124251p:plain Spring Boot
Star:18,521

github.com


Boostnoteコミュニティの紹介

今回はPreferenceのCommunity/infoの欄にあるコミィニティについて紹介していきたいと思います。 f:id:junp0819:20171210111252p:plain

Subscribe to Newsletter

boostnote.io Boostnoteのアップデート情報や、大きい更新情報をメールでお届けします。

GitHub

github.com
Githubのissueへのリンクです。
Boostnoteに不具合が起きた時などはこちらにissueを投げていただけますと対応できます。

Blog

medium.com
Boostnoteのブログです。
Boostnoteの使い方や活用例、OSSについてのまとめなど様々な情報発信をしています。

Facebook Group

https://www.facebook.com/groups/boostnotewww.facebook.com Facebookグループです。
ブログの記事やアップデート情報を発信しています。

Twitter

twitter.com Boostnote公式Twitterアカウントです。
ブログの記事やアップデート情報を発信しています。
リプやDMをいただけますと質問に対応できますのでよろしくお願いします。

Reddit

www.reddit.com Boostnoteのサブレディットです。
ブログの記事やアップデート情報を発信しています。
質問などありましたらスレッドをご自由に立ててください。

コミュニティに参加していただけると、最新情報をお届けできるので是非よろしくお願いします。

Boostnoteのテーマデザイン 早見表

"Preference->UI"から変更できるBoostnoteのテーマについて紹介します。
メインのカラーテーマは全3種
エディター、コードブロックテーマは50種類ずつあります。
少々長いのでスクロールしながらお好みのテーマを見つけることをオススメします。

Color Theme

1.Default

f:id:junp0819:20171207171157p:plain

2.White

f:id:junp0819:20171207171209p:plain

3.Dark

f:id:junp0819:20171207171223p:plain 以上の3つです。

Editor ThemeとCode blockTheme

ここからは編集画面とソースコードブロックのテーマです。

1.default

f:id:junp0819:20171207171320p:plain

2.3024-day

f:id:junp0819:20171207171919p:plain

3.3024-night

f:id:junp0819:20171207171940p:plain

4.abcdef

f:id:junp0819:20171207172002p:plain

5.ambiance-mobile

f:id:junp0819:20171207172024p:plain

6.ambiance

f:id:junp0819:20171207172045p:plain

7.base16-dark

f:id:junp0819:20171207172114p:plain

8.base16-light

f:id:junp0819:20171207172132p:plain

9.bespin

f:id:junp0819:20171207172159p:plain

10.blackboard

f:id:junp0819:20171207172237p:plain

11.cobalt

f:id:junp0819:20171207172938p:plain

12.colorforth

f:id:junp0819:20171207172944p:plain

13.dracula

f:id:junp0819:20171207173042p:plain

14.duotone-dark

f:id:junp0819:20171207173033p:plain

15.duotone-light

f:id:junp0819:20171207173056p:plain

16.eclipse

f:id:junp0819:20171207173150p:plain

17.elegant

f:id:junp0819:20171207173142p:plain

18.erlang-dark

f:id:junp0819:20171207173200p:plain

19.hopscotch

f:id:junp0819:20171207173207p:plain

20.icecoder

f:id:junp0819:20171207173217p:plain

21.isotope

f:id:junp0819:20171207173700p:plain

22.lesser-dark

f:id:junp0819:20171207173707p:plain

23.liquibyte

f:id:junp0819:20171207173715p:plain

24.material

f:id:junp0819:20171207173722p:plain

25.mbo

f:id:junp0819:20171207173735p:plain

26.mdn-like

f:id:junp0819:20171207173744p:plain

27.midnight

f:id:junp0819:20171207173752p:plain

28.monokai

f:id:junp0819:20171207173800p:plain

29.neat

f:id:junp0819:20171207173809p:plain

30.neo

f:id:junp0819:20171207173817p:plain

31.night

f:id:junp0819:20171207174340p:plain

32.panda-syntax

f:id:junp0819:20171207174347p:plain

33.paraiso-dark

f:id:junp0819:20171207174355p:plain

34.paraiso-light

f:id:junp0819:20171207174404p:plain

35.pastel-on-dark

f:id:junp0819:20171207174411p:plain

36.railscasts

f:id:junp0819:20171207174420p:plain

37.rubyblue

f:id:junp0819:20171207174428p:plain

38.seti

f:id:junp0819:20171207174435p:plain

39.solarized dark

f:id:junp0819:20171207174448p:plain

40. solarized light

f:id:junp0819:20171207174459p:plain

41.the-matrix

f:id:junp0819:20171207175038p:plain

42.tomorrow-night-bright

f:id:junp0819:20171207175050p:plain

43.tomorrow-night-eighties

f:id:junp0819:20171207175059p:plain

44.ttcn

f:id:junp0819:20171207175106p:plain

45.twilight

f:id:junp0819:20171207175114p:plain

46.vibrant-ink

f:id:junp0819:20171207175125p:plain

47.xq-dark

f:id:junp0819:20171207175133p:plain

48.xq-light

f:id:junp0819:20171207175140p:plain

49.yeti

f:id:junp0819:20171207175149p:plain

50.zenburn

f:id:junp0819:20171207175158p:plain

あなたのお好みに合ったテーマをお探しください。


オープンソースのReact-nativeライブラリ 5選

GitHubで公開されているオープンソースのReact-nativeライブラリを紹介していきます🌟

f:id:junp0819:20171206162123p:plain

No.1

frostney/react-native-create-library

f:id:junp0819:20171206160907g:plain
📓 1つのコマンドでReact -nativeライブラリを作成するコマンドラインツール
Star:525🌟
github.com

No.2

storybooks/storybook

f:id:junp0819:20171206161220p:plain
React、React-Native、Vue UIコンポーネントのインタラクティブな開発とテスト環境
Star:16,348🌟
github.com

No.3

xudafeng/autoresponsive-react-native

f:id:junp0819:20171206161328p:plain
Reactのための自動応答レイアウトライブラリ
Star:147🌟
github.com

No.4

gcanti/tcomb-form-native

f:id:junp0819:20171206161414j:plain
react-nativeのためのフォームライブラリ
Star:2,294🌟
github.com

No.5

avocode/nachos-ui

f:id:junp0819:20171206161527j:plain Nachos UIはReact Nativeコンポーネントライブラリです。
Star:1,332🌟
github.com


素早くブログの下書きを書けるツール Boostnoteの活用例

今回は、ブロガーの方向けの活用法です。
BoostnoteはMarkdownでの下書きが可能なので、
はてなブログや、Qiitaなどの下書きを書くことができます。
プレビューを早く見ることができ、オフラインで実行できるので、
ネットの繋がってない場所でも仕事可能です。

また、オフラインということで情報漏洩の心配もありません。
たまにある、ネットの接続障害で書いた内容が消えてしまうという事態も防ぐことができます。

Markdown

Markdownは以前こちらの記事で紹介しましたが、
BoostnoteではほとんどのMarkdown記法をサポートしております。
boostnote.hatenablog.com

下書きをするメリット

はてなブログやQiitaのエディタにそのまま書けばいいじゃんって意見もありそうですが、
下書きの段階で誤字・脱字などは発見するべきです。
いらない文章や、付け足す文章などをちゃんと書いてから投稿することは大事です。
また、プレビューを読み込むのに時間がかかるのでその部分も時間短縮できます。
f:id:junp0819:20171206180439p:plain
f:id:junp0819:20171206180457p:plain

同期機能を使ってスマホでも使用可能

外出中にさっとブログを書きたいときは、モバイル版Boostnoteが使用できます。

iOS

Boostnote - プログラマー向けメモ帳アプリ

Boostnote - プログラマー向けメモ帳アプリ

  • MAISIN&CO., Inc.
  • 仕事効率化
  • 無料

Android

play.google.com こちら、使用時にDropboxをデスクトップ版Boostnoteと連携させる必要があります。
同期方法は以下の記事を参考にしてください。
boostnote.hatenablog.com 試しにスマホからノートを書いてみました。
f:id:junp0819:20171202171148j:plain:w200
スマホで描いたメモをデスクトップ版に反映させるには、
「Command + R」で、デスクトップ版Boostnoteをリロードする必要があります。
f:id:junp0819:20171206180519p:plain
f:id:junp0819:20171206180656p:plain 以上の工程で、外出時などのブログもスマホから簡単に書くことができます。

注意点

・Boostnoteで書く下書きは、改行時に「Enter」を押すだけで改行できますが、
はてなブログでは改行時にスペース2つが必要になります「 」。
・画像は、はてなブログ内のストレージに保存しなければならないため、
あくまでもテキストのみのコピペになります。

まとめ

Markdownでの下書きとプレビューを素早く行うことで、ブログを書く際の効率を上げれる。
Boostnoteの詳細を知りたい方はこちらの記事をご覧ください。
boostnote.hatenablog.com