ソーシャルボタンをGeeklogに追加する

Geeklog
投稿者: 表示回数1,274 印刷用ページ

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

PageSpeed Insightsを活用してサイトの表示スピードを改善する

Geeklog
投稿者: 表示回数757 印刷用ページ


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

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

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

主な対策を紹介します。

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


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

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

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


3.画像を最適化する

4.CSS、JavaScript、HTML を縮小する

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


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

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

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

BootstrapからUIkitに乗り換えたい7つの理由

Geeklog
投稿者: 表示回数5,219 印刷用ページ

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

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

CSS Front-end Frameworks with comparison
CSS Front-end Frameworks with comparison
CSS Front-end Frameworks with comparisonでは、世界中で使われているCSS フロントエンドフレームワークを比較して紹介しています。
CSS Front-end Frameworks
CSS Front-end Frameworks
フレームワークとして十分な機能を提供しているおもな3つのフレームワーク。
CSS Front-end Frameworks Bootstrap, Foundation, UIkit
CSS Front-end Frameworks Bootstrap, Foundation, UIkit

Bootstrap, Foundation, UIkitはそれぞれ以下のように特徴をアピールしています。

Bootstrap
Sleek, intuitive, and powerful front-end framework for faster and easier web development.
Foundation
Foundation 3 is built with Sass, a powerful CSS preprocessor, which allows us to much more quickly develop Foundation itself and gives you new tools to quickly customize and build on top of Foundation.
UIkit
UIkit gives you a comprehensive collection of HTML, CSS, and JS components. It can be extended with themes and is easy to customize to create your own look.

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

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

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

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

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

1.名前空間(Namespace)が秀逸

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

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

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

PDF各種変換、結合などのクラウドサービスサイト「smallpdf」

Geeklog
投稿者: 表示回数940 印刷用ページ
smallpdfは、PDFを変換、分割、結合などができる、スイスで開発されたウェブサービスです。

http://smallpdf.com/jp

smallpdf PDF結合サービス
smallpdf PDF結合サービス
PDFファイルを複数ドラッグするだけで結合されたPDFをダウンロードできます。
smallpdf TOPpage
smallpdf TOPpage
PDFの各種変換サービスを無料で提供しています。


PDFをドラッグするだけで、変換されたファイルがダウンロードできます。

提供しているサービス:
PDF 圧縮
PPT PDF 変換
PDF PPT 変換
JPEG PDF 変換
PDF JPEG 変換
Excel PDF 変換
PDF Excel 変換
Word PDF 変換
PDF Word 変換
PDF 結合
PDF 分割
PDF ロック解除

UIkitのユーザーグループ"UIkit Japan"をFacebook上で作成

おしらせ
投稿者: 表示回数684 印刷用ページ
UIkitのユーザーグループ"UIkit Japan"をFacebook上で作成しました。
https://www.facebook.com/groups/uikit.japan/
UIkitは、ビデオによるチュートリアルのページも追加され、WordPressのテーマも増えてきました。
軽量でオブジェクティブなUIkitは今後益々活用していきたいフレームワークなので、日本語での情報交換の場としてFacebookでグループを作成しました。
どうぞご参加ください。

Geeklogで初期設定しておきたい自動タグプラグインの便利な使い方

Geeklog
投稿者: 表示回数1,275 印刷用ページ

自動タグプラグイン(Autotags plugin)をインストールしたら、よくつかう自動タグを最初から用意しておくと便利です。そうすることにより、記事をテキストモードで記述しながらリッチなコンテンツを作成できます。

キャプション

caption
<div class="uk-text-bold uk-text-center">#0</div>
e.g.
[ caption:キャプション ]
Demo
キャプション

テキストのセンタリング

center
<div class="uk-text-center">#0</div>
e.g. [ center:センタリングテキスト]
Demo
センタリング

ドメイン

domain
www.example.com
 例) www.ivysoho.net ※Facebook widjetなどをテンプレートに記述する際に利用
e.g.
[ domain: ]

外部リンク

