参考になるサイト

dataTablesとグラフの連携
http://yohshiy.blog.fc2.com/blog-entry-204.html

Geeklogサイトで404をビジュアルなエラー画面で表示する方法：

1. .htaccessに１行を追加

ErrorDocument 404 /404.php

2. ビジュアルなエラー画面を静的ページ 404 をid 404 で作成。

もしこれで動かなければ、/system/lib-custom.css で custom/custom_handle404.php　を呼んでいないはずです。 その場合は追加してください。

プログラムソースはivywe版パッケージをGitHubからどうぞ。

http://github.com/ivywe/geeklog-ivywe/ extended:system/custom/custom_handler404.php

さらに、TOPページへ自動遷移させたい場合は、以下をheader.thtmlのhead内に記述してください。

<?php if( strpos($this->get_var('page_title_and_site_name'), '404 Error') !==  false ){ ?>
<meta http-equiv="refresh" content="3;URL={site_url}">
<?php } ?>

UIkit のModalを初期表示する方法

modalの記述のあとに以下のcodeを追加。

<script type="text/javascript">
$(function(){

  $(document).ready(function(){
   $.UIkit.modal('#modal').show();
  });

});
</script>

Geeklog/coreからforkしてプルリクする方法です。

forkする

# forkして、GitHub Desktopでプルリクエスト用にブランチを作成する。かならずブランチを作成すること！masterはさわらない！

masterを更新する

# GitHub Desktopでブランチをmasterに変更してShellを開く

# 新しくFork元のリポジトリにupstreamという名前をつけてGeeklogを追加（一度設定すれば再設定不要）
$ git remote add upstream https://github.com/Geeklog-Core/geeklog

# upstreamからpullして最新を取得
$ git pull upstream master

# あるいは、以下の２過程を行う。
# fetch
$ git fetch upstream
# merge
$ git merge upstream/master

# GitHub Desktopでブランチを開発中のブランチに切り替えて完了。

プルリクエスト

# コミットが完了したら、github.com にてプルリクエストを送る。

作業用ブランチ等不要になったブランチを削除する

# ローカルブランチの一覧を表示する
$ git branch

# HEAD にマージしたブランチを削除する
$ git branch --delete foo
# マージしたかどうかを問わずに削除する
$ git branch -D foo

# リモートブランチの一覧を表示する
% git branch --remote
# ローカルブランチとリモートブランチの一覧を表示する
% git branch --all

# リモートブランチを同期させてリモートのブランチを削除
# GitHub DesktopのSyncを実行

フラットアイコンダウンロードサイト
http://www.flaticon.com/

有料会員登録すればcreditを外すことも可能です。

動画や画像にかぶせるドットパタンを作成する便利なサイト
http://www.patternify.com/

Base64 CodeやPNG形式をダウンロードできます。

Geeklog にSocial buttonを追加する方法はこちら。

header.thtml:

<meta name="twitter:image:height" content="400"{xhtml}>
<meta name="twitter:image:width" content="500"{xhtml}>
<meta name="twitter:url" content="<?php echo htmlspecialchars(htmlspecialchars(COM_getCurrentURL(), ENT_QUOTES, 'UTF-8'), ENT_QUOTES, 'utf-8'); ?>"{xhtml}>

footer:

<script>window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);
 
  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };
 
  return t;
}(document, "script", "twitter-wjs"));</script>

storytext.thtml, featuredstorytext.thtml

    <ul class="uk-subnav uk-flex-right uk-margin-remove">
      <li><g:plusone href="{site_url}/article.php/{story_id}"></g:plusone></li>
      <li><a class="twitter-share-button" data-url="{site_url}/article.php/{story_id}" href="https://twitter.com/intent/tweet?text={story_title}" data-lang="ja">Tweet</a></li>
      <li><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2F{!!autotag domain: !!}%2Farticle.php%2F{story_id}&amp;width=150&amp;height=20&amp;colorscheme=light&amp;layout=button_count&amp;action=like&amp;show_faces=true&amp;send=true&amp;appId={!!autotag conf:facebook_consumer_key !!}" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:20px;" allowTransparency="true"></iframe></li>
    </ul>

see more:

https://github.com/ivywe/Default/commit/81f6c0e8e95782d916f3f2f3cfd9098d7ce55b8f
https://github.com/ivywe/Default/commit/144634e42e9c42aff1cb5bcf83f08144c73bc268

Geeklog 2.1.1 Default theme download:
https://github.com/ivywe/Default

Twitter:

https://dev.twitter.com/web/tweet-button

Autotags plugin: name domain: content example.com

ソーシャルボタンをIllustrator形式、Photoshop形式で配布。
Sensational Fix
http://sensationalfix.com/flat-social-icons-eps/
Thanks!

Hover CSS3を配布。
Hover style:
http://ianlunn.github.io/Hover/

気になるサイト
http://eonreed.com/about/why-eon-reed/

Sensational Fixで使われているWordPressのテーマ
http://sensationalfix.com/flat-social-icons-eps/

Google Developerが提供しているPageSpeed Insightsを活用してサイトの表示スピードを改善する方法を紹介します。
なお、このPageSpeed Insightsでは、改善したソースを圧縮ファイルでダウンロードするサービスまで提供しています。

PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/

ターゲットのURLを入力して計測して改善しましょう。

主な対策を紹介します。

１．スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する


２．スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

Javascriptの読み込みは、ヘッダーではなく、フッターで読み込みます。

Geeklogの場合、テンプレートfooter.thtmlに記述。あるいは、functions.phpでjsファイルは、footer = 'true' にして、footerで読み込むモードにします。


３．画像を最適化する

４．CSS、JavaScript、HTML を縮小する

HTML圧縮：
Geeklogの場合は、コンフィギュレーションでHTML圧縮をONにします。ただ圧縮にCPU負荷をかけることになりますが、Googleからは褒めらるようです。試してみてください。


計測したページ向けに最適化された画像、JavaScript、CSS リソースは、ダウンロードできます。

画像、JavaScript、CSS リソース　をクリックして、圧縮ファイルをダウンロードして、サーバーのファイルと置き換えましょう。

なお、上記画像は、PageSpeed Insightsで表示された画像です。

CSSフロントエンドフレームワークについて

CSSやJavaScriptは、サイトごとに個別に開発するのではなく、フレームワークを開発してそれをすべてのWEBに最初から提供する方式が一般的になりました。WEB開発を高速化、効率化させる力強い味方になるためです。

CSSフロントエンドフレームワークは、MITなどオープンソースライセンスにて公開、開発が進んでいます。

最も有名なCSSフロントエンドフレームワークは、当初Twitterの開発者が開発したBootstrapです。

Foundationは、レスポンシブウェブデザインの機能を強化するなど、高機能さを売りにしたCSSフロントエンドフレームワークです。

対してUIkitは、軽量かつ高機能。名前空間(Namespace)の設計が秀逸で、すべての機能をバランスよく網羅して、配布サイトのドキュメントがわかりやすいのもポイントです。

UIkitに乗り換えたい７つの理由

１．名前空間（Namespace）が秀逸

UIkitでは、すべてのclass名、Javascript関数名の前置子として、UIkitを表す"uk-"が付いています。

Bootstrapなどフレームワークを追加すると起きがちなコンフリクトの心配をゼロにできることは、開発者の負担を大幅に軽減できます。

覚えやすいネーミングも、開発者のストレスを軽減できます。 styleの属性を覚えている開発者なら、UIkitのネーミングはすぐに覚えられるのではないでしょうか。