読者です 読者をやめる 読者になる 読者になる

ビギグラマーのノート

自作PCやプログラミングについてのブログです。

【Swift3】WKwebViewでWebページのアイコンを自動取得

 作成意図

 Webページにはappleバイス用のアイコンが設定されている場合があり、これが主にブックマークを使用する際のアイコン画像となります。現在このアイコンを取得する機能はWKWebViewに実装されておらず、自力で導入する必要があります。しかし、毎回これを書いていては骨が折れるので、アイコンを取得できるカスタムWKWebViewを作成しました。

ダウンロード

Get url where web page icon. · GitHub

 使い方

 CustomWKWebView.swiftとscript.jsをアプリケーションのディレクトリに置き、xcodeに登録してください。

 webView.getIconImage() を実行すると現在表示中のページのアイコンの取得を試みます。 func urlDidGet(customWebView: , arrURL:) がアイコンの取得時に呼び出されます。以下がサンプルの使い方になります。

 ライセンス

 このカスタムは営利非営利のどちらでも使用可能です。ただし二次配布は許可しません。

問題点

 ATSの設定によりますが、URLSessionのdownloadTaskがブロックされる場合あります。ATSのAllow Arbitrary Loads in Web ContentのYES設定では現在のところWKwebviewしかhttp通信を認められていないので。URLsession用に個別で通信を許可する等の対処が必要になります。

改造等

 現在はapple用にタグが設置されたアイコンしか読み込みませんが、icon等の一般的なものも読み込むようにするとより多くの場所でアイコンを取得できます。その場合複数の画像が上がってくることにりますが...

【Swift3】TableViewで簡単な設定画面を作る

 iPhoneの純正の設定画面はTableViewを使用して作られています。そしてこれと同じようなものをアプリケーション内でTableViewを駆使して作ることができます。最終的な完成図はこのようになります。

f:id:BegiGrammer:20170323063007p:plain

  空のViewControllerを用意し、TableViewとCellを貼り付けDelegateとDataSourceを設定、cellのidentifierを設定するところの説明は省略します。

f:id:BegiGrammer:20170323063349p:plain

  このようにTableViewのStyleをGroupedにします。するとこのようなStyleになります。

f:id:BegiGrammer:20170323063632p:plain

 コードはこんな感じ。今回はViewControllerを使わずにやっていますが、ViewControllerにTableViewを貼り付ける形でもOK。(StaticなTableViewだとできない)

 あとはコードのコメントを参考にして

 

参考というかほどんどパクリ元

www.edumobile.org

【Swift3】WKWebViewの使い方とロード後に呼び出されるメソッド

 iOS8.0からWKWebViewが追加され、現在よりセキュアで安定したWKWebViewの使用をAppleは推奨しています。WKWebViewはStoryBoard上でまだ扱えないのでコードを書いていく必要があります。

WKNavigationDelegateはwebViewが活動中に色々といじれる便利なプロトコルなので一度リリースノートを読んでおくといいでしょう。

WebKit | Apple Developer Documentation

今回はwebページのtitleを獲得するためにページのロード後に呼び出される func webView(WKWebView, didFinish: WKNavigation!) を使用しました。またhttpsとhttpのどちらにも対応する場合 Info.plist -> App Transport Security Settings -> Allow Arbitrary Loads in Web Content を YES にする必要があります。この設定でどちらもセキュアに通信できるのはiOS10以上のデバイスのみです。iOS9や8対応の場合は Allow Arbitrary Loads もYESにします。しかしこれはあまり推奨されない方法です。

2017/03/14現在iOS10のシェアは76%でiOS9のシェアは16%なのでそろそろアプリのサポートを切ってもいい頃合いだとは思います。

App Store - Support - Apple Developer

 webのページを戻したり進めたりする場合昔はScreen Edge Pan Gesture を設置して戻る際の挙動を書かなければいけませんでしたが、今は webView.allowBackForwardNavigationGestures = true にしておくだけで簡単に設定できます。

TabBarの使い方

iPhoneアプリを作る

