ぽこひでブログ

ほのぼの大学4年をやってる [ぽこひで] の学生エンジニアブログ?

PV見ながら洋楽歌えちゃうし、しかもシェアできるウェブサービス『ついまな』をリリースしました!

動画を楽しむついでに英語を学ぶウェブサービス『ついまな』をリリースしました!!

PV見ながら洋楽歌えちゃうし、しかもシェアできるはその一部でしかないんだけど、こっちの用途の方が受けそうだったからこんな名前に(´・ω・`)

ついまな

f:id:hdye82647:20160603145002p:plain

「洋楽とかを聞く時、ただただ聞き流してませんか?」

普通に聞くだけでも楽しいから、ついでに英語字幕みて勉強した気になってみませんか!(実際、英語意識するだけで勉強になる...はず)

 

「洋楽を歌う時にわざわざYoutube開きながら、歌詞サイト開いて歌ってないですか?」

せっかく良いPVなんだから、PVみて歌いましょうよ。『ついまな』だとそれができます。

 

「ブログとかでおすすめの洋楽を紹介する時に普通にYoutubeの動画埋め込んでませんか?」

『ついまな』の埋め込みコードなら字幕付きで動画をサイトに埋め込めれます!

Lean On | Major Lazer & DJ Snake feat. MØ

Can't Feel My Face | The Weekend

See You Again

Magic!/Rude(ルード)

Geronimo(ジェロニモ) | Sheppard

こんな感じ(・∀・)b

普通に見ても楽しい英語のゲーム実況だったり、パロディだったりを英語を意識して、学んだ気になってみよう!英語がわからなくなっても大丈夫。翻訳機能があるのでボタン押すだけで日本語に変換されます!自動翻訳だけど(´・ω・`)

   

会員登録をすると動画を見ることで経験値とか視聴ログが取れ、レベルやグラフで可視化されるので、より「勉強している感じ」が実感できます👍

 

海外の動画って面白いのが多いんです。それが英語だからって見るの遠慮してませんか。ここなら字幕があります。 試しに「実写版ポケモン」を見てみてください。(・∀・)笑

http://www.tsuimana.com/evideos/22    

最後に、あなたのおすすめの動画を投稿したり、字幕が不十分な動画にあなたが字幕を補足してあげたりと、みんなで楽しむついでに英語を学べる動画のプラットフォームを作っていけます!みんなで盛り上げましょう!!! (必死)

   

(...字幕追加してくれた人は貢献度が付与されて、ランキング形式で観れる機能があったり...)

(すいません,技術的な問題でiOSには対応していません。)

   

ぜひ動画を楽しんでください^ ^

個人的に頑張ったから開発とかの技術的なことはQiitaかこのブログで発信していきたいな

Swift初心者がCocoapodsでAlamofireをimportするだけでつまづいた。初心者に伝えたい。いきなりググるな。

どうも ネイティブ初心者のぽこひでです从‘∀‘从

昨日からレベル1の見習いネイティブエンジニアをバイトで始めました。とりあえず現存するWordpressサイトのアプリ版を作ってみようということでシンプルにAPI叩いて取得した記事一覧をアプリ上で見れるようにしようってことで定番らしいAlamofireを入れてみることに。

と、いざやり方を調べたら、githubページに行ってDownload Zipして、展開した中にあるAlamofireのライブラリをXcode内にドラッグアンドドロップで読み込んでdestinationに指定して...なんか色々やって...と。感じたこと。

