はてなブックマーク

こんにちは。EXP ひのたんです。 最近アイコンフォントを作って GitHub と npm で公開したのでその紹介記事です。 feathericon Web サイト: http://feathericon.com/ GitHub: https://github.com/featherplain/feathericon npm: https://www.npmjs.com/package/feathericon 名前は私の Web 上のハンドルネームである「featherplain (フェザープレイン) 」と icon を合わせた 「feathericon (フェザリコン) 」です。 アイコンフォントと言えば Font Awesome や GitHub の Octicons のアイコンフォントの巨人がすでに存在します。Web フォント化していなくとも、「vector free icons」

どうも、featherplain こと Hinotan です。WordPress のカンファレンス WordCamp Kansai 2016 で 「WordPress テーマの継続的インテグレーション(CI)」 という、割りとニッチな話をしてきました。 以下の内容はセッション中やスライドで触れなかったことだけをかいつまんで書く形になるため、スライドを見た前提で進んでいきます。スライドとあわせて読んでいただいて、少しでも参考になれば幸いです。 テストツールの導入について スライドの中盤あたりで紹介をしている PHP CodeSniffer (PHPCS) や WordPress Coding Standards, PHP Mess Ditector (PHPMD) は Composer 経由でインストールできます。もちろん単体でインストールもできますが、Composer の方が管理が楽なので

スクロール位置に応じて画面内に固定されたりされなくなったり、そんな要素を Sticky 要素と呼んだりします。スクロールをトリガーに CSS の position プロパティを切り替えて実装するのが一般的なやり方と思いますが、iOS の Mobile Safari だけはスクロールを一度止めるまで position の変更が反映されない現象が起こります。 文字で説明しても全く分からない気がしていますので、次の画像を御覧ください。 こんな感じで一度スクロールをやめるまで、position: fixed に切り替わって上部に固定されるはずのその要素はまるで応答無く画面外へと消えていきます。メニューを使った例ですが、メニューでなくとも同様です。これは PC ブラウザや Android 端末では発生せず、スクロールイベントの実行頻度を下げたり、Passive Event Listeners を用い

世の中の声に耳を傾けて、商品開発やサービスをより良くする。様々な企業で行われているマーケティング活動です。 「世の中の声に耳を傾ける」と書くと簡単ですが、実際にはモニター調査や、アンケート調査などで出来るだけ本当のお客様の声を聴く必要があります。 しかし、アンケート調査会社に依頼するとサンプル数が増えれば、それだけ費用も掛かってしまうため悩ましいところです。 世の中にあるSNS投稿をマーケティングに生かそう SNS上の様々な人からの投稿に耳を傾けマーケティングに生かす、という考え方が「ソーシャルリスニング」です。モニターやアンケートと異なり投稿者が自発的に感想を述べる形になるので、より自然な反応を取得できる利点があります。ただ、世の中の膨大な投稿をどのように取得するか……。 そこで、今回は多くのユーザが使用しているSNSサービスtwitterから「ソーシャルリスニング」のデータを取得するP

vw, vh, vmin, vmax という単位があるのをつい最近知りました。 随分昔からあったものらしいですが、大変便利なものだったので書いておこうと思います。 上記4つの単位はそれぞれブラウザのビューポートに対する (割合) パーセンテージを指定する単位です。具体的な定義は次の通りです。 単位 説明 vw ビューポートの幅に対する割合 vh ビューポートの高さに対する割合 vmin vw と vh の小さい方に対する割合 vmax vw と vh の大きい方に対する割合 活用例 iPhone6 を例にするとビューポートの幅が375px。このとき100vw が 375px、1vw は 3.75px 相当のサイズになります。 画面サイズ幅一杯の正方形な要素が作りたい時とか { width: 100vw; height: 100vw; } であったり、画面いっぱいのモーダルも、親要素に影響さ

どうもEXPコハダこと清野です。 WordBench東京 2月度勉強会でお話した「WordPressテーマの基本的な仕組み」のスライドが見つかったので、3ヶ月も経過していますがフォローアップの記事を書きたいと思います。 WordPressのオリジナルテーマを作りたいと思い始めた入門者の方がまず初めに知っておくとよい事を３つに絞ってまとめました。 WordPressのテーマって？ 執筆したWordPressの書籍の宣伝もかねて、「ビジネスサイトをこれからつくる WordPressデザイン入門 サイト制作から納品までのはじめの一歩」から引用。 WordPressでは簡単にサイトの外観を変更できます。この外観を「テーマ」と呼びます。 書いた投稿やコンテンツは変えずに、外観だけを変 更できるので、そのときの気分に合わせてテーマを変 更することもできます。公式の無料テーマは執筆時点て

