著者アーカイブ 村上

村上 著者:村上

【Git】よく使うGitコマンドまとめ【初心者向け】

昨日の記事に引き続き、今日もGitについてです。
万一、SourceTreeが固まったときに、コマンド上で基礎的な操作ができるように押さえておきたいコマンドだけをリストアップしました。
とりあえず、ここだけ押さえておけば何とかなる…はず。

なお、今回はこちらの記事を参考にさせていただきました。

Gitコマンド早見表 – Qiita
https://qiita.com/kohga/items/dccf135b0af395f69144

 

Gitコマンド コマンドの内容
git pull リモートから変更を取得する
git branch -a 全てのブランチを確認する
git checkout [ブランチ名] 指定したブランチに切り替える
git branch -b [ブランチ名] ブランチを作成して切り替える

個人的に抑えておきたいコマンドは上記のとおりです。
なお、コミットに関しては、現在開発しているシステムの関係上、変更したファイル全て、で指定するととんでもないことになるので、SourceTree上で行うようにしています。
あとは、どうしても二進も三進もいかなくなった時に、git clean コマンドで、未コミットのファイルを削除したりもしますが、これはそんなに使わないですね。

 

以上、私的抑えておきたいGitコマンドでした。
徐々にでも、コマンドでのGit操作にも慣れていきたいと思います。

村上 著者:村上

【Windows】SourceTreeが頻繁に固まるときの対処法

ソースコードの管理でSourceTreeを使用しているのですが、これがよくに固まって「応答なし」を頻発することがあります。
で、先日あまりに固まり過ぎたので、ようやく対処法がないか調べてみました。

見つかった対処法はこちら。

Windows版SourceTreeが遅いときのチェックポイント – foohogehoge’s blog
http://foohogehoge.hatenablog.com/entry/2016/04/23/125909

投稿によると、表示しているブックマーク数を減らすといいのだとか。
なんでも、自動でリモートの更新を取得しない設定にしておいても、ブックマークの更新はチェックしているのだそうです。
そのため、現在操作しないブックマークは消しておきましょう。

 

私の場合は、やけに遅かったのがその日のみで、その後は特に問題もなく動いています。
が、他の対処法として、以下のようなものもあるそうです。

Windows10 64bit でgitBashやSourceTreeがやたら遅い 重い – Qiita
https://qiita.com/sin_w/items/9ffbc30a39155f52cc54

こちらはデバイスマネージャーから特定のドライバーを無効にしています。
投稿者によると、「サクサク動くようになりました」とのことだったので、上の方法で解決しなかった人はこちらを試してみるのもいいかもしれませんね。
私も今度SourceTreeが極端に重くなったら、こちらの方法を実行してみたいと思います。

 

が、個人的にはそろそろgitコマンドでの操作を覚えるべきかな…とも考えています。
ついついGUIの方が楽なのでこちらを使ってしまいますが、以前少し使ったときに、コマンドの方が早く感じたので、スピードを重視するならコマンドを使うべきですね。
…すぐには無理かもしれませんが、ボチボチ頑張りたいと思います。

村上 著者:村上

【JavaScript】jQueryなしでappend()と同じことを実行する

DOM操作をするときに jQuery の append() を使うことが多いのですが、場合によっては jQuery が使用できないことがあるかと思います。
なので、今回はタイトル通り、jQueryなしで append() と同じことを行う方法についてです。

参考にさせていただいた記事はこちら。

innerHTML より insertAdjacentHTML を使う – Qiita
https://qiita.com/amamamaou/items/624c22adec32515e863b

 

実際のコードはこちら。
今回使うメソッドは、insertAdjacentHTML() というものです。

<div id="parent">
    <p>p要素 その1</p>
</div>
// id=parendの子要素の最下部に要素を追加 append()
var element = document.getElementById("parent");
element.insertAdjacentHTML("beforeend", "<p>p要素 その2</p>");

上記のコードを実行すると、ID が parent の要素の子要素の一番下に、指定したp要素が追加されます。
動作としては、jQuery の append() と全く一緒です。
ちなみに、insertAdjacentHTML() メソッドの第一引数を変更することで、append() 以外の動作を行わせることができます。

