去年も MovableType.net ネタでしたが、今年も MovableType.net ネタです。
先日、MovableType.net に新機能が追加されましたねぇ〜。他人事のように言ってますが、実は実話なのですが、今は中の人です。
先日のMTDDC Meetup Tokyo 2023でお会いした人には直接ご挨拶させていただきましたが、まだ、ご挨拶できていない方々、すみません。
今回のアドベントカレンダーは、そのサムネイル機能で生成されるサムネイルのデザインをちょこっと変えてみたというお話です。
]]> サムネイルのデザインの変更は、システムテンプレートにサムネイル画像用のテンプレートを追加して、その中で行います。今回変更した元のサンプルテンプレートは サムネイル画像のデザインカスタマイズ にある標準テンプレートです。最終的になデザインはこちらです。(デザインがイマイチというのは無しでおねがします。)
まずは準備としてカスタムフィールドを2つ作成しました。
ひとつはタイトルの位置をサムネイル画像の四隅のどこに配置するか、指定するためのもの。
もうひとつはタイトル帯の背景色を指定するもの
編集後のテンプレートは下記になります。実際に手を加えたのは、赤文字になっている部分の追加のみです。
<mt:Asset id="$thumbnail_asset_id"><$mt:SetVar name="has_asset" value="1"$></mt:Asset> <mt:Unless name="thumbnail_text"><mt:SetVarBlock name="thumbnail_text"><p style="text-align: center; font-size: 100%;"><strong><$mt:EntryTitle encode_html="1"$></strong></p></mt:SetVarBlock></mt:Unless> <!DOCTYPE html> <html lang="ja" itemscope itemtype="http://schema.org/WebPage"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <link rel="preload" href="https://cdn.movabletype.net/dist/thumbnail/1.0.0/bundle.min.js" as="script" crossorigin> <script type="module"> import * as Utils from "https://cdn.movabletype.net/dist/thumbnail/1.0.0/bundle.min.js"; <mt:If name="has_asset"> Utils.setNumberOfPages(4); Utils.registerHandler(async () => { const options = { url: "<mt:Asset id="$thumbnail_asset_id"><$mt:AssetURL$><$mt:Else$><mt:If name="thumbnail_background_image_url"><$mt:Var name="thumbnail_background_image_url"$><$mt:Else$>https://cdn.movabletype.net/dist/thumbnail/background.png</mt:If></mt:Asset>", ...<$mt:Var name="thumbnail_crop" default="{}"$>, // 追加のオプションを指定 // backgroundImageFilter: "blur(15px)", // 背景画像のぼかし // coatingLayerColor: "rgba(90, 90, 90, 0.7)", // フィルタの色 }; await Utils.renderBackgroundImage({ container: document.querySelector("#wrap1"), ...options }); await Utils.renderForegroundImage({ container: document.querySelector("#wrap1"), ...options }); await Utils.renderBackgroundImage({ container: document.querySelector("#wrap2"), ...options }); await Utils.renderForegroundImage({ container: document.querySelector("#wrap2"), ...options }); await Utils.renderCoatingLayer({ container: document.querySelector("#wrap2"), ...options }); await Utils.renderBackgroundImage({ container: document.querySelector("#wrap3"), ...options }); await Utils.renderForegroundImage({ container: document.querySelector("#wrap3"), ...options }); await Utils.renderCoatingLayer({ container: document.querySelector("#wrap3"), coatingLayerColor: "rgba(90, 90, 90, 0.8)", ...options }); await Utils.renderForegroundImage({ container: document.querySelector("#wrap4"), url: "<mt:If name="thumbnail_background_image_url"><$mt:Var name="thumbnail_background_image_url"$><$mt:Else$>https://cdn.movabletype.net/dist/thumbnail/background.png</mt:If>", }); }); <$mt:Else$> document.querySelectorAll("#wrap1, #wrap2, #wrap3").forEach(e => e.remove()); Utils.registerHandler(async () => { await Utils.renderForegroundImage({ container: document.querySelector("#wrap4"), url: "<mt:If name="thumbnail_background_image_url"><$mt:Var name="thumbnail_background_image_url"$><$mt:Else$>https://cdn.movabletype.net/dist/thumbnail/background.png</mt:If>", }); }); </mt:If> </script> <style type="text/css"> html { font-family: Roboto, "Noto Sans JP", sans-serif; font-size: 50px; font-weight: bold; } body { margin: 0; padding: 0 } .wrap { position: relative; display: flex; justify-content: center; align-items: center; width: 1200px; height: 630px; background: #fff; } .clear { filter: none; } .bg { display: flex; flex-direction: column; width: 60%; padding: 5%; position: relative; color: #fff; } .bg--white { color: #000; background: rgba(255, 255, 255, 0.8); } .bg--border { border: 4px solid #fff; } .bg--transparent { color: #000; background: none; } /*追加したスタイル*/ <MTEntryPrimaryCategory><mt:CustomFieldValue identifier="cat_color" setvar="cat_color"></MTEntryPrimaryCategory> <mt:CustomFieldValue identifier="title_position" setvar="title_position"> .title{ position:relative; } .title p{ position:absolute; display:inline-block !important; box-sizing:border-box; <mt:If name="title_position" eq="右上"> top:5px;right:0;text-align:right !important;border-top-left-radius:100px;border-bottom-left-radius:100px; <mt:ElseIf name="title_position" eq="右下"> bottom:5px;right:0;text-align:right !important;border-top-left-radius:100px;border-bottom-left-radius:100px; <mt:ElseIf name="title_position" eq="左上"> top:5px;left:0;text-align:left !important;border-top-right-radius:100px;border-bottom-right-radius:100px; <mt:ElseIf name="title_position" eq="左下"> bottom:5px;left:0;text-align:left !important;border-top-right-radius:100px;border-bottom-right-radius:100px; </mt:If> <mt:If name="cat_color" eq="red"> background-color:red;color:#ffffff; <mt:ElseIf name="cat_color" eq="blue"> background-color:blue;color:#ffffff; <mt:ElseIf name="cat_color" eq="green"> background-color:green;color:#ffffff; <mt:ElseIf name="cat_color" eq="yellow"> background-color:yellow;color:#000000; <mt:ElseIf name="cat_color" eq="pink"> background-color:pink;color:#000000; </mt:If> width:90%; padding:3px 12px; } .bg { width: 100%; height:100%; padding: 0; } .bg--white { background: rgba(255, 255, 255, 0); } .bg--border { border: 4px solid #fff; } .bg--transparent { background: none; } </style> </head> <body> <div class="wrap" id="wrap1"><div class="bg bg--white"><div class="title"><$mt:Var name="thumbnail_text"$></div></div></div> <div class="wrap" id="wrap2"><div class="bg"><div class="title"><$mt:Var name="thumbnail_text"$></div></div></div> <div class="wrap" id="wrap3"><div class="bg bg--border"><div class="title"><$mt:Var name="thumbnail_text"$></div></div></div> <div class="wrap" id="wrap4"><div class="bg bg--transparent"><div class="title"><$mt:Var name="thumbnail_text"$></div></div></div> </body> </html>
編集というか、CSSの上書きと追加ですね。
追加部分の冒頭2行はカスタムフィールドの値を変数にしてます。
こちらはカテゴリーに追加したカスタムフィールドの値を変数に入れるようになってます。
<MTEntryPrimaryCategory><mt:CustomFieldValue identifier="cat_color" setvar="cat_color"></MTEntryPrimaryCategory>
こちらはサムネイル画像の編集ウィンドウに表示される、タイトルの配置位置を決めるドロップダウンで選択されたものの値を変数にしています。
<mt:CustomFieldValue identifier="title_position" setvar="title_position">
タイトルの配置位置はサムネイル画像の編集ウィンドウ内で設定します。
下記の部分は選択された配置位置を元にタイトルの配置位置別に CSS を書き出しています。配置位置によってテキストの配置、角丸の位置もセットで設定しています。
<mt:If name="title_position" eq="右上"> top:5px;right:0;text-align:right !important;border-top-left-radius:100px;border-bottom-left-radius:100px; <mt:ElseIf name="title_position" eq="右下"> bottom:5px;right:0;text-align:right !important;border-top-left-radius:100px;border-bottom-left-radius:100px; <mt:ElseIf name="title_position" eq="左上"> top:5px;left:0;text-align:left !important;border-top-right-radius:100px;border-bottom-right-radius:100px; <mt:ElseIf name="title_position" eq="左下"> bottom:5px;left:0;text-align:left !important;border-top-right-radius:100px;border-bottom-right-radius:100px; </mt:If>
タイトルの背景色は記事のカテゴリー別に設定されるようにしてみました。選択するカテゴリによって、カテゴリに作成したカスタムフィールドに入力した値で背景色が決まるようになっています。
下記の部分は記事に設定されたカテゴリーによってタイトルの背景色別の CSS を書き出しています。背景色別の書き出しにテキストのカラーもセットにしてしまっています。
<mt:If name="cat_color" eq="red"> background-color:red;color:#ffffff; <mt:ElseIf name="cat_color" eq="blue"> background-color:blue;color:#ffffff; <mt:ElseIf name="cat_color" eq="green"> background-color:green;color:#ffffff; <mt:ElseIf name="cat_color" eq="yellow"> background-color:yellow;color:#000000; <mt:ElseIf name="cat_color" eq="pink"> background-color:pink;color:#000000; </mt:If>
カテゴリーを「カテゴリ黄」に、タイトル位置の選択肢を「左下」に変えると、下記のようになります。
タイトル位置が固定だと背景画像のいいところにタイトルがかぶってしまうとか、カテゴリーごとにメインカラーが決まっているという場合に、簡易的に調整できていいのかななんて思います。
今回のアドベントカレンダーについては、本当はこちらのブログをMovableType 8にアップデートする記事にしようかなと思っていたのですが、ちょうど直前にリリースされたのでサムネイル画像機能についてにしました。
]]>インデックステンプレートにフォーム用のCSSを作成します
フォームの基本設定のカスタムCSSの記述内容を全てコピーします
コピーしたCSSを作成したフォーム用のCSSにペースト、保存します
右上の「確認」ボタンでCSSページを表示してURLをコピーします
フォームの基本設定のカスタムCSSの内容を削除して、下記の記述に変更してインデックステンプレートに作成したCSSファイルを読み込むようにし保存します
@import url("https://honda-beat.jp/form_style.css");
フォームのデザインを変更したい場合は、フォーム用CSSテンプレートを編集します。
例えばフォームの「必須」アイコンのデザインを変えたい場合は、テンプレートに下記のスタイルを追加し保存します。
.form-column{
margin-bottom:25px;
}
.badge-required{
padding:3px;
color:#ffffff;
background-color:#d44950;
border-radius:3px;
}
【変更前】
【変更後】
長くウェブサイトを運営しているとサーバー移転などでウェブサイトを別の場所に移動させる必要が出てくることがあると思います。
HTMLファイルなどをダウンロードして、そのまま新サーバーにアップロードするだけということもありますが、CMSなどを使って運営していたウェブサイトを移行する場合に、ついでにページのファイル名なども整理して変えたいということもあると思います。
例
旧URL:https://exsample.com/entry_yyyymmdd_hhmmss.html
新URL:https://exsample.com/entry_basename.html
ソフトウェア版の MovableType なら .htaccess をインデックステンプレートで作ってリダイレクトさせるなどができるのでテンプレートを書くだけで済むということもあると思います。
また、MovableType.net には .htaccess を作成しなくても、簡単にリダイレクトを設定できるリダイレクト機能があります。
リダイレクト(設定/削除)
https://movabletype.net/support/setting/redirect.html
しかし、簡単にリダイレクトを設定できる MovableType.net のリダイレクト機能ですが、ファイル名が変わっている場合は、すべてのページを登録する必要があります。
ウェブサイト移転後に「とりあえずリンク切れは避けたい。」ということであれば、MovableType.net では同じタイプのアーカイブテンプレートを複数作成できるので、この機能を使うことでリンク切れを回避でき、すべてのページを登録しなくても旧URLページから新URLページへ遷移させることができます。
以前、ソフトウェア版のMovableTypeで運営していたブログを、途中で MovableType.net に移転しました。その時にURLも変更したことがあります。
当時の総ページ数はわかりませんが、一件ずつ登録することは考えられなかったので、記事のアーカイブテンプレートを2つ使って旧URLと新URLのページを作成するようにし、旧URLから新URLに遷移するようにしました。
各記事のページが2つできることになりますが、旧URLのページを書き出すテンプレートのアーカイブパスは旧URLに合わせて、新URLのページを書き出すテンプレートのアーカイブパスは新たに設定したものにします。
例
旧URLのページ:https://honda-beat.jp/beat_life/archives/2005/05/15_083233.html
新URLのページ:https://honda-beat.jp/beat_life/mtb2005.html
あとは旧URLのページを書き出すテンプレートを編集してページ移転のお知らせが書き出されるようにしたり、新URLへ遷移させる JavaScript を読み込ませるようにしたり、Canonicalの設定をするだけです。
きちんとページの評価などを引き継がせてリダイレクトをするよりはSEO的には不利な部分はあると思いますが、外部からのリンクが多い場合などはリンク切れを起こさないというのはメリットになるのではないでしょうか。
ところで、同一記事のページが2つ書き出されますが、「MTEntryPermalinkタグ」などを使った場合どうなるの?ということがあると思います。
同じ種類のアーカイブテンプレートが複数ある場合、どれか一つが優先アーカイブとなります。新URLを書き出すアーカイブページを優先アーカイブとすることで、MTEntryPermalinkタグなどで書き出されるURLは新URLとなります。
複数のアーカイブを書き出すことで、PC版とスマホ版で出し分けたり、複数の言語で出し分けたりできるなど、工夫次第でいろいろな使い方ができそうです。
]]>https://gourmetvox.comのMovableTypeを最新版のMovable Type Pro version 6.8.5にアップグレードしたのですが、そしたら新着記事にリストアップしている最新の10件に表示されるサムネイルの画像が、以前とは違うルールで選択される様になってました。
]]> 写真はブログ記事の作成時に記事ごとにアップロードしていますが、この時に一番最初にアップロードした写真がサムネイルやOGPのog:imageになる様にしていました。サムネイルのところは下記の様なテンプレートになります。
<mt:Entries>
<mt:EntryAssets lastn="1" sort_order="ascend">
<div class="images table">
<img src="<$mt:AssetThumbnailURL width="60" square="1"$>" width="60">
</div>
</mt:EntryAssets>
</mt:Entries>
MT 6.8.5 にアップグレードする前は MT 6.3.2 でしたが、MT 6.3.2 では上記テンプレートでサムネイルは記事のアセットとして登録された中で一番最初にアップロードされたものが使われていました。
しかし、MT 6.8.5 にアップロードしたら、記事に登録されたアセットの中で一番最後にアップロードされた写真がサムネイルで使われる様になっていました。
とりあえず「sort_order="ascend"」を「sort_order="descend"」に修正しましたが、状況は変わらずでした。
<mt:Entries>
<mt:EntryAssets lastn="1" sort_order="descend">
<div class="images table">
<img src="<$mt:AssetThumbnailURL width="60" square="1"$>" width="60">
</div>
</mt:EntryAssets>
</mt:Entries>
ここでlastnモディファイアとlimitモディファイアについて仕様の確認(今更!)。
lastn モディファイアと limit モディファイアの違い
lastnモディファイアでは上記のページに書いてある様に新しい方から指定された件数分を抽出するので、「lastn="1"」としている場合は一番最後に登録された画像が抽出されることになるり、「sort_order」は書いてあっても意味がないということになりますね。
そして、「lastn="1"」を「limit="1"」、「sort_order="descend"」を「sort_order="ascend"」とした場合、これで今まで通り、記事に登録された写真のうち、一番最初にアップロードされた写真が1件抽出される様になりました。
<mt:Entries>
<mt:EntryAssets limit="1" sort_order="ascend">
<div class="images table">
<img src="<$mt:AssetThumbnailURL width="60" square="1"$>" width="60">
</div>
</mt:EntryAssets>
</mt:Entries>
lastn モディファイアと limit モディファイアの違いには書いてありませんが、「sort_order="ascend"」で昇順に並べ替えられてから1件が抽出されると解釈すると、「一番古い」=「一番最初」に登録された写真が抽出されることになります。
これで元通りの表示になったのですが、そうすると MT 6.3.2 の時は「mt:EntryAssets」で指定した「lastn="1"」は記事内に登録されたアセットのうち、一番古いものが抽出されていたということなのか、「sort_order="ascend"」が最初に処理されていたのか...。
何れにしても今の<mt:EntryAssets limit="1" sort_order="ascend">Do Something<mt:EntryAssets>の書き方が一番しっくりくるし、正しい書き方ですね。
]]>サーバーのスペックが低いのが要因ではありますが、GOURMET VOXに記事を投稿するとInternal Server Errorが発生することがあります。都道府県ごとにブログになっていますが、特に記事数の多い東京に影響が出ています。(記事数の少ない都道府県は大丈夫)
サーバーを変えないと解決は出来ないと思っていたのですが、エムロジックさんから「FastThumbnail」という画像のサムネイル処理を高速化するためのプラグインがあることを知り、もしかしたら効果あるかなと思いインストールしてみました。
ダウンロードはGitHubのmt-plugin-fast-thumbnailから。
インストールはダウンロードしたZIPファイルを解凍してPluginフォルダにアップロードするだけです。
インストールが完了したらmt-config.cgiに環境変数を設定することでプラグインが動作するようになります。設定は下記の1行を追加するだけですが、動作モードは0、1、2の3パターンがあります。
StrictImageCheck 1
今回は一番効果のある「2」を設定しました。
結果としては効果てき面でした。今までInternal Server Errorで再構築もままならないこともありましたが、スムーズに公開されるようになりました。(たまにInternal Server Errorになるけど...)
おまけ
プラグインのインストール先はデフォルトではpluginフォルダですが、環境変数「PluginPath」を使うことでインストール先のフォルダを変更できます。
また、この環境変数で複数のインストール先を設定することもできるので、MovableTypeに同封されているプラグインと後から追加したプラグインを分けておくことができます。
PluginPath plugins
PluginPath /path/to/added/plugins_folder
PluginPath環境変数でインストール先を分けておくことで、アップグレードの時などに後から追加したプラグインについてはフォルダーごと移動またはコピー&ペーストすれば済むので、再インストールが簡単になります。
]]>Movable Type が2021年10月8日で20周年だそうです。
このブログは2004年2月から始めて17年と8ヶ月経ってます。 始めた時は MOVABLE TYPE 2.661 でした。
]]> 始めた頃から比べると更新頻度はかなり落ちてますが、一応17年半以上続いてる。まだまだ、これからも使っていきます。いつまで続くかな。
※写真は20周年記念の記念品です。東レの超極細繊維(マイクロファイバー)のクロスです。
]]>ゴーディ・ラチャンス、クリス・チェンバーズ、テディ・ドチャンプ、バーン・テシオの少年4人の冒険映画「Stand by Me/スタンド・バイ・ミー」が本編ノーカットでテレビの金曜ロードショーで放映されていました。
]]> 11年ほど前にDVDを借りて観たようだ。このブログに記事が書いてあった。ゴーディ・ラチャンスが作家として、当時のことを回想しながら小説を書いているという設定の映画。
少年4人の中で弁護士になったクリス・チェンバーズが不慮の死を迎えてしまったのが、小説を書くきっかけだったのかな?
冒険は列車にはねられた少年の遺体を探しに行くという、なんともなストーリーだが少年4人が冒険をした結果、成長した姿を映し出している。
冒険とは言え淡々とストーリーが続き、有名なシーンと言えば、線路を歩く4人の姿と、行き場のない橋の上で迫ってくる機関車から逃げるシーンぐらいという感じです。
でも淡々としたストーリーの進め方がリアリティーを出しているようにも思う。
たった3日間(実質2日間)の話だが、すごく長い冒険に出ていたような感覚が残る映画でした。
]]>この記事は Movable Type Advent Calendar 2020 の7日目の記事です。3年ぶりの参加です。
先日、MovableType.netの相談を受けた中でサイトの構成上、ウェブページをそれぞれ属するフォルダ別の一覧ページで表示させたいところがありました。
]]> MovableType.netにはブログ記事をカテゴリー別や年月日別にリスト化して表示するアーカイブ機能はありますが、ウェブページをフォルダ別のアーカイブページにするフォルダ・アーカイブのようなものはないなと思い、ウェブページのフォルダ別一覧ページを作成してみました。ウェブページのフォルダ別一覧ページについては公式サイトのテーマ「Stylish Corporate」でも紹介されていますが、実装方法が違うので書き残しておこうと思います。
ここから本題です。ここからはMovableType.netに公式サイトで公開されているテーマ「Basic」をベースにしたものとなっています。
テーマを適用したらフォルダ3つとウェブページ5ページをサンプルとして作成しています。フォルダの階層構造とウェブページの配置は下記のようになっています。
ウェブページの一覧ページはウェブページ・アーカイブを使って作成します。ウェブページ一覧ページ用のウェブページ・アーカイブを新たに追加で下記のように作成しました。
URLは「https://ドメイン/フォルダベースネーム.html」としたいので、アーカイブパスを「%C.html」としています。
ウェブページ一覧用の「フォルダ別ページリスト」が追加されました。
テンプレートの内容は元々あったウェブページのものをコピー&ペーストして、ウェブページのタイトルや本文、続きが表示される部分を修正してウェブページの一覧が表示されるようにしています。修正前/修正後は下記になります。
下記はコピー&ペーストしたウェブページ・アーカイブのテンプレート(修正前・抜粋)
<section class="UL-mainArea wysiwyg">
<div class="mt-container">
<p class="pages__pagename">ウェブページ</p>
<div class="pages__header">
<mt:If tag="FolderLabel">
<span class="pages__category"><$mt:FolderLabel encode_html="1"$></span>
</mt:If>
<h2 class="pages__title"><$mt:PageTitle$></h2>
</div>
<$mt:PageBody$>
<$mt:PageMore$>
</div>
</section>
上記のテンプレート(抜粋)をウェブページの一覧を表示させるように修正したものが下記になります。HTMLは基本的にテーマ「Basic」のトップページでウェブページを一覧表示している「ページ」の部分を流用しています。
<section class="mainPages">
<div class="mt-container">
<div class="pages__pagename">
<$mt:FolderLabel encode_html="1"$>のウェブページ一覧
</div>
//属するフォルダの名前を変数 pagefolder に設定
<$mt:FolderLabel setvar="pagefolder"$> (*1)
<div class="mainPages__cardWrap">
//変数 pagefolder で表示するウェブページを絞り込み
<mt:Pages folders="$pagefolder"> (*2)
<article class="mainPages__card">
<a href="<$mt:PagePermalink$>">
<h3 class="mainPages__title"><$mt:PageTitle encode_html="1"$></h3>
<p>
<$MTPageExcerpt$>
</p>
</a>
</article>
</mt:Pages>
</div>
</div>
</section>
書き出すウェブページの一覧は同じフォルダに属するウェブページにfoldersモディファイアを使って絞り込みたいので、フォルダの名前を変数「pagefolder」に格納(テンプレートの*1)して、その値をfoldersモディファイアに代入(テンプレートの*2)することでそれぞれのページで同じフォルダに属するウェブページだけに絞り込んでいます。
これで基本的にはウェブページの一覧ページ用テンプレートの作成は完了です。「https://ドメイン/フォルダベースネーム.html」のURLにアクセスするとフォルダ別のウェブページ一覧が表示されます。
テンプレートの作成は完了ですが、サンプルの「ウェブページ01」のようにフォルダに属さないウェブページがある場合は「https://ドメイン/.html」というURLでもアクセスできるようになってしまいます。
アクセスされた時のために、MovableType.netのリダイレクト設定でリダイレクトを設定しておきます。
(上記リダイレクト先はダミーです。こちらのブログはソフトウェア版のMTで運営しています。2020年12月現在)
このウェブページ一覧ページの作成方法はソフトウェア版MTでは試していませんが、同様にウェブページ一覧アーカイブを作ることはできると思います。
ただし、ウェブページ・アーカイブを使って一覧ページを書き出しているので、ソフトウェア版MTは再構築をした時にウェブページごとにウェブページ一覧のページが書き出されることになります。
そのためフォルダに複数のウェブページがあると、そのページの数だけ同じ内容のページが同じURLで書き出され、上書きされることになります。
MovableType.netは静的にファイルは書き出さないので、このあたりはあまり気にしなくていいのかなと思っています。(キャッシュは上書き更新されるのかなと。)
こんな感じでスマートさに欠ける部分もありますが、以上で完了です。
]]>PDFファイルのオンデマンド印刷から製本までしてくれる業者で1冊だけ作ってみました。
]]> オンデマンド印刷は昔からありましたが、1冊だけでも安価で製本してくれるサービスはいつ頃からあるのでしょうかね。今回作成したのはB5サイズ縦/無線綴じ/174ページ(表紙込)という感じです。
表紙はイラストレーターでB4サイズより少し大きめにして作成しました。
写真はPSDファイルでカラーモードはCMYKにしてありますが、特にEPSにしたりなどはせずPDFとして書き出したものを使ってます。テキストはアウトライン化してます。
厚みが11mmほどあるので真ん中に背表紙部分を作ってます。
中身はPowerPointで作成し、PDFで書き出しています。
元々はPart1〜Part3の3冊でしたが、それぞれを書き出したPDFファイルをAdobe Acrobat DCで結合して白紙を追加などの手を加えて1冊にまとめたものを入稿しています。
中身の画像はRGBのままです。画像はスクリーンショットで撮ったものですが、最近はディスプレーがRetinaなのでサイズが大きく撮れるので解像度は特に気にしてません。画像荒かったら、荒かったでまぁいいやとは思ってましたが、特に問題なさそうです。
今回使った製本サービスは岡山県の株式会社イタミアートというところが運営している冊子製本キングというサイトです。
オンデマンド印刷の製本サービスを使うのは初めてなので値段重視で選んでます。今回のものは3,000円ちょっとでできました。
探した中では最安に近いサービスです。他にももう少し安ところもありましたが、こちらは紙の種類が多かったりとしっかりしている印象だったので決めました。
出来上がりには満足です。が、今回は初めてだったので作ってみて色々修正したいところはあります。
PowerPointでファイルを作成する際のテンプレートがあり、テンプレートにはコンテンツを収める枠がありますが、その枠より多めに余白を取らないと製本して閉じた内側が読みづらいです。左右はプラス1cmくらい多めに余白を取った方がいいです。
天地もプラス1cmくらい余白を開けた方が上に寄ってる感じがしないと思います。
本文のフォントは「ヒラギノ角ゴ Pro」の11ptで作成しましたが、思ったより文字が大きかったです。もう1〜2ポイントくらい小さくてもいいかな。
何れにしても簡単に市販レベルの本が作れるのはいいですね。
P.S. 今回はココナラミーツで出してる下記のテキストを自分用に作ってみました。
]]>AdobeがFlash Playerのサポートを2020年12月31日に終了するとのことで、その告知と共にアンイストールのプロンプトが表示されたのでアンイストールしました。
]]> 最近はFlashを使っているサイトは全くと言っていいほど見なくなりましたね。日本でiPhone 3Gが発売されたとき、Flashを使ったウェブサイトはたくさんありましたが、モバイルSafariがFlash Playerをサポートしていなかったのは衝撃でした。
アンイストールはアラートの手順にしたがって行えばすぐに終わります。
手動で削除したい場合は、下記のサイトの「7.サポート終了日後もアドビはFlash Playerのセキュリティアップデートを提供しますか?」の説明の中にあるリンクからダウンロードできるアンインストーラーを使用することでアンインストール出来ます。
Adobe Flash Playerサポート終了情報ページ
FLash Playerのプラグインがインストールされているブラウザが起動している場合はアラートが表示されるので、ブラウザを終了して「再試行」するか「強制的にすべて閉じる」を選択します。
パスワードを入力して「ヘルパーをインストール」をクリックして作業を続けます。
削除されましたとなるので、「完了」ボタンをクリックして終了です。
Flashは動画にアニメーションを加えたりするのにも便利でした。YouTubeが流行っているこのご時世、アニメーション作成アプリとかに転換できなかったのでしょうかね。
2002年にFlashを使って作った動画。
]]>CODEPENと言う、ブラウザ上でHTML、CSS、JSのテストが出来るサービスに登録してみました。今更感がありますが、部分的なHTMLなどを保存しておくのはGitHubより便利そう。
]]> アカウントの作成は名前、ユーザーネーム、メールアドレスだけで出来るので簡単・お手軽です。アカウントを作成したらプロフィール画像が自動的に設定されました。GitHubから?登録直後の何もない初期状態は下記のような感じです。コードの入力画面は「Go make one!」をクリックします。
「Go make one!」をクリックしてコードの入力画面が開いた状態です。プロフィールアイコンをクリックして現れるメニューの「New Pen」からも入力画面を開けます。
HTMLとCSSを入力するとコードの下にプレビューが表示されます。
右上の「Change View → Editor Layout」で入力欄を左または右に変更することもできます。
コード入力欄を左カラムに変更
プロフィールアイコンをクリックして現れるメニューの「Your Work」をクリックすると作成したPenの一覧が表示されます。
作成したペンを埋め込みたい場合は、埋め込みたいPenの編集画面を開いて、右下の「Embed」をクリックして埋め込み用のソースを取得します。
See the Pen Folder-like Design by Y.Takahashi (@applebeat) on CodePen.
]]>簡単な設定から作成されたソースを貼り付けるだけでソーシャルサイトの共有ボタンや関連のある記事の一覧を簡単に表示できるブログパーツのzenbackサービスが終了するようです。
]]> 2010年7月からテスト運用が始まったようなので10年ちょっとのサービスなんですね。結構初期から使ってたと思うんですが、どれくらい使ってたのかな?
最近ではGourmetVox.comでしか使ってないですが、登録ブログは7つもありました。
と思ったら、MT三昧 http://www.mtzanmai.com でも使ってた。
zenbackタグはサービス終了までに削除してくださいとのことですが、削除しない場合はzenbackタグの部分は空の状態になるそうです。
とりあえずテンプレートモジュールを修正しておきました。
]]>Movable Typeでウェブサイトを構築! Part 1をMovableType.netでもできるようにしようと、テンプレートを移植したのですが、ソフトウェア版のMovableTypeとMovableType.netでは使えるMTタグに違いがあるため、コピー&ペーストしただけではうまく行かない部分があり、その修正で戸惑ったのでメモとして残してます。
]]> ソフトウェア版Movable Type(以下MT)でも、MovableType.netでも、親サイト(ウェブサイト)にあるウェブページへのリンクを子サイト(ブログ)で表示させる場面があると思います。例えばコーポレートサイトなどでウェブサイトに会社概要などのウェブページがあって、グローバルナビゲーションでウェブサイトのウェブページへのリンクを表示する場合、ブログでも同様に表示する場合があると思います。
そのような時はマルチブログ機能を使うと思いますが、MTとMovableType.netでテンプレートの書き方を変える必要があります。
配下のブログでもグローバルナビゲーションはウェブページと同じものを表示させるという場合、ソフトウェア版のMTの場合、ウェブサイトとブログに共通で使うテンプレートとして下記のようなものが考えられます。
//ウェブサイトのウェブページ名を表示する場合
<mt:Pages include_blogs="親サイト(ウェブサイト)のブログID">
<mt:PageTitle>
</mt:Pages>
一方、MovableType.netで上記のテンプレートをそのまま使おうとするとエラーになってしまいます。
MovableType.netでは下記のように修正する必要があります。
//ウェブサイトのウェブページ名を表示する場合
<mt:Pages include_blogs="ウェブサイトのブログID" include_with_website="1">
<mt:PageTitle>
</mt:Pages>
上記の「ウェブサイトのブログID」はソフトウェア版の「WebsiteID=BlogID」に相当するものですが、MovableType.netの場合は「WebsiteID」と「BlogID」がそれぞれ別々になります。「WebsiteID」ではエラーになってしまいます。「BlogID」を使用しなければなりません。そして「include_with_website="1"」を併記する必要があります。
また、MovableType.netではウェブサイトとブログに固有の「識別子」を付けられますが、この識別子をBlogIDの代わりに使用してもウェブサイトまたはブログを指定できます。
識別子を使う時もウェブサイトを指定する場合は「include_with_website="1"」を併記する必要があります。
P.S.「include_blogs」にはall、children、siblingsと言ったものが使えます。この辺については、今までなんとなく使ってる感があるので、もうちょっとしっかり理解しないとと言った感じです。
]]>2004年2月13日にMovableType2系で始めたこのブログの運営期間が6000日になりました。
]]> 6000日の間にサーバーは2回くらい引っ越したかな。そしてMovable Typeのバージョン2からバージョン7になり、ブログツールからCMSとして使われるようになりました。ブログを始めた頃とは比べものにならないくらい投稿ペースは落ちてますが、これからも「継続は力なり!なのか?」で続けていくつもりです。
]]>そして、新しいアルバムでも買わなければ、自分で曲やアルバムを選んで聴くことはほとんどなく、iPhoneのミュージック.appで全曲をシャッフルプレーで再生して聴いています。
アルバム単位で聴くときはシャッフルプレーで再生された曲の入ったアルバムを1曲めから聴くというようなことをしています。
アルバムを選んで聴いていると、アルバムの最後の曲が終了したらまた同じようにアルバムを選ぶのですが、これが意外と面倒です。なぜ、ミュージック.appではアルバム単位でのシャッフルプレーができないのか不思議です。
]]> それでアルバム単位でシャッフルプレーができるアプリがないか探したら「iAlbumPlayer」というアプリがありました。使い方はアプリを起ちあげてコントローラーの左下の「すべてのアルバム」(またはプレイリスト名)をタップしてプレイリストを選びます。
プレイリストを選んだら次に右下の「シャッフル」の文字を長押しするとプレイリスト内の曲が選ばれて、その曲が含まれているアルバムの1曲めから再生が始まります。
アルバムの最後の曲が終わると再び同様にアルバムが選択されて再生が続けて始まります。
右下の「シャッフル」の文字をタップすると「アルバムのソート順」の選択項目が現れますが、ここは使い方がよくわかりませんでした。
左右にスワイプしてアルバムを選択することもできます。
上下にスワイプするとアルバムのサムネールが一覧で表示されます。
一応、横位置にも対応しています。テキストのレイアウトがイマイチですが...
使い始めて1ヶ月くらいですが、最近は大抵このアプリを使ってアルバム単位でシャッフルプレーしています。アルバム単位でのランダム再生がお手軽に出来ていいです。
]]>