object-fitとobject-positionをIEやEdgeでも動かす。

object-fitとobject-positionはとても便利なのだけど、IEとEdgeは使えないのでIEとEdgeでは使えない。
いまだに「IE非対応なので・・・」で悩まされるとは。
いつまで経っても足を引っ張られる。

調べたら、コチラのプラグインで解決できた。
https://github.com/bfred-it/object-fit-images

説明にある通り、jQueryを使っている場合は、

$(function () {
objectFitImages('.sample');
});

あとは、cssにも追記が必要。

.sample{
object-fit: cover;
object-position: center top;
font-family: 'object-fit: cover; object-position: center top;'
}

こんな感じ。
font-familyに、使用したいパラメータをセットして使うみたい。

素敵だ。

NetbeansでEmmet

以前、NetbeansにEmmetをインストールしたら、頻繁にハングアップしたので、仕方なくZen cordingを使っていた。

最近気になってもう一度調べてみた。

EmmetのプラグインはNetbeansの公式サイトからDLしてインストールしたのだが、更新されていないようだ。

GitHubの方から最新版をDLしてインストールしたら、安定した。

ちなみにRleaseのページからver 1.1.2をDLしてインストールした。

管理画面でカスタムタクソノミーを使って絞り込みが出来るようにする

管理画面のカスタム投稿タイプの記事一覧ページで、カテゴリ(カスタムタクソノミ―)による絞り込みを行う。
元はこちら。

管理画面でカスタムタクソノミーを使って絞り込みが出来るようにする

大変役立ったのだけど、階層化されたタクソノミーの親子関係を維持して表示したかった。
自分で少し変えてみた。
ただし、作成した際に二階層目までしか必要なかったので、三階層目以降には未対応。

function add_post_taxonomy_restrict_filter() {
    global $post_type;
    if ( '作成したカスタム投稿タイプ' == $post_type ) {
        echo '<select name="作成したカスタムタクソノミ―">';
            echo '<option value="">カテゴリー指定なし</option>';
            $terms = get_terms('作成したカスタムタクソノミ―', 'hide_empty=0');
            foreach ($terms as $term) :
             if ($term->parent == 0):
              echo '<option value="' . $term->slug . '">' . $term->name . '</option>';
              $parentID = $term->term_id;

              $children = get_term_children( $parentID , '作成したカスタムタクソノミ―' );
              if(!empty($children)):

               foreach($children as $childID):
                $child=get_term_by('id', $childID, '作成したカスタムタクソノミ―');
                echo '<option value="' . $child->slug  . '"> ' . $child->name . '</option>';
               endforeach;

              endif;
             endif;
           endforeach;

        echo '</select>';
    }
}
add_action( 'restrict_manage_posts', 'add_post_taxonomy_restrict_filter' );

NetBeansのプラグイン

長年NetBeansを愛用しているが、コーディングの際に画像サイズの入力補完が無いことが不満だった。
プラグインを探してみたら、あった。

Html enhancement

こちらで紹介されている。
http://junichi11.com/?page_id=2826

ページ内のリンク先からファイルをDLし、
NetBeansのメニューから「ツール」-「プラグイン」を選択
「ダウンロード済」のタグを選択して「プラグインの追加」ボタンをクリックし、
ダウンロードしたプラグインファイルを選択してインストール。
※プラグインのインストールは自己責任で行ってください。

プラグインがインストールできたので、試してみる。
プロジェクトウィンドから挿入したい画像を選び、右クリックすると
「Insert as html」が追加されている。
クリックすると、widthとheightに値が入った状態でimgタグがコードに挿入されている。

また、上記のページの解説にあるように

またimgタグ内でUpdate Image Size Actionを実行すると、withとheightの値を更新または最後に挿入します。

Update Image Size Actionをどうやるか分からなかったが、オプションのキーマップで調べたら
Ctrl+Alt+U
でショートカットが割り当てられている。
ので、imgタグ内でCtrl+Alt+Uをすると、widthとheightに値が入った状態で追加された。

素敵だ。

無料のSSL

レンサバは変えるの面倒くさいので、何かよっぽどのことが無いと変えない。
今回はよっぽどのことがあった。

Let’s Encrypt (無料 SSL サーバ証明書)の登場と、それを通常サービスに取り入れているレンサバがあった。

SSLの導入は、コストがネックでいつも共用のサービスを使っていた。
でも、URLが変わってしまうので、色々と面倒なことも多い。

エックスサーバー
ならオプションではなく標準機能で実装されている。
(もちろんSSLつかわなくてもいい)

設定も簡単だし、ネックだった有効期限の短さ(90日)も自動更新という便利さ。

これはいいね。

エックスサーバーはこちら。

http://www.xserver.ne.jp/

投稿が表示されないぞ、Custom Post Type Generator

カスタム投稿タイプを追加して、記事を投稿して、表示・・・されない。
そういえば、記事投稿用にカスタム投稿タイプ使うの久しぶりだ。

Custom Post Type Generatorの
高度な設定の
publicly_queryableをtrueに変更したら表示された。

あと

高度な設定の
publicがfalseのままだと、管理画面の記事一覧や投稿ページに「表示する」のリンクがでなくて不便。
こちらもtrueにした。

jQuery mobileでリロードしないとJavascriptが動かない場合

$(function(){
 $("#sample").click(function(e){
  //処理したいこと
 });
});

で、ページを表示した後リロードしないと動かないことがあった。

対応
jQueryのバージョンにもよるが、.liveか.onで書き換えるとリロードせず動作した。
例)

$(function(){
 $("body").on("click","#sample",function(e){
  //処理したいこと
 });
});

こんな感じ。

直後に、clickなどマウスイベントが無い場合どうする?ということでハマる。

$(function(){
 alert('動かん');
});

googleさんにあちこち探してもらって下記で決着。

$("body").on('pageshow',"div[data-role='page']", function() {
 alert('動いた?');
});