簡単に表でまとめてみました。

jQuery insertAdjacentHTML()
append() “beforeend”
prepend() “afterbegin”
before() “beforebegin”
after() “afterend”

jQuery で行えるDOM要素の挿入は、こちらの方法でも問題なくできるようです。

なお、もしHTML文字列ではなく、HTML要素を指定したい場合には、insertAdjacentElement() が利用できます。
第一引数は、insertAdjacentHTML() と全く同じで、追加したい要素を指定する第二引数のみが違います。
こちらは、実装しているコードで使い分けてください。

 

ということで、jQueryなしで append() などと同じことを実行する方法でした。
システムによっては、jQueryを使えないこともあるかと思うので、この方法は覚えておきたいと思います。

村上 著者:村上

【Mac】Simulator使用時にMacのキーボードから@が入力できない【未解決】

今回は、Macのキーボード入力についてです。
タイトル通りですが、何故かSimulatorで「アットマーク@」が入力できません。
別に「アットマーク」と日本語入力して、それを変換すれば入力できないこともないのですが…流石に手間すぎるので、解決策を模索している最中です。
ちなみに、タイトルにあるとおり、まだ解決できていません。

 

解決には至りませんでしたが、今回参考にさせていただいた記事はこちら。

Macで@が打てない&JISキーボードがUSキーボードと認識される現象の原因と解決策
https://fiv-nd.com/mac-keyboard-usjis.html

こちらは Simulator ではなく、通常の入力時にアットマークが入力できないときの対処法でした。
ちなみに、こちらの原因は、キーボードが JIS ではなく US で認識されていることが原因とのことでした。

私の環境でも確認したのですが、ご覧の通り、

キーボードの配列はJISとなっていました。
キーボードの設定は問題ないようでしたね。

もしかしたら、Simulatorの言語が英語なのが悪いのでは?とも思い、設定から変えたのですが、それも効果なしでした。

 

結局解決策は見つかりませんでした…。
時間を見つけてまた探したいと思います…。

村上 著者:村上

【Windows】PDFのデータをAdobeソフトなしで2in1で印刷する方法

今日困ったことを備忘録としてまとめ。
やりたいことは、Excelから変換したPDFを2 in 1で印刷する方法についてです。
Excelでの印刷なら、やり方は分かるのですが、そのExcelデータはページが複数に分かれており、以前複数ページにまたがって選択・印刷をしたところ、変な空ページができたのでなるべく避けたいところ。
そしてPDFで印刷する方法を調べても「Adobe ○○」を使って~という方法ばかりがヒットし…。
で、やっとたどり着いた方法がこちら。

 

まず、印刷したいPDFを Google Chromeで開きます。
そして、下の画像のような印刷メニューを開きます。
なお、印刷ボタンは、画面の右上辺りにあります。

そうしたら、一番下の方にある「システムダイアログを使用して印刷」をクリックします。

そうすると、見慣れたウィンドウが表示されるので、「詳細設定」をクリック。

そして、ページレイアウトから「2 in 1」を選択し、それ以外の設定もあれば適宜変更して、エンターキーを押せば設定完了です!

ウィンドウが大きすぎるようで下の方が隠れてしまったのですが、何故かサイズを変更できず…。
まあ、設定できたから良しとします。
あとは、通常通り印刷ボタンを押すだけでOKです。

 

ただPDFを印刷するだけなのに、2面付になった途端に難易度が若干上がりました。
今後も使う機会がありそうなので、これは覚えておきたいですね。

村上 著者:村上

【JavaScript】長い文章の文末を省略して末尾に「…」を表示させる方法

昨日の記事とほぼ同じタイトルですが、今回はCSSではなくJavaScriptで文章の文末を省略して末尾に三点リーダーを追加する方法です。
こちらは範囲からはみ出たかどうかではなく、文字数で判断をしています。

ちなみに、昨日の記事はこちらから。