自分には収集癖があります。 とにかく集めたいという欲求があって、なにも捨てられない。そして部屋の中が物であふれかえっています。 実際、Amazonの箱を集めたくなり部屋の中で空き箱があふれていました。(あまりに場所を取るので先日、意を決して捨てることに成功しました) そんな収集癖を持つ自分が、もう10年以上収集しているもの、それは「ポケットティッシュラベル」です。 2002年作成「ポケットティッシュダイジテン」 そのラベルを今まで自分でスクラッチ開発したサイト「ポケットティッシュダイジテン」でインターネットで公開しています。2002年に作ったのでCSSも使わずに、テーブルレイアウトで角丸を張り付けたりして、デザインしていました。 懐かしのtableレイアウト それから10年以上が経ち、モバイルファーストとかSNS連携とか新しい技術を取り入れたいっす！ということになったので、今までの好き勝手

今年こそはせめて月に1記事くらいは書こうと思っているショートホープこと齋木です。 『CSSフレームワークはテンプレートじゃない』 少し前の話になるが、『これからのWebサイト設計の新しい教科書 CSSフレームワークでつくるマルチデバイス対応サイトの考え方と実装』という書籍の出版イベントの時に、著者の一人である松田さんが『CSSフレームワークはテンプレートじゃない』ということをおっしゃっていた。それまで僕自身ろくにCSSフレームワークを使ったこともなく、なんとなくCSSフレームワークに手を出しづらい感じがあったのだが、それまでのもやもや感が吹き飛ばされる思いだった。 デザインテンプレートのような使い方を想定して、なんでもかんでもCSSフレームワークのものを使おうとするから「似たようなデザインになる」という変なことになるわけで、『必要な部分だけ読み込ませて使えばいい』というやはり著者の一人のこ

昨年の”2014年 Web 制作に使い始めてよかったツールとかいろいろまとめ” に引き続き Web 制作業4年目のぼくが2015年に取り入れてよかったあれこれリストアップしてみます。昔からあるものも含まれていますが、その辺り2015年と共に水に流して頂きますようお願いします。 React https://facebook.github.io/react/ JavaScript フレームワーク戦争を語ると話が長いですが、ぼくは React 採用しました。Material UI など既にコンポーネントが豊富なことや ES6 で書ける、一方通行のバインディングなど魅力的です。 react-starter-kit https://github.com/kriasoft/react-starter-kit React Express Flux ES6+ JSX Babel PostCSS Webpa

Sublime 一筋でしたが最近は Atom ばかり使っています。Atom でないとできないことはそれほどないし、Chromium ベースなので動きはもっさり、特に起動とファイル開いた時の Syntax 当たるまでが遅いですが Chromium ベースなのでカスタマイズしやすくて、結果 まあいいか と。Brackets は多機能すぎるのと Adobe なので警戒しております。 そんなわけで、エディタ導入したら必要になるであろう Git を使った 設定のバックアップと複数マシン間での同期方法をさくっと紹介します。 インストール Homebrew Cask にありますので $ brew cask install atom でいけます。特に何もしなくても $ atom -v $ apm -v でバージョン情報出ると思います。出なければ Atom 起動してメニューバーの Atom->Install

【使ってみよう（・∀・）】WordPressのローカル環境 Vagrant & VCCW 【入門者必見！】 この記事は「WordCamp Tokyo2015リレーブログ」の第8日目の記事です。 昨日の最近ムジナになったたぬきさん（謎）に引き続き、こんな機会でもないと記事が書けなくなってしまったショートホープこと齋木ですorz 最後に書いた記事が2月とかどういうことだ！ちっとも「more publishing」してないやんか！ということで自分で自分のおしりを叩いてpublishします。 できるだけ簡潔に、わかりやすく書いたつもりですが、もし、わからない・違う！などあればどんどん突っ込んでください！ 1. Vagrantの導入 1-1. VirtualBox の導入 https://www.virtualbox.org 今年の7月にVirtualbox 5.0が正式リリースされた。トップページ

Foundation 割と好きめのハマチです。 多機能過ぎて取っ付きにくい印象の Foundation でしたが、その全てを使いきらなくても十分便利でしたので数回に分けてかじっていこうと思います。 Foundation の準備 Foundation があればなんでもいいですが、今回は私がいつも開発用に使っている gulp-web-starter を使ったサンプルで紹介します。このサンプルは Shell Script が動く環境 sass > 3.4 sass-globbing node.js > 0.12.0 npm > 2.7.3 bower > 1.3.12 があれば上手く行くと思います。また、この記事が書かれた時点での Foundation のバージョンは5.5.1です。 Foundation の利用方法はいくつかありますが、この例では Bower を使った方法になります。 まずは

