アプリケーション

CUIよりGUI!GitHubをSourceTreeで利用する方法

GitHubで作成したリポジトリをSourceTreeで管理する手順です。

GitHubのアカウント作成をお持ち出なかったり、リポジトリをまだ作成していないかたは、一歩を踏み出せ!GitHubアカウント登録方法!を参考に事前に作業をしておいてください。また、SourceTreeをまだインストールしていない方は、Git管理のスゴイGUI!SourceTree for Mac インストール手順を参考にインストールしておいてください。

SourceTreeの接続設定

GitHubのリポジトリページに遷移します。

【Clone or download】をクリックします。

clone用URLをコピーします。

SourceTreeを起動し、【+新規リポジトリ】をクリックします。

ダイアログが開くので、【ソースURL】に先ほどGitHubで取得したclone用URLを入力します。【保存先のパス】は初期値は/Users/ユーザ名/リポジトリ名と自動入力されますが、変更は可能です。入力が完了したら【クローン】をクリックします。

ショートカットが作成されました。

SourceTreeのメインウィンドウが起動します。これで、GitHubリポジトリとSourceTreeの接続設定は完了です。

Gitの操作

実際にSourceTree上でブランチ作成やファイルの変更・追加などを行い、それがGitHub上でどのように表示されるか確認します。ここからの作業は、あくまで動作確認の意味合いですので、同じ作業をする必要はありません。ブランチの運用方法については、ブランチの運用【ブランチ】 | サルでもわかるGit入門 〜バージョン管理を使いこなそう〜のサイトが非常に参考になります。

【ブランチ】をクリックします。

【新規ブランチ】に任意のブランチ名を入力し、【ブランチを作成】をクリックします。

 

新規ファイル【index.php】を作成します。

中身はとりあえず

<?
phpinfo();
?>

に設定しておきます。

SourceTreeを見てみると、ブランチの履歴に【Uncommitted changes】ができているので、クリックします。これは、Git管理のディレクトリになにか変更(ファイルの追加・削除・中身の修正)があった場合に、差分を表示します。

今回は、index.phpファイルを追加し、中身を<? phpinfo(); ?>に設定しているので、ファイル名の先頭に新規追加マークアイコン【?】が付き、右の差分表示エリアに変更内容が表示されます。

変更ファイルをステージに移動します。

【コミット】ボタンをクリックします。

ユーザー情報が未登録の場合は上記のようなダイアログがでます。

必要情報を入力し、コミットのメッセージを記入してコミットをクリックします。

コミットが無事完了したら、ブランチを[master]に戻し、[develop]をマージします。【プッシュ】をクリックし、[master]ブランチにチェックが入っていることを確認し、[OK]をクリックします。

GitHubのアカウントの入力を求められます。ユーザー名とパスワードを入力します。

*もう一度ダイアログが出現し、正しいパスワードを入力してもプッシュできない場合は、SourceTreeでGitHubにプッシュしたとき、Password Requiredから進まないを参照してください。

GitHubに変更が反映されました!プッシュ成功です。

これでどんどんプログラミングを進めることができます。

 

味気ないスクショにサヨナラ!無料画像編集ソフトSkitch

スクリーンショットを撮って、画像を加工して、解説をつけるーーー

ブロガーなら避けては通れない作業であり、1記事書くのにも絶対一回は使うであろうツールが画像加工ツールです。

数ある画像編集ツールのなかでも、多くのブロガーに支持されているのが【Skitch(スキッチ)】です。

無料で使用できるのはもちろんのこと、シンプルなデザインで使い勝手がよく、画像加工の豊富な機能を備えており、動作も軽いとくれば一度使わないわけにはいきません。

作成した画像は、Evernoteアカウントに保存すると、Evernoteをインストールしたどのデバイスからでもアクセスできるようになります。

Windows版、Mac版両方対応している点も選ばれる理由の1つです。WindowsとMacを両方使用している場合は、操作が同じツールのほうが効率が良いですね。*Windows Desktop用のSkitchは2016年1月22日をもって、サポートを終了するとのことです。

それでは、Skitchのインストール手順を解説していきます。

Skitchのインストール