【CSS】長い文章の文末を省略して末尾に「…」を表示させる方法
https://cpoint-lab.co.jp/article/201805/【css】長い文章の文末を省略して末尾に「」を/

こちらの記事では、CSSで指定した範囲からはみ出した文章の文末を省略しています。
複数行の表示には対応しておらず、省略後は1行の表示になります。

 

コードはこちら。

<p id="text"></p>
var text = "春はあけぼの。やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。";
var slicetext = text.length > 20 ? (text).slice(0,20)+"…" : text;
document.getElementById('text').innerHTML = slicetext;

文字数をカウントし、20文字以上だったら、slice メソッドを使って21文字目からをカットして、三点リーダーを追加しています。
そして、pタグの中に、そのカット後の文章を表示しています。
行っている処理はこれだけです!

 

JavaScriptで文末を省略する方法でした。
好みにもよりますが、明確に○文字以下で表示することが決まっている場合や、表示する範囲が不変で、かつ複数行で表示したいときなどに使えそうです。
1行だけ表示するなら、表示範囲も可変が可能なCSSで指定する方がよさそう。
このあたりは実装する内容によって使い分けてください。

村上 著者:村上

【CSS】長い文章の文末を省略して末尾に「…」を表示させる方法

よく使うので、コピー&ペーストしやすいようにまとめ。
タイトル通り、改行されるような長い文章を自動で省略して、末尾に三点リーダーを追加する方法です。

参考にさせていただいたサイトはこちらから。

CSSのみで文末をカットし、…を代入する方法|スターフィールド株式会社
https://sterfield.co.jp/designer/cssのみで文末をカットし、-を代入する方法/

 

早速紹介しますが、コードはこちら。

#text_area {
    width: 400px;
}
.text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
<div id="text_area">
    <p class="text">春はあけぼの。やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。</p>
</div>

text_area ID で、テキストの表示幅を指定しています。ここで指定した横幅を超えた分の文章が省略され、末尾に「…(三点リーダー)」が表示されます。

そして、text Class で指定されている text-overflow で、文字が指定した範囲から超えた場合の表示方法を指定しています。
今回は、ellipsis が指定されているので、範囲からはみ出た文章は切り取られ、切り取られた部分に省略記号「…」が表示されます。

white-space は、半角スペース・タブ・改行の表示の仕方を指定する際に使用するプロパティです。
今回指定した nowrap では、連続する半角スペース・タブ・改行を、1つの半角スペースとして表示する、という指定になっています。
これだけ見ると、もしかしてこのプロパティを省略されても表示されるのでは?と思ったのですが、この white-space プロパティがないと、文章の省略は無効化されました。
どれも必須の項目のようなので、自己判断で省略したりしないように注意してください。

ちなみに、今回の方法では、省略後の文章は1行で表示されます。
確か複数行の方法もあったように思いますが…気になる方は、調べてみてください。
機会があったら、このブログでも紹介するかもしれません。

 

以上、長い文章を省略して、末尾に三点リーダーを追加する方法でした。
スマートフォンなど、表示できる範囲が少ないときなどにおすすめのCSSですね。
もしくは PCでも、表示項目が多い表などでも活用できそうです。
お好みや要望に応じて使ってみてください。

村上 著者:村上

【Mozilla Thunderbird】メッセージフィルターの設定で「返信先」を指定する方法

以前にも書いた気がしますが、私は普段の業務で「Thunderbird」というメールソフトを使用しています。
で、毎日様々なメールが届くため、メールのフィルター機能を使ってフォルダにメールを振り分けているのですが、Thunderbirdのフィルター設定には「返信先」でメールを振り分ける機能がありません。
が、設定すればできるとのことで、やってみました。

今回参考にさせていただいたサイトはこちら。

Thunderbirdのメッセージフィルタで「返信先」を利用する方法|DESIGN PAPA
http://designpapa.net/archives/2843

 

返信先を指定してメールを振り分ける方法ですが、まず、Thunderbirdの右上のメニューから、「メッセージフィルタ」を選択します。