めんどくさそう(。-`ω-) んー

と調べたらあったのが、CocoaPods。大抵のライブラリをサポートしていて、こいつを使ってやれば結構簡単に入れれるそうなので、早速入れてみた。Macを使っているので、Rubyは標準搭載。このCocoapodsはgemで入れるらしいので早速コマンドかたかた

sudo gem install cocoapods

ダウンロード完了!

ということで、早速Xcodeでnew projectしたフォルダ内に行って

pod init

をしてPodfileというものを作成する。その作成したフォルダは初期状態でこうなっている

# Uncomment this line to define a global platform for your project
# platform :ios, '8.0'
# Uncomment this line if you're using Swift
# use_frameworks!

target 'your_app_name' do
end

今回はテストの方は作っていなかったので 'your_app_name_test' みたいなのは生成されなかった。この 'your_app_name'のところに使うライブラリを書いていくってことで、AlamofireとSwiftyJSONを使う予定だったので、早速書いていく。それと、Swiftで書くのでuse_framework!をコメントから外して、iosも指定すると

platform :ios, '8.0'
use_frameworks!

target 'your_app_name' do
 pod "Alamofire"
 pod "SwiftyJSON"
end

このようになったらあとは、

pod install

めっちゃ読み込んでくれる。終わったら、多分生成されてるはずの.xcworkspace拡張子のファイルを開いてそこ上で作業していく。と、ここまでは結構順調だった。そうimportするまでは。

viewControllerに移動してimport UIKitされている行の下にimport Alamofireを入力してセーブすると早速エラー。

no such module Alamofire

(ノ゜0゜)ノ オオォォォォォォーまいガー

いやいや、cocoapodsで入れたやーっん。(´・ω・`)てなわけでググりまくりました。

vdeep.net

とかなんか色んなサイトを見て、手動でAlamofireを入れたりしたけど無意味。一向にエラーが消えることはなかった。ので、真剣にエラーと向き合ってみることに。

あれ。。とりあえずimport Alamofireコメントアウトしてなにもviewは変更していない状態に戻すと、saveはできる。だが、ビルドするとエラーが。完全にAlamofireのフレームワーク内からエラーが生じている。

ハァ?(゚Д゚)y─┛~~ん

フレームワークぶっこわれてんじゃねぇか!!とか思って、意を決して今更ながらgithubのREADMEとかをちゃんと読む。

github.com

すると書いてあった。

Requirements

解決策

この環境とどこが違うかをみると、platform iOS 8.0+はPodfileで8.0と指定しているので大丈夫そう。じゃあ問題はXcode7.2+だ。Xcodeのバージョンを見てみる。

http://commentphotos.com/gallery/CommentPhotos.com_1406833846.jpg

Xcode 7.1。おい、俺。なぜアップデートしなかった。なら、あとはアップデートするだけじゃん。よーしAppStoreいこーっと。

...

