FlatPress.info

Information & blog

作成と修正の簡単アクセスの追加カスタマイズ

「作成と修正の簡単アクセス」として、利便性を追求してトップページの最下段に「最近に作成した記事」と「最近に修正した記事」を表示するようにしていたのですが、いろいろと動作を試してみると、スクロールした最後の行が上記の表示で見えなくなって困ることが発生しました。考えてみるとスクロール操作をし始めた瞬間、上記の表示はまったくのところ不要と言えますね。そこで、追加カスタマイズとして、スクロールをし始めたら、フェードアウトする(あるいはトップに戻るとフェードインする)ようにするのが賢いようです。(下図参照)

create-modify-access-ok-feed

 

表示部分のフェードアウト、フェードイン

表示部分については、div で領域を定義して、それの表示の仕方を CSS で制御することにしましょう。よって、以下のファイルに領域定義をしておきます。

 

<div id="findlast_pain" style="display:block"> <!-- on/off --> の部分に注目してください。

 

以前の修正を含めてこのようになりました。

/fp-interface/themes/leggero/widgets.tpl (一部を表示しています)
 {widgets pos=left}
<div id="{$id}">
<h4>{$subject}</h4>
{$content}
</div>
{/widgets}

</div>

<!-- FlatPress.info -->
<div id="findlast_pain" style="display:block"> <!-- on/off -->


<div id="footerX">
<span id="footerC">
    <!-- DEBUG
    <input id="idAtai" style="text-align:center; font-size:14px;" value="0" type="text" size="4" />
    -->
CREATE:
{foreach from=$fxs item=newerlist}
    {$newerlist}&nbsp;&nbsp;
{/foreach}
<br>
</span>
<span id="footerM">
MODIFY:
{foreach from=$findlast_file item=lastlist}
    {$lastlist}&nbsp;&nbsp;
{/foreach}
</span>


</div>
</div> 

 DEBUG の部分をコメントアウトすると、スクロールの移動ポジションの値が表示されます。このカスタマイズによって、スクロールをし始めてると消ええて、上部へスクロールを戻すと現れたり消えたりするはずです。なお、CSS の部分でその時間を調整できますので、以下を参考にお好み時間にしてください。

/flatpress.world/fp-interface/themes/leggero/leggero/res/common.css

#findlast_pain {
    opacity: 0;
}

#findlast_pain {
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
    opacity: 1;
}

スクロール量の判別とそれによるCSS設定のスイッチ

 スクロールの位置を知る手段は別途にJavascript を用意する必要があります。スクロール操作はサーバへは伝わらないので、それゆえにPHPのプログラムへは情報を伝えされないからです。そこで、以下のファイルを書きました。このファイルは PHP プログラムとしてインクルードさせました。

まずは、当該プログラムをこのように用意します。

/flatpress.world/APP/findlast/findlast-onoff.php
<html>
<head>
<body>
<script type="text/javascript" src="/../../fp-plugins/jquery/res/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
var x;
$(window).scroll(function () {
$("#idAtai").val($(document).scrollTop());
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
if ( scrollY > 500) {
  <!-- document.getElementById('findlast_pain').style.display = 'none'; -->
    document.getElementById('findlast_pain').style.opacity = '0';
} else {
    <!-- document.getElementById('findlast_pain').style.display = 'block'; -->
    document.getElementById('findlast_pain').style.opacity = '1';
}
});
</script>
</body> 
</html>

 次に、インクルード部分を説明します。

/flatpress.world/APP/findlast/findlast.php
<?php


