venndiagram
05.07.2022

【R】Rでベン図を描く(基礎編)

ずっと「かっこいいな〜!」と思っていた「ベン図」をRで描く機会がやってきたのでそのことを。 ベン図とはこんな感じの図、グループとグループとの間に共通しているものがどのくらいあるのかが分かりやすく表現できるもの。 今回は必要最低限の基本メモになりますが、とても便利そうなので使えるようになるといいと思います!! なぜベン図が必要なのか 今回私は、あるプロジェクトで使っている6つのデータにどのくらいの人たちがどのデータに入っているのか、同じ人が別のデータにも入っているのかなどを知りたかったので、次のような表をまず作りました。 study1 study2 study3 study4 study5 study6 study1 1000 0 0 0 9 0 study2 0 23000 0 171 4 0 study3 0 0 2521 0 0 0 study4 0 171 0 1365 0 0 study5 9 4 0 0 1871 3 study6 0 0 0 0 3 21392 この表から、例えば study1に参加した人の中でstudy5にも参加した人が9人いる study2に参加した人の中でstudy4にも参加した人が171人、study5にも参加した人が4人いる ということがわかります。でも分かりづらい。 そこでベン図をもう一度見ると、そういった情報がもっと感覚的に分かるようになっています。(後述しますが、今回はstudy3〜5は諸事情で統合したベン図になっているので、上記の例2はstudy2に参加した人の中でstudy3,4,5のどれかに参加した人が175人いる、というようなベン図になっています。) Rで使うライブラリ Rでベン図を描く場合、いろんな方法があるみたいなのですが、大概はVennDiagramというライブラリで事足りそうな気がします。今回このページに載せているベン図もこのライブラリで作成しました。 公式のマニュアル(英語)はこちらから参照できます:https://cran.r-project.org/web/packages/VennDiagram/VennDiagram.pdf いろいろ描いてあるけど、最初の取り掛かりとしては下記の方法で良さそう。慣れてきて他にも追加したいことがあったりカスタマイズしたいことがでてきたらこのマニュアルやらネット情報やらで順次グレードアップしていこうと思います。 VennDiagramのインストール VennDiagramがまだRにインストールされていない場合は下記のコマンドでインストール。既にこのライブラリを持っている場合はこのステップは飛ばします。 install.packages("VennDiagram") VennDiagramを使う準備 下記のコマンドでVennDiagramを使える状態にします。 library(VennDiagram) ベン図を描くコード 上記のコードでライブラリを読み込んだ後、こちらのコードで基本的なベン図が描けます。 venn.diagram(data, filename="venn.png", imagetype="png", category.names = c("study1", "study2", "study3"), fill=c(2,3,4)) dataは数字や文字列のリストの形式のもの(後述) filenameを指定する(保存したいファイル名) imagetypeは任意、デフォルトはtiff。.pngにしたい場合はpngを指定。 category.namesは必須、dataのそれぞれのグループの名前を入れる(例えばstudy1、study2、study3など) fillで色の指定。このfillの部分を飛ばすとモノクロのベン図になる(後述)。 ここで使うdataは、数字や文字列のリストの形式になっている必要があります。形式が合っていれば、"data" という名前じゃなくても何でもOK。 例えば、下記の「data」がそれにあたります。 # a,b,cに数字を入れる a …

Computer
05.03.2022

.tar.gz の中身を解凍せずに見る・解凍して取り出す

昨日の記事(.tar.gz の作り方とファイルの追加)に引き続き、今日使ったコマンドのメモ。 .tar.gz を解凍せずに中のファイルを一覧表示 .tar.gzを展開する前に、中身を確認したかったので、下記を実行。 tar -tf ファイル名.tar.gz -t(または --list): アーカイブファイルの中身を一覧表示 -f(または--file=ARCHIVE): 「ファイル」を表示 実行すると、.tar.gzに入っているファイルがずらっと一覧表示されました。 私は今回は必要なかったけど、-vも一緒に入れてあげるとls -laのコマンドを実行した時のような、ファイルの大きさ、所有者などの詳細が一緒に出てくるよう。 .tar.gz を解凍して中身を取り出す 中身を全部一気に取り出す(解凍する)場合はこちら。 tar -xvzf ファイル名.tar.gz -x(または --extract, --get): ファイルをextractする、取り出す -v(または --verbose): 作業の状況を可視化。無くてもOK。 -z(または --gzip, --gunzip, --ungzip): .gzファイルを解凍するので-zを追加 .tar.gz から特定のファイルだけ取り出す 下記のように、.tar.gzの後にファイルの一部を正規表現で入れてあげると、欲しいファイルだけ取り出すことも。 # ファイル名に'apple'を含むファイルを取り出す tar -xvzf ファイル名.tar.gz '*apple*' # 拡張子が '.txt' のファイルのみ取り出す tar -xvzf ファイル名.tar.gz '*\.txt' 以上、今日のメモでした。 …