アップデートできないんですけど(´・ω・`) これもググると結構アップデートできない人がいるらしい。

  • iTunes helperというプロセスが邪魔しているとか
  • StoreAgency というプロセスが邪魔しているとか

なんか色々解決策があったけど、どれを試してもダメだった。最終手段として、Xcodeを再インストールすることに。

Xcodeは確か4.0くらいからXcode.appを削除するだけで簡単にアンインストールできるらしいので、削除。これがまぁ時間のかかること。1,2時間ぐらい削除するだけでかかりました。削除し終わってから、App Storeに再度訪問。Xcodeをインストールしてやる〜ダウンロード!

http://commentphotos.com/gallery/CommentPhotos.com_1406833846.jpg

あなたのOSの環境ではXcode 7.1までしかダウンロードできませんがよろしいですか。

はいー。全ての原因は過去の自分にありました。App Store上でXcodeがアップデートできなかったのも、過去の自分がOSをまだYosemiteのままだったから。すぐにOSをバージョンアップ。これがまぁまた時間がかかる。なんかアップデートが終わったらライブ変換とか言って、勝手に変換しまくる個人的にめっちゃ嫌な機能が増えてたからすぐにオフにしたけど、なんとかやっと最新版にMacを更新したので、Xcodeをストアからダウンロードして、先ほど通りcocoapods経由でライブラリを入れたらやっと動きました!!!

嬉しいo(⌒─⌒)o

ということで、今回の教訓はあれですね。

ググるにしても、まずは自分の環境を知っておけ!

ググった結果は必ずしも正しくありません。今回も色々ググっても、2,3年前の古い情報が普通にあふれている。なので、まずは自分の環境を知った上でエラーをちゃんと読んでそれがどこのエラーなのかをちゃんと認識する。今回の自分の恥ずかしいところは

  • 自分の環境をしっかりと認識していなかった
  • 最初のエラーの時点で速攻で 「cocoapods no such module Alamofire」とか調べていた → これは結局エラーをちゃんと見たらAlamofireフレームワーク自体からエラーが出ていた。

以上、初心者ならではのエラーに直面したという話でした。初心者にとって良い情報になればいいな。

今日からSwift人間

こんにちは そろそろSwiftを始めようと思っているぽこひで です。

先週に連続3日間いっていた地元のWEB制作会社?のインターンが終了して、一応今日からバイトということになって、なにやらすることになりました。先週のインターンではWordpressの管理画面でタイトルを変えてSEO対策したり、youtubeのサムネイルを自動で補完するようにfilter使ってオーバーライドみたいなことしたりしてました。PHPほぼ初心者だったので、Wordpressの構造もわからないままリファレンスと格闘してたのは先週のこと。

今日、バイトに行くと「これからなにやるー?」ってことになってので

  • 1年以内にローンチ予定のサービスの立ち上げ(Wordpress, PHP)
  • その会社が某Channelのリモートで開発するようかけあってくれる案

みたいな二つの案があったんだけど、最初にこの会社に来たときに、「今まではWEBをやってきたけどそろそろネイティブも開発してみたい」と自分が言っていたことを覚えていたらしく、「You やっちゃいなよ〜」的なノリで今日からPHPでなくSwift素人として頑張ることになりました。

まぁそろそろ趣味で独学しようと思ってたから、まったくのゼロベースでいいからと言われ、勉強がてら給料でるならいいかー程度で今、xcodeを開いて四苦八苦してるところ、その息継ぎがてらブログを書いている始末です。

今週くらいで挑戦するもの

  • とりあえずアプリ開発の体系はつかみたい。MVCとかどうやって画面遷移して、そのロジックとかをどこに書けばいいかとかの体系的な知識
  • 有用なフレームワーク?ライブラリ?。なにができるかは想像できるようにしたい
  • ライブラリの管理ツールとかにとりあえずなれる。

このくらいはざっくりと理解したいですね。って、ことでその練習がてら現在すでにWordpressで運用されてるあるゲームの攻略サイトのネイティブアプリを作ってみることになりました。とりあえず実装することは以下の通り

  • APIを叩いて、攻略サイトの記事一覧を取得
    • Wordpressで簡単にRSSで記事一覧を何件ずつ出力できるみたいなことができるらしい。
    • Alamofireというライブラリ?フレームワーク?を使ってGETしてJSON取得。
  • そうして返ってきたJSONをいい感じに整形
  • クリックしたら詳細ページへ

まぁとりあえずこれを目指しますか。ってことで、Alamofireってのを入れようとしたら詰まった。ライブラリってどうやって入れればええねん。githubのページへ飛んでDownload zipして、いちいち入れてたら、バージョン管理とかめんどくさそう。絶対に何かいいのがあるはず

...

あった。

CocoaPods.org

http://rolleragency.co.uk/wp-content/uploads/2014/08/cocoapods-130831074840-phpapp02-thumbnail-4.jpg

ここがわかりやすかった。 qiita.com

こんな感じでライブラリを入れたところで今日は終了(´・ω・`)

これからの道のりは長いねーSwiftがんばろっと。

追記

