スマホで使える 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行目あたりに下記1行を追加します。
<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行目あたりに下記1行を追加します。
<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行目あたりに下記1行を追加します。
    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

5行目あたりと9行目あたりにも1行づつ追加します。

<!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

5行目あたりと9行目あたりにも1行づつ追加します。

<!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 を対象としておりますので、古いバージョンでの動作は確認しておりません。

✳︎作業はあくまで個人の責任で行なってください。この記事を元にした作業で不具合が生じた場合、この記事に誤りがあったとしても当方には一切責任が発生しないことをご了解のうえ作業をしてください。