MacはApp Storeから、Windowsはダウンロードページにアクセスし、インストールします。今回はMacのみ解説します。AppleID作成がまだの方は、誰でも最初はMac初心者☆スグにできるAppleID作成方法を参考に作成しておきましょう。

Mac:https://itunes.apple.com/jp/app/skitch-cuoru-miaoki-rumu-gong/id425955336?mt=12

Windows:https://evernote.com/intl/jp/skitch/guide/windows/

インストールが完了したら、早速Skitchを起動します。

画面上部のプルダウンメニューから【画面のキャプチャ】を選択します。

背景が薄いグレーに変わり、マウスポインタが十字マークに変化します。

ドラッグしたまま上下にマウスを動かし、範囲を選択します。範囲を決定したら、ダイアログがでてくるので【キャプチャ】をクリックします。

すると、Skitchに操作が戻ります。もともとSkitch上で画像を開く or 以前に撮ったキャプチャが残っている場合は、破棄するかの選択ができます。新しいキャプチャを操作する場合は、【Skitchノードを破棄】をクリックします。

ここで重要なヒントです。Skitch for Mac v2以上ではSkitch Helperという機能で、アプリケーションを常駐させられるようです。なにができるかというと、わざわざ先ほどのようにSkitch起動>プルダウンを選択>画面のキャプチャという操作をしなくても、【command + shift + 5】を押すことで瞬時にキャプチャを取れます。Webページを閲覧している途中でキャプチャと取る際など、かなり作業効率は良くなります。

長くなってきましたので、詳細な機能(テキスト、図形、モザイクなど)は次の記事でご紹介します。

 

WebブラウザシェアNo.1! Google Chrome インストール方法

Webブラウザアプリ【Chrome】をご存知でしょうか。

WindowsユーザーならInternet Explorer、MacユーザーならSafariがデフォルトのブラウザに設定されています。しかし、そのハンデを物ともせず、機能性の高さからブラウザシェア1位に君臨しているのがChromeです。

日本でのChromeシェア率は1位になってからまだ日は浅いですが、世界でのシェア率と比べても日本はまだまだChromeのシェア率は伸びていくと思われます。

Chromeの特徴はなにより【高速で動作する】ということです。Chromeに慣れると他のブラウザではイライラを感じることが多くなるでしょう。他にもスマホで使え同期ができることや拡張機能の豊富さが上げられます。

Chromeをインストール

それでは以下の手順よりChromeをインストールしましょう。

以下のページにアクセスする。

https://www.google.co.jp/chrome/browser/desktop/index.html?brand=CHBD&gclid=CNDS-Zi1_M0CFVgTvQod0cIGYQ

【Chromeをダウンロード】ボタンを押下する。

Google Chromeの利用規約を読み、【同意してインストール】をクリックします。

「スマートフォンとタブレット用のアプリもダウンロードして、Chrome の設定を完了してください」と言われますが、PC版のみ必要であればモバイルアプリを入手する必要はありません。

ダウンロードしたインストーラを実行します。

もしダウンロードしたファイルが見当たらない場合は、ダウンロードフォルダを探してください。

インストールが完了すると、アプリケーションフォルダへコピーできますので、Chromeアイコンをフォルダにドラッグアンドドロップしましょう。

それでは、早速Chromeを起動しましょう。

アイコンをダブルクリックします。

最初にChromeを使うためにヒントが表示されます。

また、スタートガイドのページの同時に表示されるので、初めての方はすぐ終わるので必ず見ておきましょう。

ChromeはGoogleにより開発されたため、Googleアカウントと併用して使うと、より快適なIT生活を送れます。

*Googleアカウントをまだお持ちでない方は、3分で登録可能!Googleアカウント作成方法を参考にアカウントを作成してください。

Googleアカウントログインページにアクセスし、まずメールアドレスを入力します。ちなみに、メールアドレスの後半部分(@gmail.com)は省略することができるので、覚えておくとログインが早くなります。

次の画面でパスワードを入力します。

ログインするとさまざまなGoogleのサービスが利用できます。

右上のアイコンからサービスを選択できます。各サービスの詳細な使い方については、今後ご紹介していきます。

Chromeインストール〜Googleアカウント設定までを解説しました。

お読みいただきありがとうございます。