harada のアーカイブ

UXデザインツールのAdobe XDがすばらしい

2017年2月21日

新しいアプリのプロトタイプをデザインするにあたってUXデザインツールの[AdobeXD](http://www.adobe.com/jp/products/experience-design.html)をはじめてインストールしてみました。 ### Adobe XDとは > Adobe Experience Design CC(ベータ版)(以下、Adobe XD)は、Webサイトやモバイルアプリのデザイン、プロトタイプの作成をこれ1本で実現する、まったく新しいク
続きを読む

Font Awesomeでサイトに載っているアイコンが出てこない時はファイルを更新する

2017年2月17日

Font Awesomeをパソコンにインストールして、Cheatsheetに載っているアイコンをコピーして利用しようとしたときに、化けて出てこない場合があります。 それは単純にファイルが古くなっている場合です。 以下の手順でフォントファイルを更新しましょう。 1. Macの場合はフォントブックを開き、Font Awesomeファイルを削除します。 1. http://fontawesome.io/で最新のFont Awesomeファイルをダウンロー
続きを読む

FirefoxとAdobe Acrobatを利用してPDF/X-1aでwebページを出力する

2017年2月14日

覚書です。 ### Firefoxでの操作 1. 印刷したいページで「Command + p」のショートカットで印刷プロパティを表示します。 1. サイズなどを調整します。 1. 左下の「PDF」とあるプルダウンから、「Save as Adobe PDF」を選択します。 1. しばらく待つと「Adobe PDFとして保存」というダイアログが表示されます。 1. Adobe PDFの設定 を「PDF/X-1a:2001(日本)」にし、「続ける」を押
続きを読む

スマホでjQueryUIのautocompleteを2回タップしなければならない現象を解消する

2017年2月8日

.autocompleteのところに以下のオプションを付与するとスマホ版でも1回のタップで選択できるようになります。 ``` $("#input").autocomplete({ open: function(event, ui) { $('.ui-autocomplete').off('menufocus hover mouseover mouseenter'); } }); ``` ただし、これをするとPC版でhov
続きを読む

WordPressで画像アップロードで自動生成される画像サイズの種類が増えていた

2017年2月3日

WordPressのメディアアップロードで画像をアップロードすると、オリジナルファイルの他に、「設定>メディア」で設定したサムネイル・ミディアム・ラージ各サイズの画像が自動で生成されます。 ……と、思っていたのですが、uploadsフォルダを見ていたらいつの間にかもう一種類(medium_large - 768x9999)というサイズのファイルが増えていました。 でも「設定>メディア」に設定する欄はありません。 ぐぐってみると、こちらの記事に詳しくかいてあり
続きを読む

スマホでのスクロールがスムーズではないときに設定するCSS

2017年2月2日

webページをスマートフォンで開いたときに、表示はおかしくないのにスクロールが遅いというか突っかかるような感じがするときは、以下のCSSをまずは設定してみるといいようです。 ``` html { -webkit-overflow-scrolling: touch; } ``` プログラムの動きがおかしいのかな?と思っていたのですが、こちらを設定したところ一発でスムーズにスクロールされるようになりました。 参考:[スマホでdivスクロールを滑らかに
続きを読む

WP_Queryのパフォーマンスを上げられるかもしれない指定

2017年2月1日

以下の動きが不要な場合はそれぞれ以下の指定をWP_Queryに加えるとパフォーマンスがあがるかもしれないようです。 `'no_found_rows' => true` ページャー機能が不要な場合 `'update_post_meta_cache' => false` カスタムフィールド系を利用しない場合 `'update_post_term_cache' => false` タクソノミー系を利用しない場合 `'fields' => 'ids'` IDの
続きを読む

SQLで条件分岐するCASEステートメント

2017年1月25日

p.meta_valueに値が入っていて、その値がNULLの場合は0にし、値が入っている場合はその値をそのまま利用する。 ``` CASE WHEN p.meta_value IS NULL THEN 0 ELSE p.meta_value END ``` 参考:[【SQL】CASEステートメント](http://blog.livedoor.jp/akf0/archives/50846472.html)
続きを読む

jQueryUIのautocompleteをフォームクリックで表示する

2017年1月24日

通常の記述だと下カーソルか、何か入力した際にしか表示されないのですが、フォームをクリックするだけで候補リストを出したいとおもい調べたところ以下の方法でできました。 ``` var stationsList = [ '東京駅', '上野駅', '品川駅', ]; jQuery('#IDを入力').autoc
続きを読む

プログラムでカスタムタクソノミーの項目を一気に追加する

2017年1月19日

プラグインを利用すること無く、カスタムタクソノミーに複数の項目を一度に追加したい場合などは以下を実行すると追加できます。 ex.WordPressでcourseというカスタムタクソノミーを追加している場合 ``` addCourse(); function addCourse(){ // wp_insert_term( '追加する項目の名前', 'タクソノミー名', array('slug' => '追加する項目のスラッグ')); wp_insert_te
続きを読む

number_format関数は小数点以下を四捨五入する

2017年1月16日

数字を3桁区切りにしてくれるnumber_format関数。 これに小数点込みの数字を含めると、四捨五入になるようです。。 知ってて利用しているのならいいのですが、無意識だと危ないですよね・・・! 四捨五入・切り捨て・切り上げにはそれぞれ以下の関数を利用します。 ``` $x = 123.5; //四捨五入 round( $x );//結果:124 //切り捨て floor( $x );//結果:123 //切り上げ ceil
続きを読む

サイトへのすべてのアクセスを特定の一つのURLにリダイレクトする

2017年1月13日

xxx.xxx.com といったURLのサイトを閉鎖して、アクセスを別のURLに飛ばすようにしたい際などは、以下のように.htaccessに記述します。 ``` RedirectMatch 301 .* http://zzz.zzz.com/ ``` 参考:[サイト引っ越し時のリダイレクト設定](http://www.weblog-life.net/entry/2016/03/04/060000) [リダイレクトチェックツール](http://tool.
続きを読む

AjaxでもURLを変更したい

2017年1月6日

pushStateという関数で、履歴やURLを操作することができるようです。 たとえばWordPressの検索画面をAjaxで動かしていたら、以下のようにすることで、 AjaxでもURLを変更することができます。 ``` jQuery(document).ready(function($) { var search_query = $("#s").val(); window.history.pushState(null, null, '/?s='+ s
続きを読む

Webページを印刷するときの余白をCSSで設定する

2017年1月5日

webページを印刷する際指定しないと結構大きな余白がとられてしまいますので、余白なしに設定したい場合などは以下のように設定します。 ``` @page { margin: 0; } ``` ただし、印刷時の動作はブラウザによって大きく異なるため十分に確認を行うようにしてください。 また横向きと縦向きも以下のように指定できますが、こちらは効かないブラウザも多いようです。 ``` @page { size: landscape; //横
続きを読む

PHP:指定した数値から数値までの範囲を作成する

2016年12月28日

1円〜10,000円、10,001円〜20,000円など、ECサイトでよくみる範囲をPHPで簡単に作成する方法です。 ### 1から100000まで10000毎の範囲を作成する場合 ``` foreach (range(10000, 100000, 10000) as $number) { $min_number = $number - 9999; echo $min_number . '〜' . $number . ''; }
続きを読む

WordPress連想配列から指定した内容だけを取得する

2016年12月27日

ID一覧のみを取得したい場合は以下のように指定します。 ``` $args_total = array( 'post_type' => 'posts', 'post_status' => array('publish'), 'posts_per_page' => -1, 'orderby' => array( 'post_title' => 'ASC', 'room_numbe
続きを読む

WordPressで2つ投稿タイプの条件に合致する投稿を取得する

2016年12月22日

とりあえず以下の記述で取得できたのでメモしておきます。 post_type01→一つ目のポストタイプ post_type02→二つ目のポストタイプ meta_key1→二つ目のポストタイプのカスタムフィールドのキー1 meta_key2→二つ目のポストタイプのカスタムフィールドのキー2 ``` global $wpdb; //SQLに挿入する変数 $search_key_leases = array('value1','va
続きを読む

Firefox:autocompleteをoffにしてもautocompleteが効いてしまうとき

2016年12月20日

autocompleteの設定はブラウザによってかなりことなるようです。 Firefoxでも以下のようにautocompleteをoffに設定していても効いてしまうときがあります。 ``` ``` どうすればいいのかと検索したところ、Mozillaの公式に以下のようにかいてありました。 https://developer.mozilla.org/ja/docs/Web/Security/Securing_your_site/Turning_off
続きを読む

シンプルなグラフを簡単に組み込める「jQuery Sparklines」

2016年12月19日

「[jQuery Sparklines](http://omnipotent.net/jquery.sparkline/)」を利用することで、シンプルがグラフを簡単に組み込むことができます。 ### 利用方法 jQueryとjQuery Sparklinesを読み込みます。 ``` jquery.min.js jquery.sparkline.min.js ``` ### JavaScript ``` $(".sparkline").ea
続きを読む

Slider for Bootstrapを利用して値をスライダーで絞り込む

2016年12月19日

[Slider for Bootstrap](http://seiyria.com/bootstrap-slider/)を利用することで簡単に、値をスライダーで絞り込むことが出来ます。 # 利用方法 ファイルをダウンロードして、基本ファイルを読み込みます。 ``` bootstrap-slider.css bootstrap-slider.js ``` 以下の例ではjQueryを利用するため、別途jQueryファイルも読み込んでおいて下さい。
続きを読む