2015年 4月 の投稿一覧

Twitterで特定のキーワードを含むツイートを自動ふぁぼしてくれるサービス「toolset」

toolset

Twitterで自動ふぁぼ、フォロー整理が簡単に

toolsetはTwitterで自動ふぁぼやフォロー整理ができるサービスです。以下のことができますよ。・指定したユーザのフォロワーを一覧表示・指定したキーワードを含むツイートをしたユーザを一覧表示・指定したキーワードを含むツイートを自動ふぁぼ・フォローバックしてくれない人をアンフォロー中でも自動ふぁぼが便利かなと思いました。フォローバック(フォロー返し)してくれてない人の一覧表示も人によっては使えるかも。以下に使ってみた様子を載せておきます。 続きを読む

Twitterで特定のキーワードを含むツイートを自動ふぁぼしてくれるサービス「toolset」

toolset

Twitterで自動ふぁぼ、フォロー整理が簡単に

toolsetはTwitterで自動ふぁぼやフォロー整理ができるサービスです。以下のことができますよ。・指定したユーザのフォロワーを一覧表示・指定したキーワードを含むツイートをしたユーザを一覧表示・指定したキーワードを含むツイートを自動ふぁぼ・フォローバックしてくれない人をアンフォロー中でも自動ふぁぼが便利かなと思いました。フォローバック(フォロー返し)してくれてない人の一覧表示も人によっては使えるかも。以下に使ってみた様子を載せておきます。 続きを読む

画面サイズに合わせて高さを指定する3つの方法

縦長のサイトなどで、1つのセクションが画面の大きさと同じになっていることがよくあります。横幅はwidth: 100%;でいいわけですが、高さを画面サイズに合わすにはちょっと工夫が必要です。今回、画面サイズに合わせて高さを指定する方法を3つ紹介します。

画面サイズに合わせて高さを指定する3つの方法

縦長のサイトなどで、1つのセクションが画面の大きさと同じになっていることがよくあります。横幅はwidth: 100%;でいいわけですが、高さを画面サイズに合わすにはちょっと工夫が必要です。今回、画面サイズに合わせて高さを指定する方法を3つ紹介します。

記事に含まれる1枚目の画像を抽出する

WordPressで記事に含まれる1枚目の画像を抽出する関数をご紹介します。 抽出した画像を使ったサムネイル付きの記事一覧を作る場合などにご利用ください。

2015/4/17 更新 情報が古くなっていたため、アイキャッチ画像に対応する等、ソースコードを書き換えました。 以前公開していたソースコードにはphp5で廃止された関数等が含まれていますので、ご注意ください。

WordPressでは、記事にひもづいた画像を出力するプラグインは存在しますが、過去にアップロードした画像などを使いimgタグで出力した場合などにうまく出力されないケースが多いようです。 以下のサンプルコードでは、アイキャッチが存在する場合はアイキャッチ画像を、記事に紐付いた画像が存在する場合はその1枚目の画像を、どちらも無い場合は本文中に出てくる1つめのimgタグの画像を取得します。

取り急ぎの対応内容をそのまま記載していますので、phpが分かるかたはもう少しコードを整理してから実装されることをお勧めします。