環境 Swift 3, app for iOS10

 様々なアプリケーションで使用されるTabBarについて書いていきます。TabBarは例えばApple純正の時計アプリとかを想像してもらうとわかりやすいかもしれません。

f:id:BegiGrammer:20170312081145p:plain

 TabBarとはこのように下にいくつかのタブが並び画面を簡単に移動することができる機能です。複数の画面をあらかじめ読み込ませた状態で画面移動するため、ページ移動の負荷が軽くなります。また同じような機能をボタンによるSegueで実現しようとするとTabBarと比べて複雑になりがちです。

 StoryBoardとしてはこのような形になります。

f:id:BegiGrammer:20170312081914p:plain

  TabBarはこのようにメインのコントローラーで複数のページを制御する形です。メインとサブをつなぐSegueはRelationshipになります。

f:id:BegiGrammer:20170312082732p:plain

  あらかじめ出来合いのTabBarControllerがあるのでそこから始めると容易にTabBarを実装できます。新たにitem(子ページ)を追加する場合はViewController追加後Tab Bar Itemを置き、親ページとRelationshipのSegueで接続することで追加ができます。

f:id:BegiGrammer:20170312082703p:plain

 TabBarのアイコンは標準のアイコンのほか、Retinaディスプレイで60x60ピクセルの画像を設定することができます。この場合ファイルの名前の最後に@2xをつけてください。(例: example@2x.png) 画像の色は透明部分以外TabBarItemに設定した色で塗りつぶされ表示されます。(上のStoryBoardの画像の歯車のアイコンはもともと黒色でした)

f:id:BegiGrammer:20170312083357p:plain

  違うTabBarのアイテムを選択した時に、どれを選択中かの値を受け取ることができます。UITabBarDelegateスーパークラスに追加してください。また、tabBarのデリゲートとしてselfを選択しておいてください。

func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem){}

 item.nameで選択中のアイテムの名前を知ることができ、item.tagで設定したtagの数値を受け取ることができます。

 TabBarの操作によって既に読み込まれた違うページを表示する場合、子ページ内のClassである幾つかのメソッドが実行されます。

f:id:BegiGrammer:20170312082655p:plain

 TabBarのitemはを選択された時にこの図のように4つのappearとdisappearメソッドを繰り返します。すなわちviewDidLoadは最初の一回しか行われません。起動時にitem2などの最初に現れないページを読み込ませる場合は、私はloadViewIfNeededを使用しています。

もちろんですが、TabBarのページ変更はユーザーが頻繁に行う場合があるので、この4つにはなるべく軽い処理か条件付けにより最適最小のものを実行するようにする必要があります。(まあそんなに気にしないでも良いレベルですが・・・)

【Swift】キーボードの使い方あれこれ

 Swift3でiOSのキーボードを使う際に色々とセッティングできるのでまとめておきます。

 -キーボードのreturn(改行)ボタンを押した際に実行されるメソッド

StoryBoardを使わずに直接コードを入力することもできますが、簡単なので今回はStoryBoardを使います。

f:id:BegiGrammer:20170312045645p:plain

 コード上にDid End On ExitのActionFuncを作るだけ。これを使うとtextField.resignFirstResponder()を使うことなく自動的に閉まるようになります。

 

 -手動で閉める

上にも書きましたが、

textField.resignFirstResponder()

 で指定したtextFieldの編集を終え、returnを押した際に閉めることができます。

 

 -デフォルトでreturnになっているのを色々変える

textField.returnKeyType = UIReturnKeyType.search

これで色々とUIReturnKeyTypeのに色々変更可能です。

UIReturnKeyType - UIKit | Apple Developer Documentation

 現在YahooとかGoogleとかは消去されて選択してもSearchだけになっているようです。

EVGA GTX 1080/1070 HYBRID レビュー

 GTX1080/1070 リファレンス基板用の簡易水冷を購入しました。値段は$104で米amazonで購入しました。最初からGTX1080に簡易水冷が付いているタイプもあるのですが、本格水冷に改造するつもりだったのが予想外の出費が重なりお手軽な簡易水冷に落ち着きました。2017/03/08現在GTX1080/1070用の後付け簡易水冷を発売しているのはEVGAだけのようです。

 全体の寸法としてはラジエーターとファンを合わせて厚み約5cm。