function findlast_file() {
include_once('../../defaults.php');


// FlatPress.info
include_once('findlast-onoff.php');


$dirname = str_replace("APP/findlast", "", $dirname);
$dir = $dirname . "fp-content/content/";
date_default_timezone_set('Asia/Tokyo');

 デバッグ中の様子

ここでは説明のためにデバッグ画面を掲載しています。カスタマイズしたソース中にどこまでスクロールしたらオンオフするかの値がありますので、好みによって変更してもらえらばと思います。

findlast-onoff-debug

 

作成と修正を簡単にファイル操作する

「最近の記事」をアクセスすることで、最新の記事へアクセスすることは可能です。ただし、以前の記事(備忘録)を修正した場合、それは最新に投稿された記事ではないので、内容の再チェックをしようとすると何らかの方法で探り当てます。しかし、これが面倒なのです。特に、日誌をつけていて、思い出した項目を追加記入して保存すると、そのページは過去のどっかになりますよね。それを日付とかタイトルで探し出さなくてはなりません。つまり、保存すると「記事の管理」ページになりますが、次のページをめくらないと修正タイトルが見当たらなかったりするわけです。

そのため、修正した記事を常にどっかに表示さえておこうと思うようになりました。具体的な説明に入りますが、以下の二つが常に見えている状態を作ります。

  1. 最近に作成した記事(これは右ウィジェットに表示されているものと同等ですが、常にスクロールなしでみられる状態とします)
  2. 最近に修正した記事(実は、これが重要で、やはり修正不足があったなどの場合、アクセスが非常に楽になると思われます)

 

widget.tpl のテンプレートに以下を丸ごと追加しておきます。これによってトップページ最下段に固定した表示部分が現れるはずです。

/fp-interface/themes/leggero/widgets.tpl

<div id="footerX">

<span id="footerC">
CREATE:
{foreach from=$fxs item=newerlist}
        {$newerlist}&nbsp;&nbsp;
{/foreach}
<br>
</span>

<span id="footerM">
MODIFY:
{foreach from=$findlast_file item=lastlist}
        {$lastlist}&nbsp;&nbsp;
{/foreach}
</span>

</div

 

CSSファイルには以下を付け加えます。これによって、一番下に表示が固定されてきます。

/flatpress.world/fp-interface/themes/leggero/leggero/res/common.css
#footerX {
    position: fixed;
    width: 760px;
    bottom:0;
    background: #eef0ee;
    font-size: 75%;
    margin-left: -6px;
    padding: 0.1em 0.5em 0.1em 0.5em;
   border: 1px solid #486A3D;
}

#footerM {
    color: #b0421d;
}

#footerC {
    color: green;
} 

これらを適用してみると、下の矢印のところのようになりましたので、ここに「最近の作成ファイル」と「最近の修正ファイル」を表示させることにしましょう。

create-modify-access

次に、「最新の記事」の一覧のデータを用意してみます。もともと、「最新の記事」を表示してくれるプログラムは存在しているので、これに要件を付け加えるだけで済みました。 //FlatPress.info のコメントのところを2か所付け加えてください。ここでは8個分の最新記事を表示させているのですが理由として、まぁ、1週間分ぐらいの表示としておこう、そして8個以上ではファイル名の並びが1行ではいっぱいになってしまうと思われるからです。

/fp-plugins/lastentries/plugin.lastentries.php

    $count = 0;
    // FlatPress.info
    $fxscnt = 0;

    while ($q->hasmore()) {

        list($id, $entry) = $q->getEntry();

        $link = get_permalink($id);

        $string .='<li>';
        $admin = BLOG_BASEURL . "admin.php?p=entry&amp;entry=";
        if (user_loggedin()) // if loggedin prints a "edit" link
            $string .= "<a href=\"{$admin}{$id}\">[".$lang['plugin']['lastentries']['edit']."]</a>";
        $string .= "<a href=\"{$link}\">{$entry['subject']}</a></li>\n";

        // FlatPress.info
        if ($count < 8) {
          $smarty->append('fxs', "<a href=\"{$link}\">{$entry['subject']}</a>");
        }

        $count++;
    }

このように変更してみますと、表示が上手にされました。(ファイル名が長いと表示部分はずっと横に広がります)

list-create さて、残るは「修正」したファイル名を検索して一覧にする部分ですね。こちらは、少し手ごわいです。新たにプログラムを組む必要がありそうです。それを作ったとして、入れておくディレクトリも考慮が必要な感じです。なぜなら、今後のバージョンアップがあった場合、FlatPress のオリジナルのディレクトリ構成の外のおいておくべきなのかも知れません。ここでは、FlatPress/APP/findlist/ というディレクトリを新たに作成することにしました。ここにプログラムを作成(mkdir -p flatpress.world/APP/findlast/)して収容します。実際のファイルをお示しするとこのようになりました。

flatpress.world/APP/findlast/findlast.php

<?php