すると、下記のようなウィンドウが表示されるので、フィルタ条件のメニューから「カスタムヘッダ」を選択します。

そして、表示されたウィンドウ内の「追加するカスタムヘッダ」に「Reply-To」と入力し、追加ボタンをクリックすれば準備は完了です!

あとは、既存のフィルタ条件と同じように、フィルタ条件にしたい返信先を設定すれば完了です!
設定が間違っていなければ、指定した返信先でメールのフィルタリングができます。

 

以上、返信先でメールを振り分ける方法でした。
小さなことですが、この些細なことが意外とストレスになったり、逆に凄く便利に感じたりするんですよね。
メールの設定で、特にメールの振り分けは結構面倒だったりしますが、何とか時間を見つけて整頓しておきましょう。
そうすれば、重要なメールの見落としを減らすことができます!

村上 著者:村上

【Windows】「圧縮(zip形式)フォルダーは無効であるか、または壊れています」の対処法

PowerPointファイルを圧縮しようとしたときに遭遇したエラーです。
1.1MB ほどのファイルを、「右クリック → 送る → 圧縮(zip形式)フォルダー」の方法で圧縮しようとしたら発生しました。
マイクロソフトのサイトによると、圧縮フォルダが 2GB を超えると、ファイルが破損するそうなのですが、今回はこの状況には合致せず…。

ちなみに、このエラーを検索した時に、一番最初にヒットした記事がこちら。

圧縮(zip形式)フォルダーは無効であるか、または壊れています – マイクロソフト コミュニティ
https://answers.microsoft.com/ja-jp/windows/forum/windows_7-files/%E5%9C%A7%E7%B8%AEzip%E5%BD%A2%E5%BC%8F%E3%83%95/9e4393df-4f05-42bb-bb89-c1ae3a564096

で、回答の中に、「ドライブの空き容量は十分にありますか?」とあるので、どうやら容量不足が原因のようです。
対処法としては、ディスクのクリーンアップで、一時ファイルの削除と、ディスクのチェック・システムファイルのチェックを行った方が良いとのことでした。

 

が、私のPCでは、圧縮したいファイルを別の場所、私の場合は一つ上の階層にコピーし、同じ方法で再度圧縮を試したところ、問題なく圧縮できました。
理由は分からないし、いまいち釈然としませんが…できたので良しとします!

 

もし、同じ現象にお悩みの方は、ファイルを別の場所にコピー&ペーストして、再度圧縮をお試しください。
もしかしたら、圧縮できるかもしれません。

ファイルの場所を変えても圧縮に失敗する場合は、ディスクのクリーンアップを行ってください。
なお、ディスクのチェックは、ディスクの破損の状態によってはかえって傷を広げ、まれに OS が起動できなくなることもありますとのこと。
実行は自己責任でお願いします。

村上 著者:村上

【CSS】枠線の色を透明にする方法

使いどころがあるかは正直謎ですが…自分の書いたであろうCSSを見返していたら、気になる記述があったのでまとめ。
CSSで指定したボーダー(枠線)の色を透明にする方法です。
…実質 border: none; の記述と変わらないのでは…?

 

コードはこちら。

<div class="border">枠線を透明に</div>
.border {
    border: 1px solid transparent;
}

透明を指定しているのは、transparent というボーダー色の値です。
通常であれば、ここには #000 などの色コードなどを指定しますが、transparent を指定すると線が透明(非表示)になります。
が、コードを見ると、線自体はあります。

感覚としては、visibility: hidden と似たような感じで使う、と覚えるとわかりやすいかも。
この時は枠線を表示して、この時は非表示に!でも他のスタイルに影響が出るのを防ぐために、表示はしないけど残したい!というときに使うのがよさそうです。
CSS初心者の時は、ボーダーの幅で若干横幅のサイズが合わなくて苦労したことがあるので…それの予防に使えそうです。

 

以上、枠線を透明にする方法でした。
ちなみに、transparent は、「向こう側が見えるほど透き通った、透明な」という意味があるとのこと。
そのまんまの意味ですが、とっさに出てこなさそう…!