keyhacを使って左Ctrlと[の同時押しをEscに割り当てる

MacBookPro2016 のTouchBar付きを購入しました。

前に使っていたMacBookAirの2013年モデルに比べて快適になりましたがEscを押した時にクリック感が得られずEscのタイプミスが劇的に増えましたのでキー入力をカスタマイズできるkeyhacを使って左Ctrlと[の同時押しをEscに割り当てます。

keyhacのインストール

公式HPからkeyhacをダウンロードします。

~/Library/Application Support/keyhac/config.pyを編集

keymap_globalが定義されている箇所より下に以下のコードを記述します。

keymap_global["U-LCtrl-OpenBracket"] = "Escape"

あとはkeyhacを開いて”設定のリロード”を選択すれば完了です。

メッセージアプリみたいに現在見えている要素が見えたまま要素を上に追加させていく

追加した要素の高さだけscrollさせればメッセージアプリみたいな挙動を実現できます。

mygif

Code


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example prepend</title>
  </head>
  <body>
    <ul id="container"></ul>
  </body>


  <script>
  var cnt =0;
  


  window.onscroll = function(e){
    e.preventDefault();
    var scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop
    //ページトップにスクロールした場合に要素を追加
    if (scrollTop === -1){
        prepend();
    }

  }

 

  var append = function(){
    var parent  = document.getElementById('container');
    for (var j = 20; j > 0;j --){
      cnt += 1;
      let child = document.createElement("li");
      child.innerHTML = 'cnt:' + j;
      child.id = 'cnt-' +j;
      let css = {
        background: 'lightblue',
        color: 'white',
        textAlign : 'center',
        height: '50px'
      };
      let keys = Object.keys(css);
      for(var i = 0;i < keys.length;i++){
        let key = keys[i];
        let val = css[key];
        child['style'][key] = val;
      }
      parent.insertBefore(child)
    }
  }

  var prepend = function(){
    alert('prepend');
    var pos = 0;
    var lastPos ;

    var parent  = document.getElementById('container');
    //lastElement: prepend()が呼ばれた時点での最新の要素
    //lastElementを起点にスクロール量を計算していく
    var lastElement = document.getElementById('cnt-'+cnt);

    if (lastElement){
      var rect = lastElement.getBoundingClientRect();
      lastPos = rect.top;
    }


    for (var j = 0; j < 20;j ++){
      cnt += 1;
      let child = document.createElement("li");
      child.innerHTML = 'cnt:' + cnt;
      child.id = 'cnt-' +cnt;
      let css = {
        background: 'lightblue',
        color: 'white',
        textAlign : 'center',
        height: '50px'
      };
      let keys = Object.keys(css);
      for(var i = 0;i < keys.length;i++){
        let key = keys[i];
        let val = css[key];
        child['style'][key] = val;
      }
      parent.insertBefore(child, parent.firstChild)
      let height = child.offsetHeight;
      lastPos += height;
    }

    window.scroll(0,lastPos);


  }

  append();
  </script>
</html>


macでvimのyankをした時にクリップボードにコピーさせる

コピペがとっても便利になりました。

if has("mac")
	function! ClipboardYank()
		call system('pbcopy', @@)
	endfunction
	function! ClipboardPaste()
		let @@ = system('pbpaste')
	endfunction

	vnoremap  y y:call ClipboardYank()
	vnoremap  d d:call ClipboardYank()
	nnoremap  p :call ClipboardPaste()p
endif

[Swift3] URLリクエストのコールバックでUIの変更が反映されるまでかなり時間がかかる原因とその対処

URLリクエストを実行してコールバックでレスポンスが返ってきてからUIの変更が反映されるまでかなり時間がかかっていました。

原因を調べてみたら、時間がかかっていたのはUIの変更はメインスレッドで行われるため、メインスレッドの処理が終わるのを待っているためでした。

メインスレッドの処理をバックグラウンドで実行させるようにすれば解決しました。 コード例は以下になります。

 DispatchQueue.main.async {
                    self.myLabel.text = “hogehoge”
                }

WordPressの管理画面でプラグインを使わずに画像をアップロードするFormを作成

Wordpressでプラグインを使わずに画像をアップロードするフォームを作ります。

media-lib-uploader.jsの作成

任意の場所にmedia-lib-uploader.jsを作成してください。

media-lib-uploader.jsでWordpressのメディアAPIを利用できるようにする

media-lib-uploader.jsにおいてWordpressのメディアAPIが使用できるようにします。

functions.phpに以下のコードを実装してください。

 function my_enqueue_media_lib_uploader() {
  wp_enqueue_media();
   
   wp_register_script( 'media-lib-uploader-js', '/path/to/media-lib-uploader.js');
	 wp_enqueue_script( 'media-lib-uploader-js' );
 }
 add_action('admin_enqueue_scripts', 'my_enqueue_media_lib_uploader');

管理画面にFormを描画させる

functions.phpに以下のコードを実装してください。


function add_custom_column() {
   
    add_meta_box(
        'image',
        '画像を登録',
        'on_image',
        'image',
        'side',
        'high'
    );
}
add_action('admin_menu','add_custom_column');

function on_image($post){
  //すでに画像がアップロードされている場合は表示させる
  $image = get_post_meta($post->ID,'image',true);

  $vals = array(
    '<form  method="POST">',
    '<p>',
    '<label>カスタム画像</label><br>',
    sprintf('<input class="image-url normal" type="text" value="%s" name="image" />',$image),
    sprintf('<img src="%s" width="50" height="50" class="image">',$image),
    '<input class="upload-button" type="button" class="button" value="Upload Image" />',
    '</p>'
    '<input type="submit" value="Submit" />',
    '</form>'
  );
  foreach($vals as $val){
    echo $val;
  }

}

upload-buttonクラスを持つボタンをクリックした時のイベントを実装

media-lib-uploader.jsに以下のコードを実装します。



var $ = jQuery;
$(document).ready(function(){

    var mediaUploader;
    $('.upload-button').click(function(e) {
      e.preventDefault();

      if (mediaUploader) {
        mediaUploader.open();
        return;
      }

      mediaUploader = wp.media.frames.file_frame = wp.media({
        title: 'Choose Image',
        button: {
          text: 'Choose Image'
        }, multiple: false });


        mediaUploader.on('select', function() {
          attachment = mediaUploader.state().get('selection').first().toJSON();
          $('.image-url').val(attachment.url);
          $('.image-path').attr('src',attachment.url);
        });

        mediaUploader.open();
      });
})

記事を更新するタイミングでアップロードした画像を保存する

最後に記事を更新するタイミングでアップロードしたタイミングで画像を保存します。

functions.phpに以下のコードを実装してください。

add_action('save_post','save_image');
function save_image(){
  if(!get_post()){
    return;
  }
  $id = get_post() -> ID;

  if(isset($_POST['image'])) {
    $image = $_POST['image'];
    update_post_meta( $id, 'image', $image);
  }

}