function getPostImage($mypost, $size = 'MEDIUM'){ if(empty($mypost)){ return(null); } if(has_post_thumbnail($mypost->ID)){ // アイキャッチ画像を設定済みの場合 $file_id = get_post_thumbnail_id($mypost->ID); }else{ // アイキャッチが設定されていない場合 $files = get_children(array('post_parent' => $mypost->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image')); if(is_array($files) && count($files) != 0){ $files = array_reverse($files); $file = array_shift($files); if(is_object($file) && isset($file->ID)) $file_id = $file->ID; } } if(isset($file_id) && !empty($file_id)){ // アイキャッチまたは添付されているファイルIDが取得できている場合(altは記事タイトルを使う) if(!empty($size)) $res_temp = wp_get_attachment_image_src($file_id, $size); else $res_temp = wp_get_attachment_image_src($file_id); if(is_array($res_temp)){ $resultArray = array( "url" => $res_temp[0], "alt" => $mypost->post_title ); } } if(!isset($resultArray) || empty($resultArray)){ // ここまでで画像が取得できていない場合は、記事本文中からimgタグを拾う if(preg_match('/<img([ ]+)([^>]*)src=["|']([^"|^']+)["|']([^>]*)>/',$mypost->post_content,$img_array)){ $resultArray["url"] = $img_array[3]; // ALTを取得 preg_match('/alt=["|']([^"|^']+)["|']/',$img_array[0],$alt_array); if(!empty($alt_array)) $resultArray["alt"] = $alt_array[1]; else $resultArray["alt"] = $mypost->post_title; } } // ここまで来ても取得できていなければnullを返す if(!isset($resultArray)) $resultArray = null; return($resultArray); }

この関数を、テーマのfunctions.php内に記述します。

動作を簡単に説明しておきます。

引数が無い場合は、何もせずそのままnullを返しますので、No Image画像を出力するなどの判定条件として使用可能です。 次に、アイキャッチ画像が設定されているかどうかを判定し、設定されていればファイルIDを取得します。 アイキャッチ画像が無い場合は記事作成時にメディアを追加ボタン等を使って挿入された画像があるかどうかを判定します。 こちらも存在する場合はファイルIDを取得します。

続いて、ファイルIDが取得できている場合は実際の画像の取得を行います。 ここでは、wp_get_attachment_image_srcを使用していますが、リンクだけであればwp_get_attachment_linkを使っても構いません。

ここまでの処理で画像が取得できていない場合は、記事本文中のimgタグがあるかどうかを検出します。 同時にimgタグに含まれるsrc属性に設定されているURLを取得し、その後alt属性に設定されているテキストを取得します。

取得した画像の情報は$resultArrayに格納され、配列変数が返されます。

テーマから呼び出す場合は、getPostImage($post)のように、引数に抽出したい記事の配列変数をセットしてください。 例を以下に記載しておきます。

$postImage = getPostImage($post); if($postImage == null){ // 画像が無い場合の処理:No Image画像をセットするなどを記述 }else{ // 画像がある場合の処理 // 例では、imgタグのセット方法をご紹介しておきます echo '<img alt="' . $postImage["alt"] . '" src="' . $postImage["url"] . '" width="出力したい幅" />'; }

超シンプルjQueryアコーディオンメニュー矢印付 プラグインなし

こちらの記事で書きましたシンプルアコーディオンメニューに、矢印(画像)をつけた方法のリクエストがありましたので、下記にご紹介します。 メニューの横に矢印の画像をつけて、サブメニューが開いているときは矢印が下を向き、サブメ […]

新型 Macbook Retina 12 レビュー

新型Macbook Retina 12インチを買ってきました。 CPUがIntel Core Mというところに不安を感じ、受付開始の4月10日16:01にCTOモデルを即オーダーしたのですが、なんとお届けは5月10日以降。 翌日LABIに寄ってみたら1.2GHzモデルの在庫を確保できたので、オンライン予約はキャンセルし早速使い始めています。

まず箱から取り出した印象としては、Macbook Air 11インチを初めて買った時に近く、軽!薄!ちっさ!でした。 気づいたらいつの間にかなくなっていたディスプレイ下のMacbookロゴは戻ってきたんですね。 今回のMacbookで追加されたスペースグレー、かなりデザイン面では気に入っています。

USB-Cが1つだけってどうなの?

これ、はっきり言ってものすごく不便です。 本体入手時は(これを書いている今も)、拡張用のアダプタが手元に届いていません。 つまり、既存のUSB機器は何も使えない状況です。

今時、たいがいのものはクラウド化されているから、Dropbox等で事足りるだろうと思っていましたが、Time Machineのバックアップは使えないし、仮想環境へのWindows7のインストールはダイレクトにできないし、もちろんiPhoneを接続することも不可能と、意外と苦労しました。 ちなみに、BootcampではWindows7が入らないようですね。

結局データの移行はDropboxやAirDropを使いました。 Windowsは手持ちのライセンスの都合上で7を入れましたが、別のPCを使ってメディアからISOファイルを作成し、AirDropを使ってMacbookに転送するという手間のかかりよう。 しかも手持ちのWindows7はアップグレード版だったので、Windows7だけではなくアップグレード元とするためのVistaも同様に転送しました。

Macbook Retinaでは、電源もUSB-Cとなり、Magsafeではなくなってしまいました。 意外と電源コードって引っかけるので、Magsafe便利だったのに… 今回のMacbookは、おそらくiPad的な常に電源を繋ぐものではないという使い方を想定しているんでしょうね。 いずれにしても自分の使い方だと、自宅用とオフィス用にアダプタが必要なので、もう一つアダプタを購入します。

Core Mのパフォーマンスは?

Core Mについては、やはり非力だなと思う場面もあれば、意外と頑張ってると思う場面もあります。 曖昧な言い方になってしまいますが、使い方次第です。

データ移行等、大量のファイルをハンドリングしてCPUに負荷がかかるような処理をさせると、すぐにレインボーカーソルが出てきます。 が、Photoshopなどのアプリケーションは意外とサクサク動きます。 実はPhotoshopって使い方によってですが、それほどCPUパワーを必要としないので、それほど苦になることはありませんでした。 Premiereでがっつりエンコードするとかだと、おそらくダメだと思います。

何よりすごいのはファンレスなので静かなことだったりしますが、負荷が高いことに気づかない原因でもあったりします。 本気で負荷をかけていないので発熱や電池持ちへの影響は不明ですが、何も考えずに負荷をかけ続けるとなんとなくヤバそう。。 とはいえ、通常のオフィス業務程度であれば、長時間使い続けても問題なさそうなイメージです。

キーボードとトラックパッド

キーボードはキーピッチは十分なのですが、やはり浅いので正直、慣れが必要だと思います。 トラックパッドは、こちらも擬似クリックは浅めで新型Macbook Proの方がクリック感がある印象です。

購入前は若干割高感を持っていましたが、意外にも十分実用レベルであり適正価格だと思います。 CPU負荷がかかると、一瞬あれ?と思うことはありますが、オフィス系やブラウジング用だけでなく、ちょっとした開発作業ぐらいであれば普通に使えそうです。 出たばかりのアップル製品なので、不具合等々ちょっと怖いですが、さらに使い込んでみたいと思います。

「現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4 」を執筆しました

{ "@context" : "http://schema.org", "@type" : "Article", "name" : "「現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4 」を執筆しました", "author" : { "@type" : "Person", "name" : "Hiro" }, "datePublished" : "2015-04-10", "image" : "http://design-spice.com/wp/wp-content/uploads/2015/04/img_main_jyoshiki.jpg" }

先日、執筆に携わった「現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4」が発売されました。 本書は、大竹さん中江さんギンペイさんと僕の4名での共著となります。企画は株式会社まぼろし様、出版はMdN様です。

他の著者の皆さんは個人的にも実力のある方と思っており、ひとりひとりが得意とする部分で力を発揮してますので有用な内容に仕上がったかと思います。 »現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4

本書の構成

本書のタイトルに「HTML+CSSコーディング」とありますが、基本的なHTML+CSSコーディングの知識は備えてる前提で、そこから一歩進んだ内容となります。Web制作のワークフローにそって「環境構築」→「HTMLコーディング」→「CSSコーディング」→「最適化・検証」を大きな項目とし、それぞれで今おさえておきたい情報や技術を紹介しています。

想定しているターゲットとしては、コーディングを主にやってる方、HTML/CSSは理解してるが最新の技術には明るくない方としてます。また、現在HTML/CSSを勉強中の方でもここを目標にしてもらうのもいいでしょう。

構成は以下の通りです。

  • INTRODUCTION 最近のコーディングの潮流 現在の現場におけるモダンなワークフロー
  • CHAPTER1 目的に合わせたコーディングの環境整備 Node.js&Ruby/Git/検証ツール/仮想環境/パッケージマネージャー
  • CHAPTER2 HTMLコーディング HTML5でのマークアップ/短縮記法/フォーム関連の新機能/カスタムデータ属性/SVG/音声と映像/Canvas/構造化マークアップ/SNSシェアボタン/マルチデバイス対応/Webアクセシビリティ
  • CHAPTER3 CSSコーディング Sass&LESS/スタイルガイド/レガシーブラウザ対応/セレクタの活用/CSS3のプロパティ/Webフォント/アニメーション/レスポンシブWebデザイン/CSSフレームワーク/CSS設計の手法
  • CHAPTER4 最適化・検証 Grunt・gulpによる自動化/パフォーマンス最適化/ブラウザ搭載の検証ツール
  • CHAPTER5 そのほかよく利用される技術・ツール テンプレートエンジン/静的サイトジェネレータ/エディタ/便利ツール/最近のJavaScriptの動向

HTML+CSSコーディングの最新常識とは?

数年前であればHTML+CSSコーディングは、PhotoshopやFireworksで作成したデザインカンプそのままを(X)HTML+CSSでコーディングできれば十分でした。しかし今はそれだけでは十分とは言えない状況になってきてます。個人で完結するのであればどんなワークフローでも選択可能ですが、チームでの制作や他の会社と仕事を行う時には、どんな技術・知識を身につけてるかは重要なポイントとなります。仕事を依頼できる、できないに関わってきます。

常に技術や仕様は変わり続けてます。新しいものが世に出てきたばかりの頃はごく限られた人のみが知るところですが、それを身につける人が徐々に増えることで一般的な技術・知識となっていきます。そのような状態を常識と言い変えることができるかと思います。

とは言え、どのような技術・知識を一般的とするかはその人の環境によって変わります。従って何を基準に「常識」とするかを決めるのも難しいところです。 そのため本書に書かれている内容が「これがHTML+CSSコーディングの常識だ!」と断言はできませんが、実際に現場で仕事をしてる体験から身につけておくといい、知っておくといい項目をピックアップしています。これが正解ではないし、全てではないですが、今のWeb制作はこのような状況なのだということを感じとってもらえるかと思います。

次の一歩を踏み出すために

本書で取り上げてる各トピックは一から十まで全てが網羅されてる訳ではありません。トピックによってはそれだけで書籍一冊になるほど情報量の多いものもあります。書籍という限られたページ数の中で全ての項目を掘り下げることは実質不可能です。もし全ての項目を深く掘り下げるのであれば何千ページとなるでしょう。

僕自身経験があるのですが、全く新しい事柄は時に全然理解が追いつかない時があります。具体的にイメージできなくて言葉が右から左に流れてしまうような。その状態では幾ら時間をかけても殆ど頭に入ってきませんし、学ぼうという気持ちも湧きません。 ネットで見つけた情報をコピペすれば取り敢えず新しい技術を使うことができますが、そこから違うことをやろうとした時には、コピペするためにまた同じケースの情報はないかと探さなければならなくなります。

その技術がどんな仕組みで、どんな作用をして、どのように使えるのか、そういった基本の理解があるかないかで身につき方は大きく変わります。また基本を抑えておくと、問題が生じた時の解決や、応用など自分で発見できるようになります。

本書では基本的な部分や要点を絞って解説してます。次の学びの一歩を踏み出すのに本書が役に立てば幸いです。

学ぶ楽しみ

最近はよく「今どき○○ができないと」「○○くらい知らないと」など、耳にすることがよくあります。このような台詞を聞くと、危機感から「勉強しなくては!」と焦る方もいるかも知れません。それもひとつの動機なので何もないよりはマシなのですが、個人的にはそういう動機は好きではありません。強要される勉強は学生時代までで十分です。

新しい技術や知識を身に付けることはたくさんのメリットを生みます。

作業が速くなったり、無駄な工程が省けたりできるので、その分空いた時間を趣味や友人との時間に使えます。更に新しい技術を学ぶ時間に費やしてもいいでしょう。 今まで単語としてしか知らなかったものを理解することで、エンジニアや他の職域の方とのコミュニケーションがより取れるようになるかも知れません。 新しいことを学ぶことは、新しい視点を持てるようになります。漠然とやっていた作業に意味が見つかることもあります。 単純に新しいことを学ぶのは、知的好奇心を満たしてくれます。

そのようなメリットを動機にどうせなら前向きに学んで欲しいと思います。 本書の内容とは全然関係ないことですが、そのような気持ちで読んでもらえれると嬉しいなと思ってます。

締め

概念的な話になってしまいましたが、具体的な内容は本書をみてください。 多分今の時期は大型の書店であれば陳列されてると思うので、手に取って中身をパラパラと見て「自分に合うな」と思いましたら購入してもらえれば嬉しいです。

最後に。

本書の制作に関わりました全ての方、また既に購入いただいた全ての方に感謝しております。ありがとうございました。

Similar Posts: