2015年09月の記事一覧



9月ももうまもなく終わり。10月6日のMicrosoftのプレスカンファレンスも近づいてきました。

そろそろSurface ProシリーズもSurface Pro 4が出るのでは?なんて噂も聞こえてきました。楽しみですね。

Surface Pro 4は、THE VERGEによれば、フォームファクタはSurface Pro 3から大きく変わらず、既存のアクセサリーをそのまま流用可能。また、デザインも大きく変わらないとのこと。一方で、さらなる薄型・軽量化といった話や、14インチの大画面モデルが登場するといった噂、新しいSurface用キーボードが指紋認証をサポートするなどの噂も伝えられています。

Surface Pro 4、Lumia 950 / XLが発表か。MS、10月6日にプレスカンファレンス開催(Engadget Japanese)



●さっきまでHDMI接続で映っていたモニタが映らなくなった

20150922-Surface-Pro-2でHDMI接続のモニタが映らない-00

画像出典:Surface Pro 2(Microsoft)


さて、私はSurface Pro 2ユーザーで、Mini Display PortからHDMI接続でモニターに接続しているのですが、昨晩、突然画面が映らなくなりました。

実は以前も同じようなことがあり、その時はケーブル内の断線・接触が問題だったのですが、今回はケーブルは買ってそんなに日は経っていません。差し込み直しもしてみましたが反応なし。

こんなこともあろうかと、別の変換ケーブルに変えて繋いでみましたが、全然反応なし。

ちなみにどちらもサードパーティの変換ケーブルです。


何なんだろうと思って、検索して調べてみたら、謎のやり方で解決したので、メモがてらブログに残しておきます。

記事の続きを読む




20150920-MovableTypeでブログ記事の最後から指定文字数を表示-01

ブログ記事のタイトルやブログ記事の本文の「最初の20文字」を切り出すというのは、ブログ記事の一覧やパンくずリストなどで使用されるので、ご存じの方も多いと思います。



●先頭の▲▲文字を切り出す「trim_to」

グローバルモディファイアの「trim_to」を使用します。

<$mt:EntryTitle trim_to="20"$>
<$mt:EntryTitle trim_to="20+…"$>

上はブログ記事のタイトルの先頭20文字を表示、下は20文字を超える部分は「…」と追加して表示という意味です。


ブログ記事の本文なら以下の通りになります。グローバルモディファイアの「remove_html="1"」で、ブログ記事の本文からHTML記述を削除した後、「strip_linefeeds="1"」で改行を削除してから指定した文字数を切り出します(そうしないとタグだけで終わってしまうこともある)。

<$mt:EntryBody remove_html="1" strip_linefeeds="1" trim_to="20"$>
<$mt:EntryBody remove_html="1" strip_linefeeds="1" trim_to="20+…"$>



では、逆にブログ記事のタイトルやブログ記事の本文の「末尾から20文字」を切り出すのはどうしたらよいでしょうか?

なお、グローバルモディファイアの「trim_to」にマイナスの値を入れても、末尾からの切り出しにはなりません。

Movable Type 6.0.4 以降では、N に負の値を指定した場合は、文字列の末尾から N 文字取り除き、残った部分を取り出します。例えば、trim_to="-5" と指定すると、"サンプルの文章です" という文章は、"サンプル" と表示されます。

trim_to -(グローバル・モディファイアリファレンス)


記事の続きを読む




今回はMovable Typeで制作するときに、すぐにできそうでできなくてハマる「ブログの最新記事を全ページに表示するためのテンプレート」について書いてみます。



●Movable Typeのコンテキストという概念を理解しよう

「ブログの最新記事を全ページに表示するためのテンプレート」の前に理解しておかなければいけないことがあります。

それはMovable Typeの「コンテキスト」という概念です。


コンテキストは、文脈という意味で、Movable Typeでは、個別記事アーカイブのコンテキストやカテゴリーアーカイブのコンテキストなどがあります。

コンテキストについては以下のページがとても分かりやすいのでMovable Typeを使うユーザーはぜひご一読を。

コンテキストとは

直訳すれば「文脈」です。ここではテンプレートにおける前後の文脈のことをそう呼びます。自然言語における人間の会話や文章にも前後の文脈というものが存在しますから、会話を例に挙げます。

 Aさん:今日は天気がいいですね。

→「今日の天気」のコンテキスト


MTのテンプレートでは現在のコンテキストに適合しないMTタグを使おうとすると、エラーが出るようになっています。

20150912-Movable Typeでブログの最新記事を全ページに表示-01

人間の会話において、文脈に沿っていない話題や発言をすると会話が成立しなくなるのと同じです。

Aさん:今日は天気がいいですね。

→「今日の天気」のコンテキスト

Bさん:はい、僕はハンバーグが好きです。

→コンテキストに沿っていないのでエラー

MTのコンテキストについての考察と解説(Like@Lunatic)


このコンテキストの中でテンプレートタグの挙動が変わってきます。

例えば、インデックステンプレートのコンテキストであれば、最新のブログ記事10件の出力は、普通に最新のブログ記事10件の出力がされます。ですが、カテゴリーアーカイブのコンテキストであれば、最新のブログ記事10件の出力は、そのカテゴリー内の最新のブログ記事10件の出力となります。

この挙動のために、ブログのサイドバーに「最新のブログ記事」を表示させようとすると、コンテキストによって異なった結果が表示されてしまいます。コンテキストの意味からすれば間違いではありません。


ただ、この仕様が、カテゴリーアーカイブを含めた全ページに「普通に最新のブログ記事10件の出力」しようとすると、障害になってしまうわけです。


ここまで理解できましたか?

それではブログの最新記事を全ページに表示するためのテンプレートを作ってみましょう。

記事の続きを読む



20150909-BootstrapとGoogleカスタム検索のCSS-00

みなさん、Bootstrap使っていますか?

私はこれがないともうWeb制作ができないほど毎回使っています(笑)。



●BootstrapとGoogleカスタム検索は相性が悪い?

Bootstrapは非常に便利なのですが、Googleカスタム検索(Custom Search Engine:CSE)を使うと、こんな表示になりませんか?

20150909-BootstrapとGoogleカスタム検索のCSS-01

入力フォームは崩れ、虫眼鏡アイコンが入った検索ボタンは縦に潰れてアイコンが見えない…!


今回はこうした表示のトラブルを解消する方法を紹介します。

記事の続きを読む



Illustratorの線幅ツールを除いて(先に書いておく)。



●新しいGoogleのロゴは線だけで表現ができる…? すごい!

というわけでGIZMODOにこんな記述がありました。

他のユーザーさんの指摘では、新ロゴはフィル(fill、塗り)ではなくストローク(stroke、線)でも作ることができるそうです。これも旧ロゴではありえなかった特徴の1つ。

グーグルの旧ロゴは14,000バイトもあったのに、新ロゴはたった305バイトなのはどうして?(ギズモード・ジャパン)

そうなのか?と新しいGoogleのロゴを改めて見てみました。

20150907-Googleの新しいロゴは線だけで表現できない-01

画像出典:Evolving the Google Identity(Google Design)



しかし、どうも線(ストローク)だけでは難しそうに感じました。

上記画像のあるGoogleのページには、こんな説明もあるので、見てみると、確かに線(ストローク)だけでGoogleの新しいロゴは描けそうです。

20150907-Googleの新しいロゴは線だけで表現できない-02

画像出典:Evolving the Google Identity(Google Design)

記事の続きを読む




ブログ著者

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について

サイト内検索