CocoapadsでちゃんとAlamofireとSwiftyJSONを入れてるはずなのに、なぜかimportする以前にビルドしただけで21個くらいのエラーがAlmofireのフレームワーク内から発生した。importする以前の問題やん(´・ω・`)ってgithubを見たら、今のAlamofireが

を推奨していた。自分の環境を見てみると

( ゙゚'ω゚') モマママ…マジで!?か

iOSの方はさっき参照したページでiOS 8と明記しときゃまぁええで。って書いてあったから真似たけど、Xcodeが7.1だった。。多分これだ。てなわけで、現在Xcodeをアップデート中にブログを書いている始末です。これでエラーが解消すると祈るばかり。

Zepp名古屋にPentatonixのライブを見に行ってきた!最高!

どうも Pentatonixのにわかファンのぽこひで です(・∀・)b

今日もほのぼの日記です。今もこうして記事を書いてるけど、今日はまだコードを一行も書いてない⊂⌒~⊃Д)⊃ぐうたらな生活を送って、先ほど夕方からPentatonixのライブに行ってきました!楽しい!アカペラ最高!かっこいい!

Pentatonixってなーに?って人のために

http://vignette2.wikia.nocookie.net/thepentatonix/images/9/98/Pent.jpg/revision/latest?cb=20141229001255

ペンタトニックス(Pentatonix)は2011年に結成されたアメリカ合衆国テキサス州出身のア・カペラ五人組。グループ名は「五音音階(Pentatonic scale)」に由来。 デジタルエフェクト系サウンドをア・カペラでの大胆なアレンジ、ヒューマンビートボックスによる表現は再現性の高さ・着眼点の良さからバイラル的な人気を博している。 by wiki

こんな感じのアカペラグループです。かっこいいです。アカペラなので、人間の声や拍手やそういった自然な音で歌をカバーしたりしているので、なんか凄いすら〜と耳に入ってきて聞いてて心地いいので、作業用BGMがてらよく聞いてます!作業用BGMで聞くぐらいで熱狂的に好きってほどではないけれど、今回せっかく名古屋でライブをしてくれるということで行ってきました!

感想...

最高!

ライブ時間は1時間20分くらいと短かったなーって正直思っちゃったけど、有名どころの新曲だけじゃなくて、初期の曲も構成にいれてくれてて、Singで締めてくれました!そして、アンコールはDaftPunkメドレーで。普段作業用BGMとして聞いていた曲を生で聴ける貴重な体験だったので、明日からはその感動を意識しながら作業用BGMを聞いて、バリバリコード書いて作業しまっくっちゃういます(´∀`)b

ライブにあまり行ったことがないのでわからないけど、Pentatonixのライブはライブ中も写真撮影がOK?らしくて、今回はSingDaftPunkメドレーのライブ動画を撮ってyoutubeにあげたので是非見てみてください!アップするのはいいのかわかんないけど、ダメだったら消します。。

ただ撮った動画と現実で味わったあの感動は全然イコールじゃないので、この動画とか本家の動画をみて、是非ライブに足を運んでもらうきっかけになったらなと思います!!海外から来てるからちょっぴりライブは高いけど、オススメ(o^ω^o)たのしい

Sing

DaftPunkメドレー

では(゚▽^〃)ノシ

Ruby on Rails 4 をHeroku の無料枠で運用するときに使っているaddon一覧(1)

http://2.bp.blogspot.com/-cwkPKUd6qbM/UraV4Wt6FUI/AAAAAAAAENk/WCg2aPFH4Gg/s1600/Heroku-1.png

こんばんは~  スタバでカタカタ系男子のぽこひで です(゚∀゚)

普段は趣味でRuby on Rails4を使ってWEBサービスを作っていて、それをHeroku上で運用しているのですが、改めてHerokuの勉強しなきゃなーと思ってここに勉強した結果をまとめておきます。自分なりのまとめなので、もしかしたらデータ不十分かも。参考程度に見てもらえると嬉しいです。

現在使っているAddon一覧

  • Heroku Postgres :: Database
  • Memcached Cloud
  • New Relic APM :: Newrelic
  • mLab MongoDB
  • Redis Cloud
  • Heroku Scheduler

Herokuの復習

"rails heroku"とかググったらいくらでも出てくるけど、中々herokuの性質をまとめて教えてくれるサイトがないなか個人的にこのサイトはわかりやすかったので是非

blog.mah-lab.com

ただし、上記の記事は2013年くらいので、最近Herokuの仕様が変わって、無料枠が変わったのでそれは注意です。

tattii.hatenablog.com