function findlast_file() {
//include_once('../../defaults.php');
include_once(ABS_PATH .'defaults.php');

// FlatPress.info
include_once('findlast-onoff.php');
//$dirname = dirname(__FILE__);
//$dirname = str_replace("APP/findlast", "", $dirname);
//$dir = $dirname . "fp-content/content/";
$dir = ABS_PATH . 'fp-content/content/';
date_default_timezone_set('Asia/Tokyo');

$iterator = new RecursiveDirectoryIterator($dir); $iterator = new RecursiveIteratorIterator($iterator); $file_list = array(); foreach ($iterator as $fileinfo) { // $fileinfoはSplFiIeInfoオブジェクト if ($fileinfo->isFile()) { $file_list[] = $fileinfo->getPathname(); } } $file_list2 = array() ; $i = 0 ; foreach ( $file_list as $file_name ) { $file_list2[$i][0] = $file_name ; $file_list2[$i][1] = date("Y/m/d H:i", filemtime($file_name)) ; $i++ ; } usort($file_list2, "order_by_desc") ; $j = 0; $res = ""; foreach ($file_list2 as $least_file ) { // $least_file[0]) is a name of blogfile.txt $sub = $least_file[0]; $fp = fopen($sub, 'r'); if ($fp){ if (flock($fp, LOCK_SH)){ while (!feof($fp)) { //$buff = mb_convert_encoding(fgets($fp), "UTF-8"); $buff = mb_convert_encoding(fgets($fp), "UTF-8", "AUTO"); if (strstr($buff, "SUBJECT")) { $subject = explode("|", $buff); // http://sixflags.in.net/TEST/FlatPress/?x=entry:entry140702-085237 $ent = str_replace(".txt", "", explode("entry", $sub)); $URL = str_replace("/APP/findlast", "", BLOG_BASEURL); $URL .= "?x=entry:entry" . $ent[1]; $res .= "<a href=\"" . $URL . "\"> " . $subject[3] . "</a>\n"; // echo $res; continue; } } flock($fp, LOCK_UN); }else{ print('ファイルロックに失敗しました'); exit; } } $flag = fclose($fp); if ($flag){ // print('無事クローズしました'); }else{ print('クローズに失敗しました'); exit; } if ($j++ > 8) break; } return $res; } function order_by_desc($a, $b) { if ( strtotime($a[1]) > strtotime($b[1]) ) { return -1; } else if (strtotime($a[1]) < strtotime($b[1])) { return 1; } else{ return 0; } } ?>

上に示したこのプログラムの動作要素は、次の通りです。

  1. 内部時間を[Asia/Tokyo]としてセットしておく。
  2. [fp-content/content/]以下のディレクトリのファイルをリスト化する。
  3. それらのファイルをファイルの更新時間順にソートする。
  4. 最新のものから当該ファイルへのリンクを生成していく。
  5. リンク名については、記事ファイルのタイトル(Subject)を引っ張り出す。
  6. 上位8個にまで進んだら完了する。

 

それで、このプログラムを下の箇所に挿入しておきます。

/flatpress.world/fp-plugins/lastentries/plugin.lastentries.php

    //FlatPress.info
    require ('APP/findlast/findlast.php');
    $smarty->assign('findlast_file', findlast_file());

    $widget = array();
    $widget['subject'] = $subject;
    $widget['content'] = $string;

さてさて、こんな風に便利にファイルをアクセスできるようになりました。全体をスクロールしても常に画面の一番下に「最近に作成したファイル」と「最近に修正したファイル」が表示され、これをクリックすることで表示または編集ができるように改善されました。なお、この画面モードになっているのは記事を表示している状態のみで、編集画面自体や管理をする画面では表示はされません。

create-modify-access-ok

 今回、カスタマイズしたのはこの画面の一番したに常に最近の「作成」または「編集」のファイル名が表示されるというものでした。

 

コンテンツのタイトルのみを表示する

これまでは、日誌(ジャーナル)を目的にカスタマイズを進めてきました。そして、タイトルを日付として想定しています。ところで、備忘録としての利用を考えた場合には、同然にタイトルはほぼユニークになると思いますし、画像も入ってくると想定されます。例えば、下がサンプルです。(同コンテンツは、ここから借用=http://www.fleapedia.com/

content-disp

実際にはたくさんの記事があるのですが、一部のみが表示されています。ジャーナルで一覧を表示させるとすれば、1か月分と思いますので、1ページに表示させる記事は、多くて31個分の記事で、自分の要望としてはそうなってます。この個数設定は「管理エリア」の設定値で行います。

disp-item-by-page

以上の設定として使おうと考えると、1ページに表示されるタイトルが数個となり、それ以上はスクロールしないといけませんね。このスクロールの手間を省く方法として、簡単に思いつくのはタイトルだけ表示させればよいでしょう。ただし、本文を意識して内容を調べるのではなく、タイトルをキーにして調べるやり方となります。それは好みによると思いますが、タイトルのみの表示形態をさせるためのカスタマイズをすることにします。

続きを読む...

インデックスの再構築が必要な場合

 

「アドミンエリア」の「メンテナンス」の項目に『インデックスの再構築」があります。これは、コンテンツについて、例えば手動で追加や削除を行った場合に、CMS 側にそれを知らせる意味があります。また、ブラウザがハングアップして、その後の FlatPress の動作がおかしくなった際にも復旧がなされます。3年分の仮データを用意した状態では、高性能なサーバで5~6秒、極低性能なPCサーバで30秒程度か掛かりました。

クリックすると下に示すような画面となって、コンテンツを最後まで調べていきますので、ブラウザで最後の完了状況を確かめたのち、ブラウザにて戻るボタンを押すか、新しくトップページのURLを表示させます。画面の状況なこのようになります。

reindex

 

 

FlatPess 記事

Copyright c  flatpress.info 2015. All Rights Reserved.