> カテゴリー「freo」の検索結果

エントリー

[freo向け]ブログに貼りまくったYouTubeを軽くする

  • 2014/09/28 13:47
  • freo

ブログで再生させようと、
Youtubeの動画を貼りまくっていると重くなります。
貼りまくってる人は重くなった経験はあるはず。
iframeでYoutubeから動画情報を取得するのに時間がかかるようです。

これが普通の共有リンクですね

<iframe width="680" height="383" src="//www.youtube.com/embed/PqJNc9KVIZE" frameborder="0" allowfullscreen></iframe>

ブログに貼ると↓感じになります。
まぁ普通ですね。YouTubeの共有リンクそのままですし。

img(画像)で表示しておき、
クリックされたらiframeに切り替えて、動画を再生させます。

<img src="Youtubeの動画サムネイルURL" width="表示させたいサムネイルの幅" height="表示させたいサムネイルの高さ" data-video="http://www.youtube.com/embed/動画ID?autoplay=1">

サムネイルURLがわからない場合は、
YouTube Thumbnail Generatorを使うと便利です。
最大サイズのサムネイルはhttp://img.youtube.com/vi/動画ID/maxresdefault.jpg
Youtubeからのサムネイルは使わず、自分で作った画像でもいいですけどね。
画像タグにdata-video=""をつけてるだけですし。

動画よりも下に以下のスクリプトを埋め込む。
freoのtinyMCEはjavaスクリプトを記事に入れようとすると勝手に書き換えられてしまうため、
templates\footer.htmlの</body>の直前あたりに以下を挿入。
footer.htmlをサーバーにアップロードしたら、
templates_cフォルダ内のキャッシュの削除もお忘れなく。

{literal}<script>
$('img').click(function(){
video = '<iframe src="'+ $(this).attr('data-video') +'" frameborder="0" width="動画の横幅" height="動画の縦幅"></iframe>';
$(this).replaceWith(video);
});
</script>{/literal}

記事に書き込む動画は以下のようになります。

<img src="http://img.youtube.com/vi/PqJNc9KVIZE/maxresdefault.jpg" width="680" height="383" data-video="http://www.youtube.com/embed/PqJNc9KVIZE?autoplay=1">

width="680"は私のブログが680px幅だからです。
maxresdefault.jpgは画像が大きい=ファイルサイズも大きい。
なのでブログの記事幅が小さい場合は小さいサムネイルを使ったほうが軽くなります。
サムネイルの大きさや動画の横幅縦幅については各自のブログで調整してください。

実際の設置例はこんな感じです。
サムネイル画像をクリックすると、動画に切り替わって再生されます。

別途jqueryを使用します。
freoはディフォルトでjqueryが使用されてますので、
特にいじってなければjqueryについては気にしなくて平気。

タグ貼り付け型コメントフォーム Disqus

新着コメントの表示について書き忘れてたので追加しました。

disqus.png

Disqus
http://disqus.com/

WEBサイトに掲示板型のフォームが設置できます。

URLに対して1つの掲示板が設置されるため、
ブログのコメント欄の代わりに使用できる。
コメント機能がないhtmlタイプのサイトにも実装可能。

OpenIDを使用して投稿可能。
ツイッターやフェイスブックでシェア可能。
匿名での投稿を許可することも設定できます。

スパム対策が楽。
ブログやWEBサーバーに負荷がかからない。
ブログのコメント欄より高機能。
画像をコメント内に貼れる。

メリットはこんなところじゃないでしょうか。

続きを読む

freoでCloudflareを運用

  • 2014/07/12 20:08
  • freo

cf-logo.jpg

07/12 : 星評価(view/1716)にリンクをしましたが、
星評価サービスが終わってるっぽいので該当記事の削除とリンクを外しました。

Cloudflare(以下CF)ってなんぞ?というところから。
freoの機能にキャッシュってありますよね。
機能としてはそれと同じです。
負荷のかかる処理をキャッシュとして保持し、
Webサーバーで行う処理数を減らして高速化。

CFはウェブサーバーと閲覧者の間に入って、
ウェブサーバーのデータをCFがキャッシュとして保存。
そのキャッシュを閲覧者に見せることで高速化してます。
freoのキャッシュ機能との違いは画像やcss等もキャッシュできる点です。

メリット : 無料で使える

有料に比べて機能制限されているものの、
個人的なサイトであれば無料でも十分すぎる内容。

メリット : 転送量が抑えられる

4GB/dayほどの転送量がCFを使うようになり、
500~800MB/dayくらいにまで激減しました。
画像を多用するサイトではかなり効果が出ます。

メリット : Webサーバーの負荷が下がる

上記とかぶる部分ではありますが、
CFのキャッシュで閲覧者にコンテンツを提供できるので、
Webサーバーへのアクセスが減って負荷も落ちます。

キャッシュする内容(設定)にもよるんですが、
画像以外に記事のテキストデータなんかもキャッシュできるため、
PHPやデータベースが重い場合は体感速度はかなり上がります。

メリット : サーバーが落ちてもキャッシュされていれば表示できる

CFにキャッシュがある場合はWebサーバーが落ちていても、
閲覧者にコンテンツを提供できます。

メリット : 不正アクセス対策が標準装備

ハッカーからのアクセスをシャットアウトできます。
特に何もする必要はありません。
個人的に拒否したい人を追加することもできます。
IPでブロックしたり、国全体でブロックもできます。

デメリット : WEB関連知識がある程度必要

独自ドメインの取得や独自ドメインの設定、
freoのテンプレート編集など、
ある程度Web制作関連の知識が必要になります。

続きを読む

freoの検索エンジン対策

  • 2013/12/01 04:39
  • freo

sitemap1.png

グーグル検索に登録されやすくするための手引書になります。

記事を書きました。更新しました。
ということをグーグルに知らせる手段であり、
登録されるかどうかの最終的な判断はグーグル依存です。

続きを読む

freoとWordpressを比較

  • 2013/11/25 18:02
  • freo

freo.jpg wp.jpg

freoとWordpress(以下WP)のブログ比較。
真っ先に候補に挙がるのはWordpress。
どっちがいいかわからない人はWPを選んでおけば間違いない。

freoのメリット

国産ブログのため、公式マニュアルが日本語で扱いやすい。

テンプレートがhtmlで作られているため、
cssやhtmlの知識がある人だと比較的簡単に変更可能。
デザイン的な変更が容易で個性が出しやすい。
html5に書き直したりもできる。
サイト全体に手を加えたい人には使い勝手良好。

創作サイト向けコンテンツ管理システムを謳っているだけあり、
漫画表示やpixivイラスト表示、ショッピングカートプラグインと
クリエイター向けの機能が用意されている。

プログラム内の著作権表示とライセンスの文章は削除できませんが、
テンプレートの著作権表示は削除可能。

どうしても欲しい機能があれば、有償にて制作依頼も可能。

続きを読む

ページ移動

  • ページ
  • 1
  • 2
  • 3

ユーティリティ

スポンサードリンク

検索

カテゴリー

新着記事

    新着コメント

    スポンサードリンク

    つぶやき

    スポンサードリンク