スマホで使える Bookmarklet

アイテムの投稿や編集する時に使うBookmarklet をレスポンシブにしてスマホ対応にハックしました。

今までNucleusCMS用のレスポンシブスキンを配布してきましたが、管理画面には手付かずでした。バージョンアップも近いために管理画面のソースが変更される可能性があるので、とりあえず変更が少なそうな Bookmarklet に手をつけることにしました。

まず、必要なファイルを下記リンクからダウンロードしてください。
hnm_bookmarklet.css.gz

圧縮していますがgz対応のサイトでしたらそのままアップできると思います。そうでなければ、解凍ソフトで解凍してアップロードしてください。

解凍した時のファイル名は『hnm_bookmarklet.css』です。ソフトによっては拡張子がなくなることがあります。拡張子がなくなった時は『.css』を書き加えてください。

今回ハックするファイルは以下のファイルです。


├ndex.php
├config.php
├nucleus
│├bookmarklet.php ← 編集します
│├styles ← ここに hnm_bookmarklet.css をアップする
││├libs
│││├include
││││├bookmarklet-add.template ← 編集します
││││├bookmarklet-edit.template ← 編集します
│││││
│││
││
│
├skins
├media
├xml-rss2.php
└action.php

① まずhnm_bookmarklet.css を /nucleus/style/ へアップロードします。

② /nucleus/bookmarklet.php を編集します。

248行目あたりに下記１行を追加します。
<meta name="viewport" content="width=device-width, initial-scale=1">

<!DOCTYPE html>
<html <?php printf('lang="%s"', _HTML_5_LANG_CODE); ?>>
<head>
<meta charset="<?php echo _CHARSET ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nucleus</title>
    <?php bm_style(); ?>
</head>
<body>
<h1><?php echo _LOGIN_PLEASE ?></h1>

356行目あたりに下記１行を追加します。
<meta name="viewport" content="width=device-width, initial-scale=1">

<!DOCTYPE html>
<html <?php printf('lang="%s"', _HTML_5_LANG_CODE); ?>>
<head>
<meta charset="<?php echo _CHARSET ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php echo $title ?></title>
    <?php bm_style(); ?>
    <?php echo $extrahead; ?>
</head>
<body>
<h1><?php echo $head; ?></h1>

374行目あたりに下記１行を追加します。
echo '<link rel="stylesheet" type="text/css" href="styles/hnm_bookmarklet.css">';

function bm_style() {
    echo '<link rel="stylesheet" type="text/css" href="styles/bookmarklet.css">';
    echo '<link rel="stylesheet" type="text/css" href="styles/addedit.css">';
    echo '<link rel="stylesheet" type="text/css" href="styles/hnm_bookmarklet.css">';
}

③ /nucleus/lib/include/bookmarklet-add.template と、/nucleus/lib/include/bookmarklet-edit.template も編集します。

bookmarklet-add.template

５行目あたりと９行目あたりにも１行づつ追加します。

<!DOCTYPE html>
<html lang="<%text(_LANG_CODE)%>">
<head>
<meta charset="<%text(_CHARSET)%>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><%text(_ADD_ADDTO)%> '<%blogname%>'</title>
<link rel="stylesheet" type="text/css" href="styles/bookmarklet.css">
<link rel="stylesheet" type="text/css" href="styles/addedit.css">
<link rel="stylesheet" type="text/css" href="styles/jquery-ui/ui.all.css">
<link rel="stylesheet" type="text/css" href="styles/hnm_bookmarklet.css">
<script type="text/javascript" src="javascript/bookmarklet.js"></script>
<script type="text/javascript" src="javascript/edit.js"></script>
<script type="text/javascript" src="javascript/edit_date.js"></script>
<script type="text/javascript" src="javascript/numbercheck.js"></script>

bookmarklet-edit.template

５行目あたりと９行目あたりにも１行づつ追加します。

<!DOCTYPE html>
<html lang="<%text(_LANG_CODE)%>">
<head>
<meta charset="<%text(_CHARSET)%>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><%text(_EDIT_ITEM)%></title>
<link rel="stylesheet" type="text/css" href="styles/bookmarklet.css">
<link rel="stylesheet" type="text/css" href="styles/addedit.css">
<link rel="stylesheet" type="text/css" href="styles/jquery-ui/ui.all.css">
<link rel="stylesheet" type="text/css" href="styles/hnm_bookmarklet.css">
<script type="text/javascript" src="javascript/bookmarklet.js"></script>
<script type="text/javascript" src="javascript/edit.js"></script>
<script type="text/javascript" src="javascript/edit_date.js"></script>
<script type="text/javascript" src="javascript/numbercheck.js"></script>

これでちょっとすっきりした感じの画面になります。

ブックマークレット

✳︎このハックはNucleusCMS 3.8 を対象としておりますので、古いバージョンでの動作は確認しておりません。