2015年12月1日追記 : Twitter のツイート数取得 API count.json の提供終了に伴い、内容を修正しています。 EXP では以前まで WP Social Bookmarking Light を使っていましたが、つい最近オリジナルのシェアボタンに切り替えました。ただし、pocket は公式の API が公開されていないので公式ボタンを採用しています。この記事では Facebook、はてブ、Twitter のオリジナルシェアボタンの実装方法を紹介していきます。 目次 Facebook 事前知識: 公式ボタンの設置方法 オリジナルボタンの実装方法 はてなブックマーク 事前知識: 公式ボタンの設置方法 オリジナルボタンの実装方法 Twitter 事前知識: 公式ボタンの設置方法 オリジナルボタンの実装方法 pocket さいごに PHP JavaScript Faceboo

どうもどうもお久しぶりでございます、EXP の Hinotan です。私の前回の記事の日付を見てみたら、なんと１年も前だったんですね―。こりゃイカン！ ということで、今回は EXP の WordPress オリジナルテーマ開発で各制作フローごとに使用した技術・ツールなどの紹介をしたいと思います。 目次 チーム開発で必要なドキュメントの策定: GitHub Wiki デザイン: Sketch Page と Artboard の機能 ダミー画像の生成もプラグインでらくらく 環境構築 GitHub Flow でチーム開発 開発マシン: vccw gulp でビルドとコンパイル コーディング Jade でプロトタイピング BEM に準拠した CSS 設計 CSS フレームワークの foundation を Sass でカスタマイズ _s ベースで WordPress へ組み込み 最後に 1. チー

Facebook上でこの投稿をしたのが2/17だったのですが、今日（まだその4日後ですよ…）見たらバージョンが2.2.1になっていましたw 事程左様にものすごく頻繁にバージョンアップが行われています。バグフィックスもありますが、機能追加も含めてどんどん仕様も変化しますので、ケースによってはバージョンアップ後に動作しなくなる可能性もあります。その時は焦らずに npm install [email protected] --save-dev のようにバージョンを指定してインストールすることが可能ですのでお試しください（package.jsonからインストールしている場合はpackage.jsonの記述を書き換えましょう）。 2015.2.12 追記 souさんから 正式にはBrowserSync（ハイフンなし）だよって某氏が突っ込んでましたw というツッコミをいただいたので表記を訂正しました。

久しぶりのショートホープです。ちょっと見てみたら前回の更新が4月でした本当にごめんなさい。日々の忙しさにかまけて更新をすっかりサボっていましたが、ちゃんと仕事はしてます。 先日、5年ほど使っていた白ポリカたん（MacBook 2008 Early）からMBP（MacBookPro 2013 Mid）にメイン機をバージョンアップしたものの、バタバタしてていつまでたっても環境の移行が終わらないorz そして速さに慣れない(´・ω・｀) いきなり告知 いきなりだが、この記事は来たる10/11（土）に大田区蒲田にある大田区産業プラザPiOで行われる、WordPressのイベントとしては日本で最大規模の「WordCamp Tokyo 2014」開催に向けてのリレーブログのひとつとして書いている。 昨日のwayさんの記事に引き続き、この記事がリレーブログの第二弾、ということになる。 ちなみに、こちらの

何処かで聞いたことのあるタイトルですか? 気のせいです。Web 制作業3年目のぼくが2014年に取り入れてよかったあれこれリストアップしてみます。残念ながら2014年の最新はこれだ! という感じにはならず以前からあるものが殆どになりましたが、2014年と共に水に流して頂きますようお願いします。 BEM https://bem.info/ 最初の拒絶反応から一転、もう BEM 無しに CSS 設計はできなくなりました。BEM の思想に対して記述の方式は色々ありますが、ぼくは block__element--modifier と接続する MindBEMding の書き方をしています。 Template engine (Jade) http://jade-lang.com/ 静的サイトや CMS サイトのプロトタイプモデルとして html を 生成する際に重宝しています。ぼくは Jade を使用

この記事はSublime Text Advent Calender 2014の22日目の記事です。 先日参加したCPI x CSS Nite x 優クリエイト「After Dark」（17）「webクリエイターのための情報交換所 スペシャル」のライトニングトークで燃え尽きてしまったショートホープです。年内は吸い殻のフィルター部分がお送りします。 Advent Calender Web制作者ならこの時期目にすることが多いだろうAdvent Calenderに初めて参加してみることにした。とはいえネタがなくて既に日付は担当日に…orz そこ、焼き直しとか言わないw 今年の3月にsublimeかわいいよsublime(；´Д｀)【Sublime Textの（初期）設定環境を晒す】というタイトルで自分の設定を記事にした。 ちょうどオレンジ本の出版イベントと重なったこともあって、イベントのFBページ