30分で寝てしまうようになったのと、1日のうち最大18時間しか起動しないので6時間は確実に寝る時間が生じちゃうらしい(´・ω・`)かなしい。ただ、webとworkerの二つが使えるので、重たい処理はsidekiqとかで非同期処理させたりできて嬉しいです。

Heroku Postgresql :: Database

Ruby on RailsMysqlを使うならClearDBっていうアドオンをつかって、Postgresならこのアドオン。Heroku自体が標準のDBとしてPostgresをサポートしていて、いろいろと万能そうなので安直に今はこのアドオンを使ってメインのデータベースにはPostgresを利用しています。ただDBに関してはActiveRecordを使っているかぎりMysqlでもPostgresでも特に扱い方に違いはないので、完全にどっちを使うかは自分次第です。てなわけで、いろいろなサイトに載っている事ですが、二つのアドオンについての違いについておさらい。

ClearDB(mysql用) Postgresql :: Database(pg用)
容量 合計5MBまで レコード数10000行まで

ClearDB

ClearDBアドオンはHerokuとは独立したデータサービスが提供しているMySQLを使えるもの。基本的にHerokuにupしたものはFTPのように挙げられたファイルなどをk簡単に確認することはできないが、ClearDBを使ってHeroku経由で作成したデータベースにHerokuアプリケーションの外からアクセスすることができる。

アプリケーションの外からデータベースに直接アクセスできるので、MySQL Workbenchなどの各種コマンドを用いてバックアップの作成やバックアップのリストアが可能。

この記事を参考にしました。 Heroku データベースの管理(ClearDB アドオンによる MySQL の利用) - 君の瞳はまるでルビー - Ruby 関連まとめサイト

Postgresql :: Database

このアドオンもHerokuとは独立したデータベースサービスが提供してるので、Herokuとは無関係に単独でも利用することができて、Heroku外からアクセスすることが可能。

この記事を参考。データベースのバックアップやリストア、本番環境のデータをローカルに移行する方法とかが解説されている。実際に試してはないので動くかは確認していない。 Heroku データベースの管理 - 君の瞳はまるでルビー - Ruby 関連まとめサイト

Memcached Cloud

HerokuでMemcachedを使うアドオンで他にMemcachierというのがあるらしいけど、今回は無料枠で30MBまで使えるこのアドオンを使用。ただし、アドオン登録時にクレジットカードの登録が必要です。AWSも初期登録の時点でクレジット登録しなきゃいけなかったり、面倒くさい。一ヶ月前までクレジットカードを持っていなかったから昔はなんとも制限の聞いた中で開発をしていました(´・ω・`)b

フラグメントキャッシュやアクションキャッシュの保存先をHerokuがお勧めするdalliを使って、このアドオンを使って保存しています。導入の方法とかはheroku dev center本家を参考にすればいいかと。結構簡単です。

devcenter.heroku.com

New Relic APM :: Newrelic

サービスを作ってそのレスポンス速度とかいろいろな状態を監視してくれるNewrelicとHerokuのアプリを連携?してくれる感じのアドオン!

herokuで動くRailsアプリケーションにNew Relicを入れる - JanGaJan.com

こんな感じの記事を参考にNewrelicを入れると、Newrelicのサイト上で自分のアプリの時間ごとのアプリの状態を監視してくれます。無料枠だと、1日分しかログを残してくれないけど、たまに見たり、何にロードで時間がかかっているかとかチューニングするときにかなり役に立つはず!なので、入れるとたまに渋ります。まだ、そこまで恩恵は受けた気はしないですが。 あと、Newrrelicが定期的に自分のサイトを巡回してくれるらしいので、アプリが寝ないとかなんとか。なぜか自分のは寝ちゃうんですけどね(-_-) …zzzまたいつか見直そう。

今回のまとめ

