タイトルの通り比較しようとしてfullPage.jsからみた。
https://alvarotrigo.com/fullPage/
DocumentやDemoや有料のExtensionを見ていくと。
ほとんどなんでもできそうで比較せずにこちら採用で.orz.
情報を探してましたが散乱していて大変だったのでまとめてみました。(ツッコミなど歓迎)
いきなりですが結果Youtubeのiframeplayer apiが結局よかった。
この方法がお手軽でよいかも。以下のJSのライブラリが簡単。
mp4を直接使う方法などいろいろ見ていたのですが、結局 videoタグ/APIでできることは、YoutubeAPIでもできそうで、ソースを見ると、モバイルブラウザの判定eteもしっかり実装されているので、結局のところこちらを使うことにしました。
Modernize Your Site: Building a YouTube Video Background
https://designmodo.com/demo/videobackground/
以下、Webで使える動画形式などの条件
| 条件 | 方式など | メモ |
|---|---|---|
| ファイルフォーマット(コンテナ) | MPEG4 | (拡張子が.mp4) |
| 動画の圧縮形式 | H.264 | 昔はFirefoxがNGだったけど今はOK |
| H.264のProfile | high profile ( or main profile) | 細かく検証できて無くサイトを調べているとhighprofileでも再生できている箇所が多かった orz.. |
| H.264のレベル | 3.1 | (4でも行けそうだけど。ちょっと検証不足。) |
| 音声 | 無し | これはモバイルでほとんど自動再生ができないため自動再生の場合は無し |
私は、黒羽製作所さまの“真空波動研Lite” を利用させていただきました。
生産物 黒羽製作所
http://kurohane.net/seisanbutu.html
H.264 Wikipedia
https://ja.wikipedia.org/wiki/H.264
動画コーデックの種類と違い(H.264･VP9･MPEG･Xvid･DivX･WMV等)【比較】
http://aviutl.info/ko-dekku-tigai/
HTML5 の audio 要素と video 要素でサポートされているメディアフォーマット
https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats
Android/iOS同時対応動画をエンコードする心得
http://qiita.com/yuya_presto/items/9fed29296dbdc7fd1d5d
Supported Media Formats | Android Developers
https://developer.android.com/guide/topics/media/media-formats.html
番外(動画GIFをという話) 【Web制作】スマホのブラウザでも動画を自動再生する方法
http://www.groovoost.com/blog/web/play-video-sp
Androidで再生できる動画フォーマットを調べてみた Zenfone3編
https://www.timbreofprogram.info/blog/archives/1192
はたして iPhone は iOS 10 なら動画を自動再生できるのか
http://qiita.com/haribote/items/ef7ec97ca059eeb6d9ae
iOS10 Mobile Safariにおけるビデオの自動再生
http://qiita.com/hayakix/items/4c841ea76eab70a66e91
AndroidとiOS両方に対応するならmp4を使う
http://qiita.com/yuya_presto/items/9fed29296dbdc7fd1d5d
Can I use… Support tables for HTML5, CSS3, etc
https://caniuse.com/#search=h264
iPhone Safariで動画をインライン再生する方法
http://qiita.com/hadakadenkyu/items/75162099d0bf7cdcfdc7
スマホでの動画インライン自動再生まわりについて調べたことまとめ
http://kimagureneet.hatenablog.com/entry/2016/10/23/020054
Modernize Your Site: Building a YouTube Video Background
https://designmodo.com/demo/videobackground/
デンソー ブランドサイト
https://brand.denso.com/ja/
Javascriptでクリックイベントだとスマホで反応がおもいので、タッチイベントと、クリックイベント両方を実装する方法。
touchstartイベント後にstopPropagation()でイベントフローをストップします。
var showSmartPhoneMenu = function (e) {
e.preventDefault();
var $target = $(e.currentTarget);
$target.toggleClass('on');
e.stopPropagation();
};
$('#menuBtn').on('touchstart',showSmartPhoneMenu );
$('#menuBtn').on('click',showSmartPhoneMenu);
emmet(旧zen-coding)のbemフィルターと言うものがあるらしい。
linuxのコマンドふうに パイプでつなぐみたい。
.media-box>.-img | bem
PhpStormで使ってみようと、環境設定パネルをみると。ありました。
早速チェックを入れて使ってみます。
っと、パイプでつなぎ忘れたのですが、こちらは、パイプで繋がなくても自動でBEM認識みたいです。
こっちのほうが何かと便利そうですね。
最近はWeb界隈はIllustratorを使うことが多いのかな、ずーっとPhotoshopを使うことがなかったのですが(なにかFlashが流行ってた頃がWebでは最盛期だったようなきもする。)
久しぶりに再開っ！ Photoshop、元は写真業の会社にいたこともあり、デジタルの画像処理ソフトで一番触っていかもなのですが、フロントエンドエンジニアとして最近はもっぱらイラレでした。
最近のイラレはアセットパネルへドラッグしてどんどん物を移動して一括でバリエーションも含めて書き出せてとても便利、昔つかっていたスライスには戻れない感じでかなりスムーズに作業ができるようになってきています。
Photoshopはアセットの書出しパネルがなかったので、旧来のスライス切ってからかきだす方法ではつらいなとおもって情報あさっていると画像アセットの生成といのあがあるようなので、使ってみたら便利でした。
まずは書き出すレイヤーを統合するところから(このあたりはレイヤーに基づくスライスを作るのとほとんど一緒、Photoshopの書出しの肝かなとも思う。
「書き出すパーツを１レイヤーにまとめる。」
ってことをします。ここは、選択ツールで範囲指定でさっとかこって、Cmd + Alt + E (winだと Ctrl + Alt + E )で元のレイヤーを残して統合(残しておくのが味噌)。
そして
そのレイヤーにファイル名をつけます。(png,jpgなど)
そのままファイルメニューにひっそりとある、生成から「画像アセット」を選ぶ。
すると psdファイルのとなりにアセットディレクトリができて、そのなかにレイヤーにつけたファイル名で書き出せます。(これはショートカットはもちろん割り当てたほうが早いです。)
あとレイヤーをいじっててもう一つ便利なのが、右クリックからpngでクイック書出しというものとか、書出し形式ってのもありました。(この辺はもう少し使い込んでみないとなんとも。
ですが、今のところ最速なのは画像アセットの生成っぽいのでしばらく使ってみたいと思います。
まずCustom Post Type UIを利用している場合は、
カスタム投稿タイプにアーカイブページを有効にする。
CPT UIの設定画面で有効にします。
以下のURL及びテンプレートを利用します。
//URL
http://{ドメイン名}/{カスタム投稿のスラッグ名}
//テンプレート名
archive-{カスタム投稿のスラッグ名}.php
(例)カスタム投稿がmenuの場合
//URL
http://{ドメイン名}/menu
//テンプレート名
archive-menu.php
パーマリンク設定は ‘/%postname%’ にした例です。
//URL
http://{ドメイン名}/{カスタム投稿のスラッグ名}/{投稿のスラッグ名}
//テンプレート名
single-{カスタム投稿のスラッグ名}.php
(例)カスタム投稿がmenuの場合
//URL
http://{ドメイン名}/menu/yakiniku
//テンプレート名
single-menu.php
以下のURL及びテンプレートを利用します。
//URL
http://{ドメイン名}/{カスタム'タクソノミー'のスラッグ名}/タグのスラッグ
//テンプレート名
taxonomy-{カスタム'タクソノミー'のスラッグ名}.php
(例)カスタムタクソノミースラッグmenu_typeの場合
//URL
http://{ドメイン名}/menu_type/meet
//テンプレート名
taxonomy-menu_type.php
なぜかエラーがでいて、 みたら@mediaの外側はダメらしい。><
You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.
From "@extend .ttl-simple" on line 965 of sass/main.sass on line 90 of sass/main.sass
[追記] ※解決しました。重くなるタイミングなどしらべていくと、マルチバイトの文字が増えるx4Kディスプレイつかっているときに多い。
まず、Cmd + Shift + A で検索ウィンドウをだす。
switchと入力してSwitch IDE boot JDKを選ぶ、
1.8.0_152から、1.8.0_131に変更(決定して)再起動。
これで現在は重くなることがなくなったようですしばらくつかってみます。
PHPStromがまたもっさりしてきて使いモンにならなくなってきた。
特に、Dashを使ってスニペットを挿入する場合などが酷くて、コーディングがつらすぎる状態。。(涙
(※設定がすべてきえるので、メニューの File > Export Settings しておくといい)
以下のファイルを削除して再起動してInport Settingsで読み込む
~/Library/Preferences/PHPStorm**
メニューのヘルプから設定可能です。
設定値変更前。
-Xms128m
-Xmx750m
-XX:ReservedCodeCacheSize=240m
変更後
-Xms512m
-Xmx2048m
-XX:ReservedCodeCacheSize=480m
以下のページを参考させてもらいました。
PhpStormのメモリ使用量を増やして高速化
http://www.karakaram.com/phpstorm6-memory-size-up
Xms
起動時のヒープサイズ。起動時のメモリ割り当て数。
Xmx
最大ヒープサイズ。この値までヒープは拡大する。Xms と同じ値にするとヒープサイズ調整時のオーバーヘッドがなくなり、パフォーマンスが向上することがある。
XX:MaxPermSize
クラスファイルをメモリ上にロードするための領域として使用される。一般にこれらの値が小さいとGCが頻発するので大きめに設定する。
ReservedCodeCacheSize
予約コードキャッシュサイズ。実は、何に使っているかよく分からない。
メニューから Invalidate Caches / Restartを選んで再起動。
設定パネルのEditor > Inspections でインスペクトを無効化。
設定パネルのプラグインからチェックを外す。
隠し設定パネルを開く (Cmd + Alt + Shift + / )
Recistoryを選択し、editor.zero.latency.renderingにチェック(私の環境は事前に入れていたか覚えてないが、入っていたデフォルトで入っているのかもしれない。)
設定パネルの Editor > General > Breadcrumbsのチェックを外す。
設定パネルの Editor > Live Templatesのチェックを外す。
※こちらやっぱり無いと不便だったのであとでチェックいれなおしました。
ウィンドウの横や、下などにあるウィンドウを開くタブを非表示に(右クリックして、Remove from sidebarを選択
設定パネルから、なにかCPU食いそうなものを無効に
計測などはしていないので、個人的な感覚値なのですが、
４、インスペクトをすべて無効化
が効果があったような気がします。
基本的なタイピングでは問題無いレベルになりました。
欲を言うとDash(スニペットアプリ)での自動で入力する際に少しだけ遅れる感じをどうにかしたいのですが、どうしても遅れがある状態です。
なにか他にも、情報あれば教えて頂けると助かります。m(_ _)m
まずはお名前.comのDNSレコード設定でipv6のレコードを追加。
メニューのDNS関連機能の設定をえらぶ。
変更したいドメインを選んで次へ。
DNSレコード設定の箇所の[変更する]ボタンを押す。
追加の箇所で、TYPEで、AAAA(ipv6)を選んで、VALUEにipv6のアドレスを入力して追加ボタンをおす。
その後は、確認画面へ進んで確認ごに設定して完了。
ここからは少し反映まち。
% nslookup
> set type=AAAA
> yama-lab.com
Server: 8.8.8.8
Address: 8.8.8.8#53
Non-authoritative answer:
yama-lab.com has AAAA address 2001:e42:102:1801:160:16:199:118
Authoritative answers can be found from:
>
反映されていることを確認。
サポートページに手順がのっているのでそのまま勧める。
IPv6有効化手順(CentOS7)
https://help.sakura.ad.jp/hc/ja/articles/115000065981-IPv6%E6%9C%89%E5%8A%B9%E5%8C%96%E6%89%8B%E9%A0%86-CentOS7-
設定が終わったので確認
% ping6 yama-lab.com
PING6(56=40+8+8 bytes) 2409:252:90a0:1800:79e4:8629:868c:20a6 --> 2001:e42:102:1801:160:16:199:118
16 bytes from 2001:e42:102:1801:160:16:199:118, icmp_seq=0 hlim=53 time=35.822 ms
16 bytes from 2001:e42:102:1801:160:16:199:118, icmp_seq=1 hlim=53 time=32.799 ms
16 bytes from 2001:e42:102:1801:160:16:199:118, icmp_seq=2 hlim=53 time=32.887 ms
ブラウザのコンソールでも確認
無事もんだいなく。
感覚値では早くなった感じはないけど気分的にははやい感じに
Powered by WordPress & Theme by Anders Norén