そこまでバズってないけど好きなYoutube動画やチャンネル
急に自分の好きなYoutube動画やチャンネルを共有したい欲求にかられた。数年ぶりにブログ書く。
一路青森!!お助け!?モンちゃん
まだYoutuberなるワードがなかった2011年に投稿されてたチャンネル(ヒカキンの初投稿と同じくらいの時期)。中国人のモンちゃんが青森の観光地や名物を紹介するチャンネル。レポーターのモンちゃんの愛らしいキャラと編集が良い。
中国人「モンちゃん」が青森県を動画で紹介、800万回再生! | 一般財団法人 自治体国際化協会(クレア)経済活動
この記事によると中国インバウンド対策のために青森県に委託されてFM青森が制作していたらしい。中国の動画サイトではだいぶバズってたらしい。
ゆきちゃんは一所懸命なだけ【感電パラレル】【日本エレキテル連合】
ダメよ~ダメダメのコントで一躍有名になった女性芸人コンビ「日本エレキテル連合」はテレビにはほとんど出てないが、普通に芸人活動は続けており独自の地位を築いている。ライブにはいつか必ず行きたい!
ライブに行かずに彼女たちのお笑いを垣間見れるのがYoutubeチャンネルで、小ネタから作り込んだコントをときどきあげている。かなり見られている動画もあるが、この「ゆきちゃんは一所懸命なだけ」は約1万回(2024年10月現在)しか見られてないにも関わらず、めちゃくちゃおもしろい。こんなカップル(それとも友達?そもそも橋本が演じてるのは女?男?)の微妙な会話をおもしろおかしく表現できる日本エレキテル連合すごすぎる。
まいちゃんといっくん 【コント】【日本エレキテル連合】【感電パラレル】
こちらも2024年10月現在の再生回数じゃっかん3万なのにパンチ力はんぱない。こんな子どものやりとりを表現できるのは日本エレキテル連合しかいない。俺はこれを見ると童心に帰る。
モーリーちゃんねる
F-1腹話術グランプリ2023 エンターテイメント部門優勝のひとみさんのチャンネル。一人で歌もピアノも腹話術もおこない更新頻度も半端ないパワフルなお方だ。普通にうまい腹話術は動画で見ると別録りっぽく感じてしまって逆に不思議な気持ちになる。
ブチ抜く吉田
ロックバンド トリプルファイヤーのボーカルである吉田さんの日常や身の回りのことを撮影してドキュメンタリー作品に仕上げた動画を上げているチャンネル。2024年10月現在、登録者数1万人ちょっとで動画の再生数も1〜2万ということは、このチャンネルの動画を見たい人だけが見てるってことなのかな。たしかに人を選びそう。そして俺は大好きだ。吉田さんだけじゃなくて出てくる人が絶妙に個性的でおもしろい。けっこうプライベート感のあるところを見せてくれるのでどうやって撮影してるのか気になる。編集も良い。
合宿免許で知り合った年の離れた20歳の若者と飲む微妙な空気感は映画でもなかなかお目にかかれない貴重なシーンだ。
オトコ中村
DIY精神あふれた料理チャンネル。それとオトコ中村のたたずまいがいい。自家製チーズの作り方を調べていたときに知ったが、自ら試行錯誤した経験をもとに解説していたのが良かった。取り上げる料理や方法が自分好み。
爆飲みサーヤ
最後に。ラランドのYoutubeチャンネルは超人気なのでこの動画の再生数はそこそこですが、自分的にはすごくインパクトがあったので紹介する。
短時間にこんなに酒を飲んだ人を見たことがない。ただただ感服してしまった。他にたくさん酒を飲む動画をあさったがこのレベルのものは見つけられなかった。しかもサーヤはこれだけ酒を飲んですぐにライブの舞台に立っている。氷の入った酒の氷を抜いて飲むという仕草もよき。
CSS expressions @ CSS昔話 Advent Calendar 2015
昔むかし、なななな、な、な、なんと、cssにjavascriptを記述し実行できる魔法のブラウザがありました。
そのブラウザは哀井伊と呼ばれ、人々からたいそう嫌われていました。。。。
ということで、CSS昔話 Advent Calendar 2015の9日目では、cssにjavascriptを記述できてしまうCSS expressionsを紹介します。
9日過ぎて10日になってしまいました。まだ書けてないです。ごめんなさい。執筆中です (;´∀`)
10日目はyoshiki katoさんです!
※一年越しに書きました。。。
レスポンシブウェブデザインについての箇条書き
・ウェブサイトがPCからアクセスされるよりも、スマホからアクセスされる時代になった
・だからウェブサイトを作るなら、基本的にまずはスマホを想定したウェブサイトを作るべし
・ウェブ制作の現場は、当たり前だがPCが普及し日常的にPCを利用するため、またこれまではPCサイトを作ってきたことから、ユーザーよりも従来のPCサイトのサイズ感にしばられすぎてる
・例えば、広いスクリーンでのレイアウトの調整を一生懸命することより、表示速度のチューニングの方が大事かもしれない(謙遜したが絶対大事)
・とにかくウェブサイトがスマホからアクセスされるという現実を、ウェブサイト制作側では見えてないか見えているけどそれが制作に反映されてない、ように僕には見える
・スマホサイトとPCサイトのデザインを分けて作ったものを、どう作るべきか
・対応デバイス・ブラウザは、レスポンシブならIEに関しては10以下は捨てていいと思う、Android2系も捨ててよし。捨てれない場合はできるだけシンプルなものを作りましょう。
・PC Windows7,8 IE11、Chrome最新、Firefox最新
・PC Mac Safari最新、Chrome最新、Firefox最新
・タブレット iPad iOS最新 Safari
・タブレット Nexus7,10等 Android最新 Chrome最新
・スマホ iPhone5s iOS最新 Safari
・スマホ iPhone6plus iOS最新 Safari
・スマホ XperiaA Android4 標準ブラウザ
・スマホ Nexus5,6等 Android5 Chrome最新
・一つのデザインをベースにして作るか、モバイル用と大きい用の二つのデザインをベースにして作るか
・二つのデザインをベースにしても、スマホなら320px〜768px、大きい768px〜を意識して作る
・イメージとテキストの組み合わせたもののバランスが難しい。イメージとテキストを別々にしてコントロールした方がいい。
・タッチデバイスに配慮する(リンク、ボタンを大きめに、hoverでしか情報が表示されない表現は避ける)
・アニメーションを多用したリッチなUIは昔ほどではないにせよ大変です。非力なスマホだと快適に動かなかったりバグが発生したり。端末やOSやブラウザによってはリッチな表現を切ることを想定して設計することが必要。
・スクロールに連動してアニメーションさせるとかはタブレットやスマホは今でも難しいかな。
・fontawesome等のアイコンフォントは使い勝手がいいよ。
・ベクターグラフィックはイラレファイルで、写真等は必要ならばモックとは別ファイルで高解像度のものを用意して欲しい。
・写真の角丸・マスキングはcss等で処理した方がいい場合がある。
・静的なモックに対しての検討だけでなく、コーディングしてブラウザで確認できる段階での検討改善のプロセスがより必要かな
・デザインを作る → 主要なページ・パーツのコーディングする → ディレクター・デザイナー・コーダーでレビューする → 修正する → 他のページのデザイン・コーディングする
・二つのデザインをベースにした場合、ワンソースかソースを分けて作るべきか
・激しくレイアウトが切り替わったり、特殊なリッチUIがあると、ソースがどんどん複雑になる。分けた方が無難。単ページとか期間限定のサイトとかなら大丈夫。
・ソースを分けてサーバーサイドで切り替えることは問題ない。一つのURLでスマホPC共に同じコンテンツを提供することが大事なポイント。
・二つのデザインをワンソースに落としこむことの大変さ
・パーツパーツによって、PCスマホ共用htmlにするか、PC用htmlとスマホ用htmlを分けるか、悩ましい
・htmlやcssが複雑になりがち
・jsが絡んでくるとさらに複雑になる
・悩まずに、PC用htmlとスマホ用htmlと完全に分けると、すっきりするが、ファイル容量約二倍(これするならソース分けた方がいいのでは。。。)
・レスポンシブサイトを作るなら、マルチなスクリーン環境に耐えうる拡張性のある一つのデザインを作ろうとして欲しい
・マルチスクリーンに耐えうるかどうかなんて、直感的な部分よりも、htmlとcssの理解度が大事な気もするので、結局コードを書けないとデザインできない気もする
・作るサイトが何が目的でどんなコンテンツをどのように提供するといいのか。結局それが大事。レスポンシブデザインは瑣末な問題。
バニラの歌
デイリーポータルZのギャルのコールでいいこと言うという記事があった。
渋谷や新宿を女性向け求人サイトの広告トラックが走っている。サイト名を女の子がコール風に歌っているのだ。実はあれが大好きである。
ということで、歌をいくつか作っていた。
コール「天は人の上に人を造らず人の下に人を造らず」 - YouTube
僕も大好きである。いや何となく気になっていた程度だが、この記事によって大好きであること気付いた。
以下が記事の元ネタになってる歌である。
Singing truck in Tokyo - YouTube
( ・∀・)イイ!!
特定の要素以外で発生したイベントをキャッチする(jQuery Advent Calendar 2014 jQuery)
jQuery Advent Calendar 2014 の6日目の記事です。
空いていたので書きます。
特定の要素で発生したイベントで処理行う場合は
と書きます。普通ですね。
特定の要素以外で発生したイベントで処理行う場合は、こんなふうに書けます
解説
documentにイベントリスナー貼ると、どこでイベントが発生してもキャッチできます。
(バブリングするイベントの場合ですが。 イベントバブリングについて解説した記事)
そしてイベントオブジェクトからイベント発生元の要素を取得できます。
その要素自体またはその要素が指定セレクタ内かどうかは、.closest()メソッドで簡単に判定できます。
ドロップダウンメニューみたいなUIの閉じる処理、それ以外がクリックされたときは閉じたいけど、操作不能にはしたくないときとかで使ったりします。
調べてみたらjQueryUIのSelectmenuも同じふうに閉じる処理書いてます。
以上です