extlink
<a href="#1" class="ext-link" target="_blank">#2</a>
e.g.
[ extlink:http://example.com Example ]
Demo
Example

掲示板センターブロックを表示

forumcenterblock
PHPで置換にチェック
return CUSTOM_centerblock_forum ($p1);
※custom_centerblock_forum.php を設置してください。
ダウンロード:  GitHub
ファイル:/private/system/custom/custom_centerblock_forum.php /private/system/lib-custom.php

h2タグ

h2
<h2 class="uk-h2">#0</h2>
e.g.
[ h2:h2タグ]
Demo

h2タグ

h3タグ

h3
<h3 class="uk-h3">#0</h3>

h4タグ

h4
<h4 class="uk-h4">#0</h4>

pdf

pdfをページに展開表示

<div class="uk-margin-top uk-visible-large">
<a class="embed-large" href="http://www.example.com/images/library/File/#1" target="_blank" style="cursor:default; color: #444"></a> </div>

<div class="uk-margin-top uk-visible-medium">
<a class="embed-medium" href="http://www.example.com/images/library/File/#1" target="_blank" style="cursor:default; color: #444"></a> </div>

<div class="uk-margin-top uk-visible-small">
<a class="embed-small" href="http://www.example.com/images/library/File/#1" target="_blank" style="cursor:default; color: #444"></a> </div>
/vendor/jquery-gdocsviewer/に、GitHub の/vendor/jquery-gdocsviewer/以下をアップロード。
footer.thtmlに以下を追加
必ずjQuery本体をロードした後に挿入してください。

<!-- PDF { -->
<script type="text/javascript" src="{layout_url}/vendor/jquery-gdocsviewer/jquery.gdocsviewer.min.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
$(document).ready(function() {
  $('a.embed-large').gdocsViewer({width: 600, height: 600});
  $('a.embed-medium').gdocsViewer({width: 500, height: 500});
  $('a.embed-small').gdocsViewer({width: 300, height: 300});
  $('a.embed-large2').gdocsViewer({width: 600, height: 600});
});
/*]]>*/
</script>

テキストの右寄せ

right
<div class="uk-text-right">#0</div>

話題へのリンク

topic
PHPで置換にチェック
コンテンツは空白。


Favicon 自動作成サービスサイト

Geeklog
投稿者: 表示回数1,603 印刷用ページ

写真や画像から簡単に各種faviconを作成してくれるWebサービスはこちら。

Favicon Generator

256ピクセル以上の正方形の画像をアップロードして作成します。

iPhoneやiPad、Androidで使われるWebクリップ用のアイコンもこれで一度で作成できて大変便利です。

zip形式でダウンロードしたファイルをサーバーにアップロード。header部分に同梱しているhtml形式のソースを張り付けるだけです。Geeklogの場合は、テーマのheader.thtmlに以下のように、{site_url}{xhtml}タグを追加します。

<!-- Favicons Generated with favicon.il.ly -->
<link rel="icon" sizes="16x16 32x32 48x48 64x64" href="{site_url}/favicon.ico"{xhtml}>
<!--[if IE]>
<link rel="shortcut icon" href="{site_url}/favicon.ico"{xhtml}>
<![endif]-->
<!-- Optional: Android & iPhone-->
<link rel="apple-touch-icon-precomposed" href="{site_url}/favicon-152.png"{xhtml}>
<!-- Optional: IE10 Tile.-->
<meta name="msapplication-TileColor" content="#FFFFFF"{xhtml}>
<meta name="msapplication-TileImage" content="{site_url}/favicon-144.png"{xhtml}>
<!-- Optional: ipads, androids, iphones, ...-->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="{site_url}/favicon-152.png"{xhtml}>
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="{site_url}/favicon-144.png"{xhtml}>
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="{site_url}/favicon-120.png"{xhtml}>
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="{site_url}/favicon-114.png"{xhtml}>
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="{site_url}/favicon-72.png"{xhtml}>
<link rel="apple-touch-icon-precomposed" href="{site_url}/favicon-57.png"{xhtml}>