f:id:BegiGrammer:20170309051510j:plain

f:id:BegiGrammer:20170310063545j:plain

f:id:BegiGrammer:20170310063639j:plain

 ホースの長さが約35cm。ITXに使用するには少し長い感じです。ホースは表面をナイロンの編み込みで覆われています。水枕は厚さ3cm、これにリファレンスのGPUチップ周りにある4つの穴と同間隔でネジ穴があり直接これでネジ止めする模様。グラボのめもりーを冷やすためのシッコロファンとラジエータのファンはどちらもGPUからの電源供給で作動します。しかしどちらも回転数のモニタ及び調整を行うことはできません。

 この簡易水冷セットにバックパネルは付属しませんが、EVGA 1080 SCのバックパネルがそのまま使用できました。

 水枕の音に関して、起動時に少し腹がなるような音がしますが動かしていればほぼ無音におさまりました。

 OCCT 4.5.0のGPUテストが何故か動かないので温度を性格にみることはできませんでしたが、3DmarkのTime Spyを3周しておよそ55℃の結果になりました。簡易水冷導入前は一周目で80℃まで行き、クロックが下がる状態でした。

 これでITXのサイドパネルを完全に閉めた状態での運用ができます。

 Tom Clancy's Chost Recon を最高設定144Hzで4時間ぶっ続けでやったところ、最高温度が56℃という結果になりました。サイドパネルからラジエーターの空気を排気しているのですが結構そこがネックな感じで、サイドパネルを取り外すと大体50℃で安定しました。

 最終的にはバックにラジエーターとファンを背負わせる形にするのでおそらくあと2,3℃冷える様になると思います。その場合はケースのパイプの穴を通さなければならないので、一度ホース、ラジエーター、水枕をバラさなければなりませんが・・・

PC電源に使用されるコネクタ ピンの規格 & スリーブ化

自作PC

 PC電源をスリーブ化・ケーブル長の調整をする際に必要になってくるのがコネクタピンです。PC電源のコネクタピンには3種類あり、

 PWM等の4ピンもしくは3ピン、電源ボタンを接続するコネクタピンである2.54mmピン

f:id:BegiGrammer:20170306103409j:plain

 24ピンコネクタやPIC-E等に使われる(名称不明)のこいつ サイトによって名前がまちまちだが「ATX Connecter pin female」とかで検索すると出てくる 圧着工具では2.54mmと同じとこで圧着できる

f:id:BegiGrammer:20170306105818j:plain

最後に今はあまり使われていない4pin ペリフェラル 電源コネクタ ファンやIDE時代のHDDの電源供給用に使われていたもの ピンの型番は AMP 60620-1 

f:id:BegiGrammer:20170306112433j:plain

 当たり前ですがどのピンにも互換性はなく、両翼のATXコネクタピンと2.54mmを間違えて買うとゴミが増えます。こいつはPC Modding部品を扱う店には確実にあるかと思います。私の知っているATXコネクタピンを取り扱っている店は

www.aquatuning.us

こことか。あとAmazon.comに個人で売っているのを少し見かける程度です。昔大阪シリコンハウスで見かけたような気がしないでもないですが。名古屋大須にもあったかなーと 。秋葉原は詳しくないのですが、多分どこかにあるでしょう。しかしそのほか一切のことはわかりません。(無能感

 スリーブ化に関して編組スリーブは探せば結構あるので入手には困らないでしょう。

 あとスリーブ化する際にピン抜きが必要になりますが、ATXコネクタピンなら2本まとめてまっすぐにしたホッチキスの針が使えます。

f:id:BegiGrammer:20170306114628j:plain

 こんな感じにペンチで曲げて・・・

f:id:BegiGrammer:20170306114714j:plain

 このように端子の間にさして、コードを力一杯引っ張ります。するとピンの両翼の返しの部分が中に押し込まれて抜けるようになります。