FlatPress.info

アナログ時計のプラグインを作成

だんだんとプラグインの作成方法が分かってきたので、どこにでもある「アナログ時計」を作成して見ました。実装はプラグイン形式になっています。まずは、サンプルとして設置した様子をお見せいたします。

このアナログ時計はすでに公開している「美人時計」ではちょっとカジュアル過ぎると思われた方にはよろしいのではないでしょうか。なお、時計部分の表示については後述するように、インターネット上にサンプルが豊富にあるソースプログラム(Javascript)をコピー＆ペーストすれば、お好みのデザインにカスタマイズすることができます。

さて、このプログラムは本サイトの「アナログ時計プラグイン」からダウンロードできますのでこれをプラグインディレクトリ（/fp-pluginz/)配下に解凍して有効化してください。

このプラグインもウィジェット化での表示されますので、好みの場所に表示されるように設定しておきます。下図で clockjp が読めますが、例としては右パネルの最上位に表示させるようしています。

この時計のカスタマイズはソースを修正すれば、どのようにもなる訳ですが、ページのデザインに直接関係する大きさだけは簡単に調整できるようにしました。管理エリアの本プラグイン設定で大きさ（表示直径）を指定できます。

このアナログ時計のソースは下記に示すサイト（https://www.softel.co.jp/blogs/tech/archives/3914）から借用しています。また、秒針については先っぽに赤丸を付加して若干ですがデザイン性を向上させています。

アナログ時計部分のソースはダウンロードされたものを見ていただくとして、プラグインとして javascript を吐き出しているところを下記に示しておきます。

plugin.clockjs.php

<?php
/*
Plugin Name: javascript clock
Version: 0.9
Plugin URI: http://flatpress.info/
Type: Widget
Description: "Javascript Cloclk FYI=https://www.softel.co.jp/blogs/tech/archives/3914"
Author: Flatpress.info
Author URI: http://flatpress.info
*/

function plugin_clockjs_script() {
        global $clockprogram;
        $clockprogram = array();
        $lang = lang_load('plugin:clockjs');
        $clockprogram['subject'] = $lang['plugin']['clockjs']['subject'];
        include 'source.php';
        $h=$clockprogram['data'];
        echo '<script type="text/javascript">' . $h . '</script>';
        echo '<style type="text/css"> #clockjs { display: block;  margin-left: auto;  margin-right: auto;} </style>';
        $c = plugin_geturl('clockjs').'res/css/clockjs.css';
        echo '<link rel="stylesheet" type="text/css" href="'.$c."\" />\n";
        return;
}
add_action('wp_head', 'plugin_clockjs_script');

function plugin_clockjs_widget() {
    $lang = lang_load('plugin:clockjs');
    $widget = array();
    $widget['subject'] = $lang['plugin']['clockjs']['subject'];
    $width = plugin_getoptions('clockjs');
    $w = $h = $width['clockjs'];
    $widget['content'] = '<canvas id="clockjs" width="'. $w . '" height="' . $h . '"></canvas>';
    return $widget;
}
register_widget('clockjs', 'clockjs', 'plugin_clockjs_widget');


if (class_exists('AdminPanelAction')){
        class admin_plugin_clockjs extends AdminPanelAction {
                function setup() {
                        $this->smarty->assign('admin_resource', "plugin:clockjs/admin.plugin.clockjs");
                        $bc_config = plugin_getoptions('clockjs');
                        if(!$bc_config['clockjs']) {
                                $clockjs = "180";
                                plugin_addoption('clockjs', 'clockjs', $clockjs);
                                plugin_saveoptions('clockjs');
                        }
                }
                function main() {
                        $bc_config = plugin_getoptions('clockjs');
                        $this->smarty->assign('bc_config', $bc_config);
                }
                function onsubmit() {
                        if ($_POST['bc-clockjs']){
                                $clockjs = $_POST['bc-clockjs'];
                                plugin_addoption('clockjs', 'clockjs', $clockjs);
                                plugin_saveoptions('clockjs');
                                $this->smarty->assign('success', 1);
                        } else {
                                $this->smarty->assign('success', -1);
                        }
                        return 2;
                }
        }
        admin_addpanelaction('plugin', 'clockjs', true);
}
?>