このページの本文へ

フロントエンドエンジニアのblog

有限会社Willさんいん

このページの位置: home カテゴリー: その他 2ページ目

“その他” カテゴリの記事(10件)

Movable Type で記事を先頭に固定表示

この記事は2015年7月21日に書かれたものです。情報が古い可能性がありますのでご注意ください。

WordPress の投稿には、公開状態に “この投稿を先頭に固定表示” というオプションがあり、チェックした投稿は、メインページなどの投稿の一覧で常に先頭に表示されます。

一方、Movable Type にはこのような機能はありませんので、同様のことをしようとするなら、カスタムフィールド等を使って実装する必要があります。

チェックボックス型のカスタムフィールドを使って先頭に固定表示のフィールドを追加し、メインページテンプレート等で、記事の一覧を出力する前にチェックされた記事の一覧を出力すればよいわけですが、単に出力しただけでは1ページに表示する記事の件数がチェックした記事の件数分増えてしまいます。

そこで、チェックされた記事が複数あっても、一覧に表示される記事の総件数が変わらないようにしてみます。

“Movable Type で記事を先頭に固定表示” の続きを読む »

続・jquery.neosmart.fb.wall を導入しました

この記事は2015年4月16日に書かれたものです。情報が古い可能性がありますのでご注意ください。

昨日導入した、jquery.neosmart.fb.wall ですが、2点ほど問題がありました。その1つはセキュリティ上の問題でもあります。

1つ目は、25人を超える「いいね!」がある投稿に対して、「いいね!」数が25までしか表示されないことです。これは、Graph API がデフォルトで25しか「いいね!」した人を表示しないのが原因とのことで、jquery.neosmart.fb.wall.js の61行目を、

url: graphURL+o.id+'/'+type+'?limit='+o.max+'&likes.limit=200&access_token='+o.accessToken',

のように、likes.limit=いいね!の上限数 というパラメータを追加することで解決しました。(参考:永遠少年症候群 | fb.wallメモ最終版

2つ目は、Facebook のアクセストークンを取得してこのスクリプトに設定するのですが、このアクセストークンを HTML か JavaScript に記述するため、誰にでもアクセストークンが見えてしまうこと。アクセストークンがあれば Facebook ページの非公開にしている情報までもが取得できてしまいます。

開発を終了した fb.wall のサイトにも「安全な方法でアクセストークンを提供することができなかった」といった内容の記述があります。これが開発終了の理由なんですね。

Since 2010 Facebook changed their Graph API a lot of times, they added server request limits and the need of access tokens. With a pure JavaScript solution it was not possible to provide access tokens in a safe way. Therefore we developed neosmart STREAM.

“続・jquery.neosmart.fb.wall を導入しました” の続きを読む »

jquery.neosmart.fb.wall を導入しました

この記事は2015年4月16日に書かれたものです。情報が古い可能性がありますのでご注意ください。

このサイトのトップページに、Willさんいんの Facebook ページの投稿を表示するため、公式プラグインの Like Box を使用していました。

ところがこの Like Box、6月23日に廃止となり使えなくなるとのことで、新しい Page Plugin に移行するよう勧められています。

With the release of Graph API v2.3, the Like Box plugin is deprecated and will stop working on June 23rd 2015. Use the new Page Plugin instead. The Page Plugin allows you to embed a simple feed of content from a Page into your websites.

しかし、この新しい Page Plugin は、表示幅が 280px から 500px の間に制限されています。このサイトのトップページのレイアウトは、Facebook 表示領域を PC 画面で624px に設定しているため、124px もの余白ができてしまいます。

また、Like Box にしろ、Page Plugin にしろ、JavaScript で読み込んで表示しますが、実質はインラインフレームの中で facebook.com のページを表示していますので、フォントサイズや色などを CSS でコントロールすることが出来ません。その上、フォントサイズが 13px などに固定されているため、Internet Explorer では文字のサイズを変更できないことも気になっていました。

“jquery.neosmart.fb.wall を導入しました” の続きを読む »

アイテムのアップロード先フォルダ選択時のディレクトリ設定

この記事は2015年2月6日に書かれたものです。情報が古い可能性がありますのでご注意ください。

Movable Type で画像やファイルをアップロードする際の、デフォルトのアップロード先を任意のディレクトリに設定するカスタマイズについては、様々なブログ等で紹介されています。”MTディレクトリ/tmpl/cms/include/asset_upload.tmpl” を “MTディレクトリ/alt-tmpl/” 以下にコピーして、先頭に以下のように追記するというものです。

“uploads” というディレクトリに設定する場合は

<mt:setvar name="extra_path" value="uploads">

“uploads/年/月/日” というディレクトリとする場合は

<mt:setvarblock name="extra_path">uploads/<$mt:date format="%Y/%m/%d"$></mt:setvarblock>

ブログ毎に設定を変える場合は

<mt:If tag="BlogID" eq="2">
<mt:setvarblock name="extra_path">uploads/<$mt:date format="%Y/%m/%d"$></mt:setvarblock>
<mt:Else>
<mt:setvar name="extra_path" value="uploads">
</mt:If>

という感じです。これでデフォルトのアップロード先が設定されます。

しかし、アップロードの際にフォルダ(ウェブページで設定したフォルダ)を選択すると、せっかく設定したアップロード先が消えてしまい、フォルダ名のみとなってしまいます。これではそのフォルダに属すウェブページの html ファイルと同じディレクトリに画像がアップロードされてしまい、予めアップロード先を設定した意味がありません。

“アイテムのアップロード先フォルダ選択時のディレクトリ設定” の続きを読む »

フロントエンドエンジニアのblog始めます

この記事は2015年1月1日に書かれたものです。情報が古い可能性がありますのでご注意ください。

Willさんいんのフロントエンドエンジニア石輪です。日々粛々とマークアップ作業に勤しんでいます。

十数年前からコーディングをやってきましたが、近年は HTML や CSS 以外のコードも書くようになり、jQuery の記述や WordPeress のテーマ作成等においては分からないことが多く、これまでどれだけ沢山のブログ記事に助けられたか数知れません。

プログラミングなど Web のバックエンド技術は、そのソースコードが公開されてなければ知ることができませんが、HTML や CSS、JavaScript といったフロントエンド技術はオープンなもので、ブラウザでソースを表示して辿って行きさえすれば、誰もがそれを見ることが出来る共有技術です。

しかし、CMS の使用が当たり前のようになった今、我々フロントエンドエンジニアが扱わなければならない技術も増えてきました。特に WordPress のテーマ作成は PHP 言語によるプログラミング的要素が多く、ある意味バックエンド技術であり、サイトのソースからは見ることができません。それが、沢山のエンジニアの皆さんのブログによって様々な手法が共有されており、40代後半の固い頭で日々勉強させてもらっています。

予てから一制作会社のエンジニアとして、技術を与えてもらってばかりでなく、私が試行錯誤し、実現できた技術は世の中に共有すべきだと考えていました。過去にブログを書いていたこともありますが、この数年間閉鎖しており、この度のWillさんいんのサイトのリニューアルを機に、新たにブログを始めることにしました。

「フロントエンドエンジニアのblog」というそのまんまのタイトルですが、Webアクセシビリティというフロントエンド技術についても、いろいろ発信していきたいと考えています。どうぞよろしくお願いします。

1 2

page top