投稿者: koji

  • 「このページを共有する」dialogタグ版

    iOS 15.4からSafariで<dialog>タグがサポートされたのを機に、「このページを共有する」機能をjQueryから<dialog>に移し替えた。

    動作イメージ

    ソーシャルメニューの 🔗 をクリックすると、下記のようなモーダルダイアログが表示される。[COPY]をクリックすると、ページ情報をクリップボードにコピーしてダイアログが閉じられる。[CANCEL]をクリックすると、ただダイアログが閉じられる。

    ダイアログの出力 (PHP)

    上記のダイアログは次のように出力した。

    function echo_sharethis_dialog() {
    
        // 現在表示しているページのURL
        $url = $_SERVER['REQUEST_SCHEME'].'://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
    
        // 現在表示しているページのタイトルと合わせてページ情報を生成
        $pageinfo = wp_get_document_title().PHP_EOL.$url.PHP_EOL;
    
        echo '
        <dialog id="lf-sharethis-dialog">
            <p><b>このページを共有する</b><br>([COPY]でクリップボードにコピー)</p>
            <textarea id="lf-sharethis-area" readonly>',$pageinfo,'</textarea>
            <button id="lf-sharethis-btn-copy">Copy</button>
            <button id="lf-sharethis-btn-cancel">Cancel</button>
        </dialog>';
    }

    イベント処理 (JavaScript)

    // ダイアログ
    const shareThisDialog = document.getElementById( 'lf-sharethis-dialog' );
    
    // ソーシャルメニューのアイコン(クリックしてダイアログを表示)
    document.getElementsByClassName( 'lf-sharethis-menu' )[1].addEventListener( 'click', {
        object: shareThisDialog,
        handleEvent: function( e ) {
            this.object.showModal();
        }
    } );
    
    // グローバルメニュー(クリックしてダイアログを表示)
    document.getElementsByClassName( 'lf-sharethis-menug' )[0].addEventListener( 'click', {
        object: shareThisDialog,
        handleEvent: function( e ) {
            this.object.showModal();
        }
    } );
    
    // Copy ボタン(共有ダイアログ内)
    document.getElementById( 'lf-sharethis-btn-copy' ).addEventListener( 'click', {
        object: shareThisDialog,
        handleEvent: function( e ) {
            navigator.clipboard.writeText(
                document.getElementById( 'lf-sharethis-area' ).value
            );
            this.object.close();
        }
    } );
    
    // Cancel ボタン(共有ダイアログ内)
    document.getElementById( 'lf-sharethis-btn-cancel' ).addEventListener( 'click', {
        object: shareThisDialog,
        handleEvent: function( e ) {
            this.object.close();
        }
    } );

    L5-10: Twenty Twenty テーマのソーシャルメニューの一つをクリックするとダイアログを表示する。メニュー項目には id 属性を割り当てることができず、class 属性しか割り当てられない。

    L13-18: L5-10 と同様の処理をグローバルメニューについて行う。

    L21-29: COPYボタンがクリックされたら、テキストエリアの内容をクリップボードに書き出してダイアログを閉じる。

    L32-37: CANCELボタンがクリックされたらダイアログを閉じる。

    JavaScriptを登録する

    上記の JavaScript を登録する。ファイルの更新時刻をバージョン番号とすることで最新のファイルが読み込まれることを保証する。

    function enqueue() {
    
        $jsfile = '/'.KH_PLUGIN_SLUG.'/js/lf_sitewide_setting.js';
    
        wp_enqueue_script(
            'lf_sitewide_setting',
            plugins_url( $jsfile ),
            array(),                            // No Dependency
            filemtime( WP_PLUGIN_DIR.$jsfile ), // Version
            true                                // In Footer
        );
    }

    上記の処理をアクションフックのコールバックとして登録する

    上記の関数を一つのクラスにまとめた。

    
    class LF_SiteWide_Setting {
    
        public static function init() {
            add_action( 'wp_enqueue_scripts', [ __CLASS__, 'enqueue' ], 11 );
            add_action( 'wp_footer', [ __CLASS__, 'echo_sharethis_dialog' ], 19 );
        }
    
        public static function enqueue() {
        }
    
        public static function echo_sharethis_dialog() {
        }
    }

    ダイアログのHTMLを書き出す関数は、’wp_footer’ へのコールバックとして優先順位19で登録した。これは、JavaScriptを書き出す処理(wp_print_footer_scripts())が ‘wp_footer’ へのコールバックとして優先順位20で登録されているため、それよりも先に読み込ませるためである。

    そして、個人的なカスタマイズをまとめたプラグインのメインPHPファイルから以下の要領で呼び出している。

    LF_SiteWide_Setting::init();
  • 報酬が効果的でない5つの理由

    まえがき

    『「これをすればあれをあげるよ」と言えば、関心は「これ」ではなくて「あれ」に行ってしまう。(略)報酬は動機づけになるか。完璧になる。報酬をめざす動機づけとなる。』

    リスト

    あとがき

    まえがきを含めて、アルフィ・コーン『報酬主義をこえて〈新装版〉』 (法政大学出版局、2011年)より。

    リスト項目1から4までが第4章にまとめられ、項目5は単独で第5章を費やして論じられています。外発的な動機づけである報酬や罰は、効果がないどころか逆効果がある。これは調査によってわかっている。ではその理由がどこにあるのか。それを詳しく考察しています。

    まえがきは第4章の最後の段落から引用しました。全体の要約というわけではないのですが、報酬のはたらきを端的に説明するよい文章だと思ったので。なお、『報酬は動機づけになるか。完璧になる。報酬をめざす動機づけとなる。』には傍点が打たれていました。

    この本からの他のリスト

  • 「このページをシェア」(jQuery版)

    Twenty Twenty テーマのソーシャルメニュー付けていた「このページをシェア」機能をjQuery版からdialogタグ版に移行した。以下はjQuery版の実装。

    ダイアログのイメージ

    PHP / HTML

    class LF_Share_This {
    
    	/**
    	 * コールバックを登録する
    	 */
    	public static function init() {
    
    		// コアが登録しているスクリプトよりも優先順位を下げるために11とした
    		add_action( 'wp_enqueue_scripts', [ __CLASS__, 'enqueue' ], 11 );
    
    		// シェアメニューの🔗がクリックされたら表示するダイアログの内容
    		add_action( 'wp_footer', [ __CLASS__, 'echo' ], 21 );
    	}
    
    	/**
    	 * jQuery UI Dialog と自作のjavascriptを登録する
    	 */
    	public static function enqueue() {
    
    		// jQuery UI Dialog の読み込み(bodyの下で)
    		wp_enqueue_script( 'jquery-ui-dialog', false, [ 'jquery' ], true );
    
    		// jQuery UI Dialog 用 CSSの読み込み(CSSは$srcの指定が必要)
    		wp_enqueue_style( 
    			'jquery-ui-dialog-min-css', 
    			includes_url().'css/jquery-ui-dialog.min.css' 
    		);
    
    		$version = filemtime( WP_PLUGIN_DIR.'/'.KH_PLUGIN_SLUG.'/js/lf_sharethis_button.js' );
    
    		// 共有リンクがクリックされたらダイアログを表示するスクリプトの読み込み
    		wp_enqueue_script(
    			'lf_sharethis_button',
    			plugins_url( 'js/lf_sharethis_button.js', dirname( __FILE__, 2 ) ),
    			[ 'jquery-ui-dialog' ],
    			$version,
    			true
    		);
    	}
    
    	/**
    	 * シェアメニューの🔗がクリックされたら表示するダイアログの内容
    	 */
    	public static function echo() {
    
    		// 現在表示しているページのURL
    		$url = $_SERVER['REQUEST_SCHEME'].'://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
    
    		// 現在表示しているページのタイトルと合わせてページ情報を生成
    		$pageinfo = wp_get_document_title().PHP_EOL.$url.PHP_EOL;
    
    		echo '
    <div id="lf-sharethis-box" title="ページの共有">
      <textarea id="lf-sharethis-text" readonly>'.$pageinfo.'</textarea>
      <p>[COPY]をクリック → (クリップボードにコピーされる → )共有先でペースト</p>
      <button id="lf-sharethis-copy" title="ページ情報をクリップボードにコピーして閉じる">Copy</button>
    </div>
    ';
    	}
    }

    JavaScript

    // https://api.jquery.com/jQuery/#jQuery3
    jQuery(function($) {
    
        // Open dialog on clicking the link menu
        $(".lf-sharethis-link").on('click', function() {
            $("#lf-sharethis-box").dialog();
        } );
    
        // copy info to share and close dialog
        $("#lf-sharethis-copy").on( 'click', function() {
            navigator.clipboard.writeText( $("#lf-sharethis-text").text() );
            $("#lf-sharethis-box").dialog("close");
        } );
    } );

    CSS

    /*
     * ソーシャルメニュー
     */
    div#lf-sharethis-box {
    	display: none;
    }
    /* ソーシャルメニュー → 共有ボタン→ Dialog → Pタグの文字の大きさ */
    #lf-sharethis-box p {
    	font-size: smaller;
    }
  • 動機づけの3C

    まえがき

    『従業員に喜んで最善を尽くさせようと思う経営者は、三つの基本的要素に注意する必要がある。これらは動機づけの「三C」と略称してもよい。』

    リスト

    あとがき

    まえがきを含めて、アルフィ・コーン『報酬主義をこえて〈新装版〉』 (法政大学出版局、2011年)より。各リスト項目の見出しは本文からの引用です。コロンより後の解説はこちらで付しました。ここでは企業における動機づけですが、著者はこの3Cが学校や家庭における動機づけについても当てはまることを論証していきます。

    本書はタイトルが示唆するように「内発的動機づけ」含む、総合的な動機づけを扱っています。

    この本からの他のリスト

  • 宮本武蔵の「吟味・工夫・鍛錬」

    まえがき

    『宮本武蔵が剣術の奥義を具体的にまとめた『五輪書』には、「能々〈よくよく〉吟味すべし」「能々工夫すべし」「能々鍛錬すべし」という言葉が、ほとんどの項目の最後に繰り返し出てきます。これはそれぞれ、どのような意味なのでしょうか。』

    リスト

    あとがき

    まえがきを含めて、齋藤 孝『NHK出版 学びのきほん 人生が面白くなる 学びのわざ (教養・文化シリーズ NHK出版学びのきほん)』 (NHK出版、2020年)より。リストは本文を編集のうえ引用。下記に大変共感したので収集しました。

    身体に定着するまで「吟味・工夫・鍛錬」することを、私は「わざ化」と呼んでいます。剣術やスポーツだけではなく、知識や思考も「わざ化」することで、ようやく自分のものとして使いこなすことができるようになるのです。「吟味・工夫・鍛錬」、武蔵はこの三つをセットとして書いてはいませんが、私はこれを「学びのきほん」の一番重要なものだと思ったので、覚えやすく三点セットにしました。

    この本からの他のリスト

  • 三学の教え(佐藤一斎)

    三学の教え(佐藤一斎)

    三学の教え

    まえがき

    『佐藤一斎といえば、即座にこの条が出るほど最も有名な言葉。』

    リスト

    あとがき

    まえがきを含めて、佐藤 一斎『[現代語抄訳]言志四録』 (PHP研究所、2005年)より。三学戒とも。

    アイキャッチ画像は、「言志録・言志後録・言志晩録・言志耋録. 言志晩録」 (国立国会図書館デジタルコレクション)より引用した該当部分。『言志晩録』に収められていました。

    現代語訳も引用します。

    少年のときに学んでおけば、壮年になってから役に立ち、何事かを為すことができる。壮年のときに学んでおけば、老年になっても気力が衰えることはない。老年になっても学んでおけば、ますます見識も高くなり、社会に役立つこととなり、死んでからもその名は残る。

    • NVC(非暴力コミュニケーション)の中心にある2つの問い

      まえがき

      『平和のことば (Speaking Peace) は、暴力を伴わないコミュニケーションであり、(略)以下の2つの問いを中心において、相互に思いをやりとりすることです。』

      リスト

      あとがき

      まえがきを含めて、マーシャル・B・ローゼンバーグ『「わかりあえない」を越える――目の前のつながりから、共に未来をつくるコミュニケーション・NVC』 (海士の風、2021年)より。

      NVCについては「NVC(非暴力コミュニケーション)を構成する4つの要素」を参照のこと。

      2つめの文も主語が we(わたしたち)であるところが重要に思えたので、2つめの文に「、わたしたちに」を追加しました。

      • トランプ元米国大統領の話術の特徴

        まえがき

        『「多くの人々は聞きたくない言葉だと思いますが、トランプは話術の天才です」とジェニファーは話す。』

        リスト

        あとがき

        まえがきを含めて、ニーナ・シック『ディープフェイク ニセ情報の拡散者たち』 (日経ナショナルジオグラフィック社、2021年)より。リストは本文を編集して作成しました。

        まえがきのジェニファーとはジェニファー・メルチア博士。

        テキサスA&M大学で政治的レトリックの歴史を研究するジェニファー・メルチア博士に話を聞いた。数年にわたってトランプのコミュニケーションの方法を研究してきた学者だ。

        という文章に参考文献(1)が付けられています。しかしこの記事にはジェニファー・メルチア博士の名前はありません。

          参考文献

          (1)

          • 人格の同一性に関する3つの説

            まえがき

            『ある人(来週存在する人)が、今日ここで生きている人と同じ人と言えるようにする「形而上の接着剤」は何か?』

            リスト

            あとがき

            まえがきを含めて、シェリー・ケーガン『「死」とは何か イェール大学で23年連続の人気講義 日本縮約版』 (文響社、2018年)より。リストは本文を要約して作成しました。これは著者の説で、一般的にこういった枠組みで語られているわけではなさそうです。

            魂と人格の違いがややわかりづらかったので自分の理解をメモしておきます。魂は人格を収める非物質的な容器であって、身体とは別に存続し得ます。人格説では、人格が魂に宿ろうが身体に宿ろうが機械の中に宿ろうがOK。

            • 不安の3側面

              まえがき

              『不安が個人に及ぼす影響には、不安の各側面に固有の特徴や、これらの基本的側面の相互作用による組み合わせ効果、そして全体的な不安レベルが関連している。』

              リスト

              あとがき

              まえがきを含めて、ベルナルド・J・カルドゥッチ『カルドゥッチのパーソナリティ心理学 私たちをユニークにしているものは何か?』 (福村出版、2021年)より。本文中の表を引用してリスト化しました。

              不安の3◯◯といえば「不安の3類型(ティリッヒ)」が思い出されます。あちらは不安の対象。こちらは不安の現象という感じでしょうか。

              この3側面を評価する「顕在性不安尺度」があるとのことでした。

              • タイトルカルドゥッチのパーソナリティ心理学 私たちをユニークにしているものは何か?
              • 著者: ベルナルド・J・カルドゥッチ(著)、渡邊 芳之(監修)、松田 浩平(監修)、尾見 康博(編集)、松田 英子(編集)、小塩 真司(編集)、安藤 寿康(編集)、北村 英哉(編集)、日本パーソナリティ心理学会(その他)、渡邊 芳之(翻訳)、松田 浩平(翻訳)、尾見 康博(翻訳)、松田 英子(翻訳)、小塩 真司(翻訳)、安藤 寿康(翻訳)、北村 英哉(翻訳)
              • 出版社: 福村出版
              • 出版日: 2021-10-06

              この本からの他のリスト