東港研究所給湯室

　CMSではWordPressが一般的だが、本ブログは国産のFreoを使用している。
WordPress、Freoのどちらも編集にはオープンソースのTinyMCEを使用している。
WPのGUIは自分で簡単に編集できるが、Freoの場合は少し工夫が必要になる。

クイックツールバーを追加

　今回は、クイックツールバーを追加してみた。編集時に文字をドラッグすると、自動で必要なツールバーが展開するというもの。
リンクや見出しなどを付けるときに役立つ。

TinyMCEの公式ドキュメントをあさるとあっさり出てきた。プラグイン化されているので、呼び出すだけのようだ。

Quick Toolbars plugin

.jsのコード修正

tinymce.initが格納されているファイルの一部を次のうように修正するだけ。
Freoの場合は、/js/admin.jsに入っています。

plugins: [
        'advlist lists link image charmap preview anchor hr nonbreaking searchreplace visualblocks code fullscreen insertdatetime media table contextmenu textcolor pagebreak help'
    ],

プラグインに「quickbars」を追加

plugins: [
        'quickbars advlist lists link image charmap preview anchor hr nonbreaking searchreplace visualblocks code fullscreen insertdatetime media table contextmenu textcolor pagebreak help'
    ],

クイックツールバーは便利だった

修飾したい文字をドラッグするとこんな感じでGUIが展開します。

意外と便利な機能だわ。

imageが小さすぎて見づらかったので、ソースを覗いたらwidth=30だった。

ってことで拡大してみる。

ちなみに、インフレーム版（iframe_media.html）と通常版？（media.html）がある。

今回は編集作業用だけってことで、インフレーム版だけを修正してみた。

該当するファイルはこちら。
/templates/internals/admin/iframe_media.html

95行目

<td><!--{if $file.width and $file.height and !$restriction}-->・・・・・・・ width="30" /></a>

↓

<td><!--{if $file.width and $file.height and !$restriction}-->・・・・・・・ width="200" /></a>

とりあえず200にしてみた。

かなり見やすくななりました。

google検索を導入してみたが、導入直後から#gsc.tab=0が表示されるようになった。
不要なものが着いていると、気持ちが良いもんじゃないので非表示にしてみる。
スマホだとあまり気にならないと思う。

Programmable Searchの設定を修正する

「#gsc.tab=0」の修正方法は割と簡単だった。

カスタム検索エンジン　→　修正するカスタムエンジン　→　検索機能　→　詳細設定　→　ウェブ検索の設定　→　検索結果の閲覧履歴を無効　→　保存

注意点

googleの設定で忘れがちなのが、「保存」をクリックすること。
まあ僕だけかもしれないけどｗ

PHPを使ったさくらサーバーへのアップロードする場合、ファイルのサイズに制限があるので、最大サイズを変更してみた。

　このブログはCMSとしてfreoを使っていますが、WordPressも同様なので、アップロードのファイルサイズに困っていたら試してみてください。

さくらサーバーの情報を調べてみる

調べ方についてはメモ帳に　<?php phpinfo() ?>　と書き込んで　○○.php　で保存してアップロード。ブラウザで

https://自分のドメイン/○○.php

と入力してアクセスするだけ。

ファイルの上限が2MBだった

　契約してるさくらサーバーはファイルの最大サイズの上限が低いと思っていたが、調べてみたら2MBだったｗ　スタンダードプランだからそうなのか？

んでもって、送信上限が8MB

2MB以上のファイルをアップロードしたいときは、FTPで送信ししてたんだよな。
スマホやタブレットでアップロードを行う場合は、さくらサーバーのWeb版のコントロールパネルを使っていた。

さくらサーバーのphp.iniを修正してみる

さくらサーバーのコントロールパネルにログインして

スクリプトの設定　→　php.ini設定　をクリック

とりあえず、30MB、20MBに設定してみた。

post_max_size = 30M
upload_max_filesize = 20M

書き込んだら「保存する」をクリック

再度　https://自分のドメイン/○○.php　に接続して次の項目を確認する。
ctr+f　で検索すると早い。

post_max_size
upload_max_filesize

それぞれ30MB、20MBと表示されていれば成功です。

快適なった。

ブログを編集していると、画像の処理が面倒なことに気がついた。

メディアファイルが増えるにつれて、最新画像が下へ下へと行ってしまう。
最新画像を上に表示するためには、その都度更新日時をクリックしなけれならない。

地味に面倒なので、デフォルトで最新画像が上に表示されるようにしてみた。

コードを修正してみる

フォルダ

/js/の中にある.jsファイルをそれぞれ次のように修正する。

インラインフレーム用の修正方法

iframe.js

11行目

$(document).ready(function() {
    //メディア管理
    $("#media").tablesorter({

    sortList :[[1,1],[0,1]],

左メニュー中段の修正方法

admin.js

16行目

$(document).ready(function() {
//タグ入力
  $("#tag").jTagging($("#taglist"), ",");

    //メディア管理
    $("#media").tablesorter({
    sortList :[[1,1],[0,1]],

更新日時を降順で表示することができました。

応用してみる

sortList :[[1,1],[0,1]],

[1.1]　→　データの2番目を降順で並び替え
[0,1]　→　データの1番目を降順で並び替え

と行った感じで設定することができます。

参考にしたサイト

http://alphasis.info/2011/07/jquery-tablesorter-sortlist/