Computer
05.02.2022

.tar.gz の作り方とファイルの追加

仕事で毎日コマンドたたくものの全部覚えてられないので、ほぼほぼ自分用の備忘録・学習メモです。 今日は.tar.gzファイルを作ったときに間違えたことと学んだこと、今後ためになりそうなことのメモ。 .tar.gzファイルの作成 tar -zcvf apple.tar.gz apple.txt banana.txt apple.tar.gzは、作成したい.tarファイルの名前。 apple.txtは.tar.gzに入れたいファイルの名前(パス)。複数入れることが可能。 -zが .gzにしてね、というコマンド 例えば、あるフォルダのなかにあるappleという文字列が入ったファイルを全部いれたかったとしたら、 files=`ls -1v *apple*` tar -zcvf apple.tar.gz $files という風にもできる。 元のデータを削除したい 今回は、.tar.gzを作った後に元のデータを削除したかったので、--remove-filesというオプションを追加。 下記のように追加する位置を間違えたため、初回は--remove-filesというアーカイブファイルができてしまった。 # 正しくはこう files=`ls -1v *apple*` tar -zcvf apple.tar.gz $files --remove-files # 私の間違え files=`ls -1v *apple*` tar -zcvf apple.tar.gz --remove-files $files tarの--remove-filesオプションは、-zcvfとかの後じゃなくて、最後に入れるのね。 既存の.tar.gzにファイルを後から追加 tar -zrvf apple.tar.gz pineapple.txt banana.txt peach.txt -zcvfから-zrvfに変化(cとrが変わった) 新しくアーカイブファイルを作るわけじゃないので -cは不要 下記に書いたけど、ファイルを追加したい(appendしたい)ので-rを追加 オプションの覚書 -c (--create): 新しくアーカイブファイルを作りたい -v (--verbose): アーカイブ中のファイルをターミナルに表示したい -f (--file=ARCHIVE): アーカイブしたいファイル名を指定したい -r (--append): 既存のアーカイブファイルに追加したい 今回使った、または今後使いそうなオプションたち。()の中に書いてある指定の仕方でもOK。 アーカイブファイルがどんなファイルを含んでいるのかとか、解凍してファイルを取り出すとかを指定するコマンドはこちら。 …

numbers
03.29.2021

highlight.jsに行番号を追加する方法