ここ最近「Web関係者によるWebと全く関係ないテーマの飲み会」づいているショートホープです。全然関係ないテーマで大盛り上がりしていて、こういう集まりもいいもんだな、と思いました。 僕がなにかできるとしたら「Web制作者のためのバイク乗り飲み会」くらいしか思いつかないんだけど、その『飲み会』、絶対にやっちゃアカンやつや…(´・ω・｀) さて本題 WP-Dのメンバーでもあるよつばデザインの後藤さんからお声がけいただいて、去る12/18にKDDIウェブコミュニケーションズ セミナールームで行われたCPI x CSS Nite x 優クリエイト「After Dark」（17）「webクリエイターのための情報交換所 スペシャル」に参加し、「node.jsことはじめ・Browser-Syncで楽々コーディング」というタイトルのライトニングトークで登壇してきた。 ろくに登壇した経験もないのにいきなりC

突然ですが、WP-Eの面々と合宿に行ってまいりました！ 場所は長野の野尻湖「LAMP」 そう、あのLIGさんが運営しているゲストハウスです。 これが野尻湖です。とても、良い場所でしょう。 この景色が一望できる場所が1泊2,700円というお値段で泊まれます。 BBQメニューもあります。 火おこししているのはLIGを左遷になり今はLAMPを運営されている堀田さんです。 左遷はネタだという噂も出ていますが、本当に長野に左遷されていました。 なんかもう、LAMPの支配人が完全に馴染んでいる感じですね。 むしろ栄転なのでは… 場所の名前がLAMPなのでLAMP(Linux,Apache,MySQL,PHP)を勉強する合宿を開催しました。その場でさくらのクラウドを借りてLAMP環境を構築したり、コマンドでLinuxを操作する方法を勉強しました。 資料はアシアル塾のLinux超入門編を使っております。

台風８号が過ぎ、一気に夏が到来した感じで暑い日が続いておりますね。皆さま、如何お過ごしでしょうか？お久しぶりです、まゆげです！ 今回は、各フィードでちょっと盛り上がっていた「Google Noto Fonts」について書いていこうかと思います。 Google Noto Fontsとは Noto’s goal is providing a beautiful reading experience for everyone and for all languages. With visual harmony when multiple languages share a page. 引用元：https://code.google.com/p/noto/ Noto はすべての人が、複数の言語を扱うようなページでも読みやすいと感じられるようなものを目指して作られているようです。その目標の通り、かな

渾身の釣りタイトルからこんにちわ。あんどーです。ジョークに近い記事ですので、軽い気持ちでお読みください。 みんなFacebook大好きですよね？ Facebookは今やすっかり日本にも定着したSNSとなりました。 先日Facebookが数十分ダウンした際、Twitterのタイムラインは「Facebook落ちてる」一色になり、果てはNHKのトップニュースに上がっちゃうぐらいみんなFacebookが大好きだし気になってますよね？ でもなぁ・・・Facebookって「アレ」がなぁ・・・。 「アレ」とは？そう、お誕生日通知ですね。 心をこめたお祝いメッセージ？ 大抵の人は、お祝いの言葉を受け取るのは嬉しいものだと思います。 お祝いをする自分も、純粋におめでとうの気持ちと、お誕生日の方との思い出を振り返ってみたりして、言葉を贈るものですね。 ですがしかし、まだ知り合って間もない人、あまり面識自体が多

とても使い勝手のいいPHPフレームワーク、FuelPHPをただいま絶賛勉強中です。 先日、サーバーの更新で新しい環境にCentOSをインストールして、既存のwebサービスを移して運用しようとしたのですが、PHP4で書かれた多くの部分（中にはPHP3）が、warningやらFatalやらが出てきて、該当部分を書き直す事になりました。更新したマシンのPHPがすでに5.3だったためなんですが、いまさら5.2とか入れたりしません。推奨非推奨の確認もそうですが、そもそもダメな部分もあったりして、ほぼ作り直しな部分もありました。 今後も使っていただけるのであれば、統一されたフレームワークで作りなおしてみても面白いかも？ 探していたら、ありました。FuelPHP。なんかもう僕的には、JavaScript使っていて、初めてjQueryに触れた時のような感じがデジャヴのように蘇ってリフレインしてフラッシュバ