Herokuを使ってなんとか無料枠で収めようとしているのですが、Postgresを使っているとレコード数の上限が10000で、すぐになくなってしまうので、色々とデータのありかたを考えさせられます。たとえば、ユーザの視聴ログなんかはREDISのリスト型を使って管理すると最悪消えても大丈夫だし、これも無料枠である程度使えるからいいよねーとか、これはこの前自分が変更した例ですが、今のサービスでユーザの趣向データを取っています。

たとえばpreferenceモデルに

#preferenceモデル

music: integer
sport: integer
learn: integer
play: integer

みたいにpreferenceモデルに音楽とスポーツと学習と遊びとかそういったデータを保存するときにこうやって4つのままやってもいいけど、配列とかにしたらもっと簡単に格納できるよなーとか。postgresでは配列型というのが推奨はされてないけど、定義できるみたい。でも、配列型はクックパッドさんとかが、遅いし使うなーとか言ってたきがするのでこれは使わない。こういったシンプルなデータの集まりだったら、何かbodyカラムかなんか適当に作ってやって、それを文字列型にして、"12,34,56,78"みたいな感じにcsv形式で入れてやれば、このcsvはparse_csvという関数を使えばすぐに配列型にできるし、一気に簡潔にかけるようになるので、色々工夫のしがいがあって楽しいです。

ちょっと長くなってきたので、今日はここまでで。後半はまた後日にまとめます。

学生githubソースコードコンテストに応募したり、勉強会のMTGしたりほのぼのな1日

https://hasigo.co.jp/wp-content/themes/hasigo3z/img/sourcecon/header_logo.png

こんばんは、朝がとてつもなく苦手なぽこひでです。

最近のマイブームはゲーム実況のyoutuberの弟者さんで、こうしてブログを書いてる今もその人のバイオハザードの実況動画をみています。このゲームやったことないけど、みてるだけでなんか楽しいし、ショーンKなみにいい声なのでなんか良さげです(o^ω^o)

今日は特にインターンもバイトもなく、ただ1日予定をこなしてました。今度は頑張って名古屋を盛り上げたいな!ってことで4月17日に最初の勉強会を開くことになっったので、同じ学年の子と知るカフェで話し合いをしてました('-')

学生エンジニアだけじゃなくて、学生デザイナーもあつめて勉強会とかハッカソンしたいよね!みたいな感じで今年がんばっていきます(・∀・)b

あとは、なんかこの前Twitterで見かけたサイバーの子会社のハシゴっていう会社が学生限定にgithubソースコードのコンテスト!みたいなのがあったんで、あわよくばよ思い応募してみました。その一次選考が通ったので、そこのCEOの方と面談してきました。面談っていっても、すごいラフに話せて楽しかった(・∀・)イイ!!ね

GitHubソースコンテスト

それとこれが自分のgithub垢なのでよかったら、みてみてください。大した垢ではないですが、去年の夏休みからちょこちょこコミットして頑張って草はやしてます。

ぽこひでのgihutb

久々に夕方からフリーになったので、名古屋駅に出かけて新しくなった名駅地下街ふらふらしながら、店に入ったら最近はまってるアプリでチェックインしてコイン稼いでー、、、帰りました笑

そのアプリは、もしかしたら有名かもだけど、Swarmってアプリで、foursquareってサービスから派生したアプリで、駅とか店とかにチェックインしたらコインとかバッジとかがもらえて楽しいいーってゲームです。UIが個人的にすごい気に入ってて、チェックインしたあとのコインがバラバラーって落ちる感じとかまたチェックインしたい!って思わせる感じが勉強になるので面白いです。