highlight.jsを使ってソースコードを綺麗に表示するだけでも充分なのですが、行番号があるとコードの解説がしやすいですよね。 この記事では、highlight.jsで整えたコード表示に、行番号を入れる方法をまとめました。 開発者さんのGitHub(https://github.com/wcoder/highlightjs-line-numbers.js/)のREADME.mdファイルに導入方法が説明されています。 まだhighlight.jsを導入していない場合は、こちらの記事を先にお読みください* ライブラリの読み込み <head></head>タグ内で読み込んでいる highlight.js コードの部分を下記のように変更します。 変更前 <!-- highlight.js: コードのハイライト --> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/github.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/highlight.min.js"></script> <script>hljs.highlightAll();</script> 変更後 <!-- highlight.js: コードのハイライト --> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/github.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/highlight.min.js"></script> <!-- highlightjs-line-numbers.js: 行番号の追加 --> <script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script> <script> hljs.highlightAll(); hljs.initLineNumbersOnLoad(); //行番号用の起動コードを追加 </script> 上記のように行番号表示用のコードを入れると、私の場合はこのようになりました。 CSSでデザインを整える 枠線や数字の幅などいろいろと気になったので、私の場合は下記のようにデザインを変更しました。 /* 枠線の削除 */ .hljs-ln { margin-bottom: 0; border: none; } .hljs-ln tr, .hljs-ln td { border: none; } /* 行番号 */ .hljs-ln-numbers { font-family: inherit; -webkit-touch-callout: none; /* スマホ等で長押しで表示されるポップアップメニューの非表示 */ -webkit-user-select: none; /* コードコピー時に行番号が除外されるようにする */ -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-align: center; color: #ccc; /* 行番号の色 */ vertical-align: top; padding-right: 10px; width: 2rem; /* 番号の幅 */ min-width: 2rem; /* 番号の最低幅 */ } .hljs-ln-code.hljs-ln-line { …

icons
03.28.2021

iPone・SafariでもFont Awesomeを表示する方法

先日ふとiPhone(Safari)で自分のサイトの表示を見てみたら、Font Awesomeのアイコンが全て「 □ 」になっていてかなり焦りました。 原因は広告表示を制限するアプリで、Ad-Blocker Pro、Adblock Plus、AdFilter、AdGuardのPrivacy、が影響していました(どれかひとつでも解除するとSafariでもアイコンが表示されました)。 でもこの記事で書くのは「アドブロッカーを外す」という方法ではありません! 結論からずばっと言うと、<head></head>で読み込んでいるFont AwesomeのURLを下記のようにcdnjs.comで配布されているものに変更したら、アドブロッカーを外さなくてもアイコンが表示されるようになりました! <!-- 以前までの読み込みURL --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"> <!-- 今の読み込みURL --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/> このリンクは cdnjs.com で font-awesome と試しに検索したら出てきました。 (ご参考までに、検索結果のページは「https://cdnjs.com/libraries/font-awesome」から飛べます Font Awesomeが更新されると変わるかもしれません) 私は一番上に出てきたリンクを使っています。 なので、all.min.cssを指定してはいますが、URLの末尾を all.css に変更しても表示されました。 また、正確にはリンクコピー時に自動で「integrity」や「crossorigin」が入っているので、 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" /> という長いコードで読み込んでいます(integrityやcrossoriginがなくても表示されます)。 integrityとは 配布しているファイルと読み込んでいるファイルが同じものかどうかを見分けるための暗号化された文字列だそう。万が一ハッキングで配布ファイルが改ざんされても、このintegrityがマッチしないので、integrityを入れておくと改ざんされたファイルが読み込まれることを防ぐことができるようです。 cdnjs.comが配信している他のJavaScriptなどのライブラリも使ってるからまあ安心かな、という軽い気持ちで、あまり期待なく試してみたので、Safariでもアイコンが表示された瞬間は飛び上がりそうでした!笑 何でこれなら表示されるのかという理由は・・・全然分かりません。 別の方法としては、CSSファイル冒頭で @import でfontawesomeを読み込んだら表示された!との情報もありましたが、私は @import のやり方が分からず(←)、エラーになったので断念(勉強します・・・)。 サイトに遊びきてくれる方に毎度「広告ブロッカーを外してください〜」なんてお願いしたく無いし、何か方法はないかな〜と思っていたので、本当に良かったです。 またいつアイコンが表示されない問題が起きるかは分かりませんが、当面これで大丈夫そうです。後日Font Awesomeがアップデートされてもまだ問題があれば、また cdnjs.com でファイルを探してみようと思います。 …

03.28.2021

HTMLやPHPのコードをそのまま表示する方法

コードをそのまま表示させたいのに、HTMLやPHPを書くとコードがごっそり非表示になってしまったり、インデントのあるコードのインデントが消え、コードが左揃えになってしまって、困ったことがありました。 この記事では、それらを解決した方法をまとめました。 コードをそのまま表示する方法 まずは、HTMLやPHPをそのまま表示させる方法です。WordPressに標準搭載されているコードエディターやカスタムHTMLブロックを使います。 一番簡単なのはコードエディターを使うことです。特殊文字のエスケープなども必要なく、そのまま表示してくれました。 カスタムHTMLだと特殊文字のエスケープが必要ですが、コードエディターの場合はその一手間が要らないようです。一つずつ説明します。 コードエディターにPHPを書いた場合 例えば<?php echo 'hello!'; ?>というコードを表示させたいとして、コードエディターに <?php echo 'Hello!'; ?> と書くと、下記の通り表示したいコードをそのまま表示してくれます。HTMLも同様。 <?php echo 'Hello!'; ?> 少し前まではこれでも表示されなかったような気がするのですが、最近のWordPressのアップデートで仕様が変わったのかもしれません。以前はコードエディターに書いて、それをカスタムHTMLブロックに変換し、「 < 」や「 > 」を「&lt;」や「&gt;」などでエスケープさせてようやく表示ができました。 とてもとても手間だったので、嬉しいアップデートです。 メモ コードエディターの場合は<pre><code>を自分で書く必要は無く、表示したいコードをそのまま書きます。 カスタムHTMLにPHPを書いた場合 一方で、カスタムHTMLに <pre><code><?php echo 'Hello!'; ?></code></pre> と記述すると、コードがまるまる非表示の状態になります。(カスタムHTMLの場合には<pre><code>タグが必要です) 表示されませんが、記事を書いている画面ではここ( )にコードが書かれています・・・ カスタムHTMLブロックでコードをそのまま表示させるには、表示させたいコード中の「 < 」などの特殊文字を「エスケープさせる」必要があります。こちら( )は「<?php」の「<」を「&lt;」と書いたものです。 <?php echo 'Hello!'; ?> (カスタムHTMLブロックへの実際の記述) <pre><code>&lt;?php echo 'Hello!'; ?></code></pre> 何故かは分かりませんが、「 > 」はエスケープさせなくても大丈夫みたいです(場合によるのかも)。<pre><code>タグは表示されなくて良いので、エスケープしません。 上記のように特殊文字をエスケープさせれば、カスタムHTMLブロックでもコード表示ができますが、コードが多いときはとても大変です。なので、コードエディターがおすすめです。 <pre><code>タグにクラスを追加したい場合 こちらの記事で紹介した「コードに色を付けて綺麗に表示してくれる機能」ですが、たまに言語が正しく認識されず、<pre><code class="php">...</code></pre>のように、クラスで言語名を指定したいときがあります。 その場合は下記のように対応しています。 一旦コードエディターにコードを書く カスタムHTMLブロックに変換する(適宜特殊文字が自動的に変換される) <pre class="wp-block-code"> を <pre> にする <code> を <code class="言語名"> にする コードエディターからカスタムHTMLブロックに変換すると、「無効なコンテンツが含まれています」のような注意喚起の文が表示されるのですが、「HTMLに変換」で大丈夫です。 また、カスタムHTMLブロックに変換した時点で「 < 」や「 > 」が「 &lt; 」などの文字列に自動的に変わってくれていて、それ以上何もしなくてもカスタムHTMLブロックのままコードが表示されるようになります。 また、手順「3」と「4」は highlight.js のマニュアル通りに<code>に言語名のクラスを追加していますが、<pre>タグに言語名を指定しても同じでした。なので、上記手順「3」の時点でクラス名を言語名に変えるだけでも良いかもしれません。 とりあえず今のところはマニュアル通りに<code>タグで言語名を指定してみています。 インデントを保つ方法 コードエディターが大活躍してくれることは分かったのですが、一つ大きな悩みが残りました。インデントのあるコードを表示させようとすると、大切なインデントが全て消えてしまうことです。 <div class="greetings"> <p>Good morning.</p> <p>Good afternoon.</p> <p>Good evening.</p> </div> より読みやすい、整理されたコードを表示したいので、個人的にインデントは消えてほしくないのですが、WordPressの機能の一つ「自動変換」のような機能が働いて行頭の空白をありがたくも削除してくれちゃうみたいです。(Pythonなんかは見た目どうこうじゃなくて、インデント自体が重要なときがありますよね。) functions.phpにこの自動変換機能?を止めるコマンドを書いたら良い、TinyMiceを使って設定を変えたら良い、などいろいろ情報があったので試してみたのですが、私の場合上手く行きませんでした。 コードエディター → カスタムHTMLに変換 私の場合、この悩みを解決してくれたのは コードエディターにコードを書く カスタムHTMLブロックに変換 <pre class="wp-block-code"> のクラスから「"wp-block-code"」を削除する  重要! ( 必要に応じてクラス名やインデントなどを編集 ) という、一つ前でも触れた手順です。 (HTMLやPHPでなければ、最初からカスタムHTMLブロックに<pre><code>表示したいコード</code></pre>という具合でインデント付きのコードを貼ってもちゃんと表示されるみたいです。) …

laptop-woman-stressed-out
03.24.2021

【MAMP】ローカルサーバーの停止方法

何かの拍子にローカルサーバーがバグってしまい、MacでMAMPを立ち上げても "Apache couldn't be started because port 80 is in use by some other software." というエラーが出てMAMPを使用できなくなってしまいました。 MAMPを再度インストールしてみても、私の場合はインストールの最終段階で「サーバーを閉じてください」のようなエラーが出てインストールを完了させることができず・・・他の方法を探したところ、下記2つのコマンドをMacのterminalに打ち込み、MAMPのエラーを解消することができました。 1. ローカルサーバーを使っているソフトウェアをport番号で検索 思い当たるlocalhostのport番号で、そのportを使用しているソフトウェアを検索します。入力するのはterminalを開いて出てきた画面のままで大丈夫です。 私はport番号「80」を使っていたので、下記のようにterminalに入力。 lsof -i :80 そのport番号が使用中の場合はこちらのようなリストが出てきます。使用中でない場合は何も出力されず、新しいプロンプトが出てきます。 2. 「PID」を削除する 出てきたリストの「PID」を下記のように全て削除しました。 kill -QUIT 925 kill -QUIT 4352 # 複数ある場合はそれぞれ上記でサーバーを閉じる 私は「lsof -i :80」を打ち込むと10行くらいでてきました。一つずつ全てのPIDを上記のコマンドで閉じてからMAMPでlocalhostを立ち上げると、無事にMAMPが使えるようになりました。 何故このエラーが出るようになったのか心当たりがなかったので、次回同じようなエラーになったときは上記をまた試そうと思います。 …

chicks making sounds
02.21.2021

クリックで音が出るボタン: 1種類の音声ファイルのみで作る場合

こちらの記事で紹介した音の出るボタンですが、私は音声データが .mp3だけでも良いかなと思ったので、.mp3ファイルだけで音の出るボタンを作った方法もメモにしました。 この素晴らしいボタンの開発者SyncerさんのページからJavaScript(「sounds-multi.js」)をダウンロードするところまでは上記の記事と同じです。 ダウンロードしたJavaScriptを所々コメントアウト 方法は、ダウンロードしたJavaScriptファイルのうち数カ所削除、もしくはコメントアウトするだけです。 コメントアウトしてちゃんとボタンが動いているのを確認できたら、そのコメントアウトの部分は削除してしまっても良いと思います(思った動作をしない場合は、キャッシュを削除してからもう一度確認してみてください)。 削除またはコメントアウトする部分は下記です。 // コメントアウトする部分 // 37行目 var setDir = './' ; // 音声ファイルがあるフォルダ(最後は[/]) // 62, 63行目 if( audio.canPlayType( 'audio/mp3' ) ) { // 65行目〜71行目 } // ブラウザが[.wav]に対応している場合は[.wav]を読み込む else if( audio.canPlayType( 'audio/wav' ) ) { audio.src = setDir + file + '.wav' ; } さらに、64行目についても削除またはコメントアウトし、その下にaudio.src = file;を追記します。(64行目と同じコードから「setDir + 」と「 + '.mp3' 」を除いた部分。) // 64行目: オリジナルをコメントアウト // audio.src = setDir + file + '.mp3' ; // その下に下記を追記 audio.src = file; 上記の結果、私のファイルは最終的にこのような感じになりました。 (下記はSyncerさんの「sounds-multi.js」を一部コメントアウト・加筆したものです。上記で示している行数はダウンロードしたオリジナルのJavaScriptのものなので、下記の行数とは異なります) // グローバル変数 var syncerSounds = { flag: {}, currentTime: null, }; // 即時関数 (function () { // 設定 var setClass = 'sounds'; // ボタン要素のクラス名 //var setDir = ''; // 音声ファイルがあるフォルダ(最後は[/]) var setStopButtonId = 'stop-button-syncer'; // …