家に帰ったら、気づいたら寝てて少し今開発中のウェブサービスちょこっといじって、現在に至るみたいな感じです。明日は朝からサークルで新入生向けのサービスを1日で作る身内ハッカソンなので、辛いですが頑張ります(´・ω・`)b

てな感じのほのぼのな1日でした。それでは(゚▽^〃)ノシ

初学者がWordpressでyoutubeの動画をレスポンシブに自動でしてみた。

http://zaitaku-hukugyo-net.com/wp-content/uploads/2014/12/Wordpress.jpg

どうも Wordpress歴2日のぽこひで です(・∀・)b

今やっていることが、あるブログのSEOをしっかりして、集客率をどう上げるかー?みたいなのをやってる感じで昨日はタイトルの構成を変えたり、初心者ながら細々と頑張ってます。そのブログがyoutubeの動画一つごとに一記事かいて発信してるみたいな感じで、内容をかなりぼかしましたが、各記事に必ずと言ってもいいほどyoutubeの動画が貼り付けられてるのでそれをレスポンシブにしてみようと思います。

最初の僕

youtubeのiframeをレスポンシブにするなんて簡単やんけ」

「iframeをブロックで囲んでやってそれを4:3とかの比率にして中身100%にすればええやん。」

<div class="iframe_wrapper">
  <iframe ....... ></iframe>
</div>

.iframe_wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.iframe_wrapper > iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

「これで一発やん?」 と思っていたら...

このブログ、初心者が更新するんですよね。

初心者がわざわざ記事投稿するときに

<iframe ....>

</iframe>

すら書いてくれない。ましてや、divでclass付きで書いてくれなんて頼めたもんじゃない。youtubeのリンクを直張りのときもあるくらい。というわけで早速迷いました(ー'`ー ; )

「よし!javascriptで動的にiframeタグを見つけてそれをclass付きdivで囲んでやろう!Σ(・∀・ 三 ・∀・)コレハキタ!」

ググる...

「どうやってWordpressに自作javascript入れるん。。無理(´・ω・`)」

てなわけで色々悩んで、とりあえず記事部分を出力してる部分を見つけるかーって適当に管理画面のphpファイルを探していたら見つけた!この辺は玄人はどうやって見つけてるかわからないけど、初心者だったので初心者なりに、記事ページを囲んでるclass名を適当に覚えておいて各phpファイルを開いてctrl + f で文字列検索して見つけました。面倒だよね。早く構造理解します。。

早速そのソースコードを読んでみると... 

「あれ?なんか the_content()って入力してる部分じゃね?」ってなったので、キタ━━(゚∀゚)━(∀゚ )━(゚  )━(  )━(  ゚)━( ゚∀)━(゚∀゚)━━!!!

たしか、get_the_content()で記事の中身を取得できるから、その中身をゴリゴリPHP書いて正規表現でiframeの場所を見つけて、それをdivで囲んじゃおう!よーしやったれー!

<?php
  $content = get_the_content();
  // ここでcontent内のiframeをdivで囲む作業
?>

<?php echo $content; ?>

「これでいいだろ。更新 → ブラウザリロード。。。(;  ̄ェ ̄)んっ?」

...

さっきまでなんか文字の大きさちっさくなった。なんでや。

ググる...

the_content関数にはいろんなfilterがかかってるらしく、ただの文字列をpタグで囲んでくれたり、youtubeの直張りリンクを勝手にiframeの埋め込み形式にしてくれたりするらしい!

「なんやねん!それ!初心者に優しいやん!!あれ?これってことは、昨日やってadd_filterで新しく追加すればいんじゃね?」

てなわけでかきました。

<?php
    add_filter ('the_content', 'the_custom_content', 9);
    function the_custom_content($content) {
        $pattern = '/(<iframe .+?><\/iframe>)/';
        $replace = '<div class="iframe_wrapper">${1}</div>';
        return preg_replace($pattern, $replace, $content);
    }
?>

はいーこれでなんとか完成しました。なんかadd_filterで関数にfilterをかけても、その実行順序がどう決まってるのかはよくわかんないけど、入ってきた$contentを見てみるとすでにiframe化されたのでラッキーと思いながら、iframeを見つけてやってそれをシンプルにdivで囲んで返してるだけ。これでdivで自動で囲めたのであとは最初に書いたcssを適用させたら...レスポンシブになりました!!

ていう地味に嬉しかった話です。まだ自分のwordpressスキルが低すぎて発信するほどの気づきが得られないけど、初学者っぽい気づきはちょこちょこ得られるからやっててなんか楽しい。