webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

WEB制作会社のフォトグラファー

windows10 電源管理

f:id:ohta-felica:20170713233314p:plain

 「高速スタートアップを有効にする」チェックを外す。

 

f:id:ohta-felica:20170713233530p:plain

 先日無償アップグレードが終了した『Windows10』ですが、初期状態で有効になっている『高速スタートアップ』と呼ばれる機能が様々な不具合・異常動作の原因になっているようで、8/12現在ではこの機能を"無効"にするよう推奨されています。今回は、この『高速スタートアップ』を無効化する手順と、そもそもこの機能は何なのか?という事について簡単に紹介致します。

そもそも『高速スタートアップ』とは何なのか?

実はWindows8.1から存在しているこの『高速スタートアップ』、文字通りの意味で"スタートアップ(起動)"を"高速"にするもので、過去のOSにあった「休止状態(ハイバネーション)」に似たような仕組みになっています。(ただ、「休止状態」はWindows10にもまだあります)

Windows10では初期状態(デフォルト)で有効になっているため、基本的には以下の手法を自分で行わなければ無効化は出来ません。

有効化した場合の問題点

つい先日も、これに起因すると思われるトラブルに対処してきたのですが、現在最も多く報告されているのが、"終了時と起動時にPCの構成に変化があった際に様々な不具合が生じる"というものです。

具体例を挙げると、"USB外付けHDDを付けたままシャットダウンした後、この外付けHDDを外してからPCを起動し再度その外付けHDDを接続しても認識をしない"と言ったようなトラブルケースが考えられます。

上記以外にも、"起動は速くなるが終了が異常に遅くなる""起動時のWindowsUpdateによる更新作業が終わらない""起動時にNumlockがオンにならない""起動時にブルースクリーンエラー(BSOD)が発生する"等々、様々なものが報告されています。

 

gitを使って、チームで作業する準備

まずはリモートサーバー上での作業になります。

リモートサーバーに、

1.  チームを作る

2.  チームのメンバーを登録する

3.  チームのフォルダ(=リポジトリ)を作る

4.    各個人のフォルダ(=ローカルリポジトリ)とチームのリモートリポジトリを紐づけます。

1.から3.はbitubucketとgitをインストールして作業します。

4.に進むためにはsourcetreeをインストールする必要があります。dreamweaverでもローカルのリポジトリを使えるようになりました。

 

リモートでリポジトリを管理するためには「bitbucket」か「github」を使います。

github」で非公開のリポジトリを作成するにはお金がかかってしまいます。

「bitbucket」では非公開のリポジトリを無料で作成できますが容量の制限があります。

 

ここでは、ローカルでリポジトリを管理するために「sourcetree」を使います。

「git」をGUIで使えるアプリケーションです。

 

1. まずは「管理者」がチームを作る(チーム名の登録)

「bitbucket」をインストールする。リモート上で「gitで管理するフォルダを=リポジトリ」を操作するために使います。

インストールが完了すると下のような画面が現れるので、「plan to work with others?」

にすすむ。

まず「管理者」がbitbucketをインストールして「team」を構成する。

とにかくチームを作って、チームのプロジェクト、チームのリポジトリといった具合に

チームで作業をするためには、チームを構成する。

f:id:ohta-felica:20170712235343p:plain

 

f:id:ohta-felica:20170713220507j:plain

 チームの名称は「会社+部署名」などにしておくと便利で分かりやすい。チームのフルネームなので、とにかくなんのチームかわかるようにしておく。

チームIDは、URLの一部になるので「チーム名」のわかりやすい省略形を指定する。

 チームのコード名といいますか、3letter-codeのようなものです。

 

 

2. チームの構成員を登録

チームの構成員は随時追加できるので、まずは当面一緒に作業する人をメンバーに加えておく。

それぞれのメンバーには

sourcetree 

bitbucket


git (githubではない、、、)

Git

 

以上3つアプリケーションをインストールしてもらう。

それぞれのサービスに登録する「氏名」「メールアドレス」は共通にしておくのが基本。管理者の”bit bucket”から、チームのメンバーに登録するときはアプリケーションをインストールした際のメールアドレスが必要となります。

 

3. リモートリポジトリを作成 

 チームのリモートリポジトリを作成する。

リポジトリとはgitによって管理されているフォルダのこと。

ただのフォルダではなく「.git」という名前の付いたファイルが中にあるフォルダで、

このファイルがあるとバージョンの管理ができる。

このフォルダの中にあるファイルはすべてログが記録されているということ。

とにかく「チーム」の「リモートリポジトリ」を作成する。

中身は空っぽでよい。

f:id:ohta-felica:20170713000145p:plain

 

f:id:ohta-felica:20170713000417p:plain

 上の例だと、、、

「buyou」チームの、「BYO」プロジェクトに属す「BYO」リポジトリ(フォルダ)

を作成しています。「リポジトリタイプ」は「git」,つまりGITによって管理されているリポジトリであるということ。作成をクリックして作成します。

 

 

4. ローカルにクローンを作成する 

チームのリモートリポジトリを作成したら、「リポジトリ」の「概要」を確認します。

一番左の「+」をクリックすると、、、

f:id:ohta-felica:20170713222151p:plain

 下のような画面になります。

f:id:ohta-felica:20170713222414p:plain

 「clone this repository」をクリックします。

なにをしているかというと、、、

リモートサーバー上にある「チーム」の「リモートリポジトリ(フォルダ)」からローカル上の指定したフォルダにリモートリポジトリのファイルをダウンロードするということ。

ただダウンロードするのではなく、ローカル上の指定したファイルを「ローカルリポジトリ」にしてくれます。つまり「git」で管理しているフォルダを作ってくれる。だからダウンロードとは言わないのでしょう。

f:id:ohta-felica:20170713222846p:plain

 「clone in sorce tree」をクリックすると、リモートリポジトリのURLが表示され、

ローカル上のどの場所に「ローカルリポジトリ」を作成するのか指定できますから、入力をします。このとき先に進まないときは、現在見えているウィンドウの裏に隠れている「source tree」のログインウィンドウを探してみましょう。(わたしはこれで手間取りました、、、)

 

このようにして、「リモートリポジトリ」と自分のローカルにある「ローカルリポジトリ」の同期をとる準備ができました。

「クローン」とは最初に、リモートからローカルにデータを移す時に使う言葉です。

「クローン」の後にリモートからローカルに差分データやログをダウンロードすることを「プル」といいます。

逆に、ローカルからリモートに差分データやログをアップロードすることを「プッシュ」といいます。

 

これらの言葉が「git」でバージョン管理するときのハードルになっています。しかしその用法や意味を理解すればそんなに難しくないと思います。

 

空っぽのフォルダ、、、

まだリポジトリの中が空っぽなので、管理者は自身の「ローカルリポジトリ」にプロジェクトに必要なファイルをいれます。

その後に、ローカル上で「ステージ」→「コミット」そしてリモートに「プッシュ」しておきます。 

 

こうして、リモート上にあるプロジェクトに必要なファイルを、メンバー全員で使うことができるようになりました。

git install その3

f:id:ohta-felica:20170709224653p:plain

 これが「gitビューを表示する」アイコン。

クリックするとタブの中身が表示される。

新しく「リポジトリ」を作成しただけでは、ファイルの変更が追跡できていません。

追跡できていないファイルはgitビューで緑色の表示になります。

f:id:ohta-felica:20170709225133p:plain

緑色の表示がされているファイルを「コミット」すれば追跡が開始されます。

 

「gitパネル」に切り替えます。

 

f:id:ohta-felica:20170709225858p:plain

 現状は、「リポジトリ(ファイルを管理するためのフォルダ、、、)」を作成した状態。

どのファイルの変更を追跡するのかまだ指定をしていない。

リポジトリ」に「コミット」すると追跡が始まる。

というか、以後の変更に対して「差分」を取ってくれる。

リポジトリ」に「コミット」する前に、まず「ステージ」する。

「ステージ」「コミット」の作業は「gitパネル」で行う。

 

f:id:ohta-felica:20170709230030p:plain

 「全てをステージ」をクリックする。

こうして、サイト内にあるすべてのファイルを「ステージ」して「コミット」する準備をする。

クリックすると、「ステージされたファイルをコミット」アイコンが表示される。

f:id:ohta-felica:20170709230549p:plain

 コミットの画面が出てきます。

一番下にコメント欄があるので、変更箇所を簡単にまとめて記載しておく。

f:id:ohta-felica:20170709230912p:plain

 「gitビュー」はじめは緑表示されていたファイルが黒表示になっています。

f:id:ohta-felica:20170709231040p:plain

 少し変更を加えて、なにが起きるのか調べてみます。

変更した箇所に黄色い目印が付きました。

f:id:ohta-felica:20170709231438p:plain

 「git表示」の変更を加えたファイルが「赤」表示になりました。

f:id:ohta-felica:20170709231527p:plain

 「gitパネル」に修正を加えたファイルが表示されています。

「修正済み」と書かれています。

f:id:ohta-felica:20170709231656p:plain

 「差分」アイコンをクリックすると、差分が確認できます。

f:id:ohta-felica:20170709232540p:plain

 

f:id:ohta-felica:20170709232633p:plain

 「ファイルを元に戻す」アイコン

f:id:ohta-felica:20170709232743p:plain

 「OK」クリックするを元に戻ります。

f:id:ohta-felica:20170709232815p:plain

 

dreamweaverでgit その2 リポジトリの作成や紐づけ

gitのインストールがすんだら、dreamweaverを立ち上げる。

 

ひとまず作ったhtmlファイルをローカルサーバー上にあげて、みんなでgitをどのように使うのか、自分で確かめている段階です、、、、

f:id:ohta-felica:20170709222746p:plain

 

f:id:ohta-felica:20170709223108p:plain

 

f:id:ohta-felica:20170709223255p:plain

 以上で、gitリポジトリを作成できました。

 

 

 

追記:

bitbucketを使って、チームのリモートリポジトリを作成しました。

ohta-hiroyuki.hatenablog.com

自分もこのチームのメンバーなので、

チームのリモートリポジトリのURLを入力して

自分のユーザー名(チームに登録されているattlacianアカウント名)

パスワードを入力するとうまく紐づけられました!

これでsourcetreeなしでもいけるのか?

f:id:ohta-felica:20170713231243j:plain

 

dreamweaverでgit その1

Git - Downloads

f:id:ohta-felica:20170709221037p:plain

 

 adobeのサポートには

「gitクライアントはデフォルトの設定でインストールすることをお勧めします」

とあるので、下記の通りデフォルトでインストールしました。

f:id:ohta-felica:20170709221212p:plain

 

f:id:ohta-felica:20170709221412p:plain

 

f:id:ohta-felica:20170709221435p:plain

 

 

f:id:ohta-felica:20170709221457p:plain

 

f:id:ohta-felica:20170709221528p:plain

 

f:id:ohta-felica:20170709221601p:plain

 いろいろあるけれども、とりあえずデフォルト。

人が作ったボタンを分解してみる

f:id:ohta-felica:20170622234259p:plain

 分解した状態。

一番下から、執拗な分析をしてみる。

f:id:ohta-felica:20170622234756p:plain

 「描画モード」は変更しても変わりはない。

「不透明度」を「75%」にするのも味付け程度。

「オフセット」に対してぼかしは2倍。

「カラー」ではなく「濃さ」にしている。ここがポイントだろう。

「100%」だと黒いシャドーになる。なんだろう?

にじんだようにシャドー。

 

f:id:ohta-felica:20170622235644p:plain

 下から2番目。微妙なグラデーション。

「ブレンドモード」は通常。

f:id:ohta-felica:20170622235825p:plain

 下から3番目。ソリッドカラー。

 

f:id:ohta-felica:20170623000030p:plain

 下から4番目。まずはグラデーション。

縦横比率95.3%

回転-13.9度

f:id:ohta-felica:20170623000343p:plain

 不透明度を「100%」にしてみる。

f:id:ohta-felica:20170623000453p:plain

 ちなみにスクリーンでダブらせるとこんな感じ。

f:id:ohta-felica:20170623000559p:plain

 「40%」にしてみるとこんな感じ。

f:id:ohta-felica:20170623000654p:plain

 

f:id:ohta-felica:20170623000734p:plain

 一番上。まずはグラデーション。

 

f:id:ohta-felica:20170623000828p:plain

 こちらは不透明度が「79%」

f:id:ohta-felica:20170623001051p:plain

 全部重ねた状態。

ソリッドカラーを変更するだけで、いろんな色のボタンが作れるのは便利ですね!

f:id:ohta-felica:20170623001211p:plain

 

black and white bitmap image変換してイラストレーターに再配置

splatterを使って遊ぶ。

f:id:ohta-felica:20170618215204p:plain

 resizeしてから、部分によってみるとこんな感じ。

ウォーターマークも見える。

f:id:ohta-felica:20170618215329p:plain

 グレースケールに変換する。目的は白黒のビットマップイメージを作ること。

f:id:ohta-felica:20170618215418p:plain

 破棄します。

f:id:ohta-felica:20170618215504p:plain

 OPTION!

フィルター→ぼかし→ガウス

半径は1.5px

拡大するとこんな感じ

f:id:ohta-felica:20170618220318p:plain

 レベル補正を使って輪郭を調整します。

f:id:ohta-felica:20170618220448p:plain

 ↑OPTION終わり

 

モノクロ2階調に変換します。

 

f:id:ohta-felica:20170618215707p:plain

 解像度は800から1200。

50%を基準に2階調に分けるを選択。

こうすることで、中途半端なグレーが存在しなくなる。

f:id:ohta-felica:20170618215812p:plain

 拡大するとこんな感じになります。

 

f:id:ohta-felica:20170618220631p:plain

 このままTIFFで保存して、フォトショップはここまで。

イラストレーターを開いて、新規ファイルを作成。先程保存したTIFF画像を配置します。

 

f:id:ohta-felica:20170618220942p:plain

 「編集」「カラー」「オブジェクトを再配色」

f:id:ohta-felica:20170618221334p:plain

 スプラッターを好きな色に変更できます。

f:id:ohta-felica:20170618221429p:plain

 フォトショップでモノクロに階調のビットマップにしてからイラストレーターに再配置というプロセスは応用範囲が広そうです。

black and white bitmap image

helpx.adobe.com

Convert an image to Bitmap mode

Converting an image to Bitmap mode reduces the image to two colors, greatly simplifying the color information in the image and reducing its file size.

When converting a color image to Bitmap mode, first convert it to Grayscale mode. This removes the hue and saturation information from the pixels and leaves just the brightness values. However, because only a few editing options are available for Bitmap mode images, it’s usually best to edit the image in Grayscale mode and then convert it to Bitmap mode.

Note:

Images in Bitmap mode are 1 bit per channel. You must convert a 16‑ or 32‑bits-per-channel image to 8‑bit Grayscale mode before converting it to Bitmap mode.

 

  • Do one of the following:
    • If the image is in color, choose Image > Mode > Grayscale. Then choose Image > Mode > Bitmap.

    • If the image is grayscale, choose Image > Mode > Bitmap.

  • For Output, enter a value for the output resolution of the Bitmap mode image, and choose a unit of measurement. By default, the current image resolution appears as both the input and the output resolutions.
  • Choose one of the following bitmap conversion methods from the Use pop-up menu:

    50% Threshold

     

    Converts pixels with gray values above the middle gray level (128) to white and pixels with gray values below that level to black. The result is a very high-contrast, black-and-white representation of the image.

     

    Pattern Dither

     

    Converts an image by organizing the gray levels into geometric configurations of black and white dots.

     

    Diffusion Dither

     

    Converts an image by using an error-diffusion process, starting at the pixel in the upper-left corner of the image. If the pixel’s value is above middle gray (128), the pixel is changed to white—if below it, to black. Because the original pixel is rarely pure white or pure black, error is inevitably introduced. This error is transferred to surrounding pixels and diffused throughout the image, resulting in a grainy, film-like texture.

     

    Halftone Screen

     

    Simulates the appearance of halftone dots in the converted image. Enter values in the Halftone Screen dialog box:

    • For Frequency, enter a value for the screen frequency, and choose a unit of measurement. Values can range from 1.000 to 999.999 for lines per inch and from 0.400 to 400.00 for lines per centimeter. You can enter decimal values. The screen frequency specifies the ruling of the halftone screen in lines per inch (lpi). The frequency depends on the paper stock and type of press used for printing. Newspapers commonly use an 85‑line screen. Magazines use higher resolution screens, such as 133‑lpi and 150‑lpi. Check with your print shop for correct screen frequencies.

    • Enter a value for the screen angle in degrees from ‑180 to +180. The screen angle refers to the orientation of the screen. Continuous-tone and black-and-white halftone screens commonly use a 45° angle.

    • For Shape, choose the dot shape you want.

     

    Note:

    The halftone screen becomes part of the image. If you print the image on a halftone printer, the printer will use its own halftone screen as well as the halftone screen that is part of the image. On some printers, the result is a moiré pattern.

     

    Custom Pattern

     

    Simulates the appearance of a custom halftone screen in the converted image. Choose a pattern that lends itself to thickness variations, typically one with a variety of gray shades.

    To use this option, you first define a pattern and then screen the grayscale image to apply the texture. To cover the entire image, the pattern must be as large as the image. Otherwise, the pattern is tiled. Photoshop comes with several self-tiling patterns that can be used as halftone screen patterns.

     

    Note:

    To prepare a black-and-white pattern for conversion, first convert the image to grayscale and then apply the Blur More filter several times. This blurring technique creates thick lines tapering from dark gray to white.

     

    Photoshop convert image to bitmap mode
    Original grayscale image, and 50% Threshold conversion method

    Photoshop Pattern Dither conversion method
    Pattern Dither conversion method, and Diffusion Dither conversion method

 

photoshop color theme

「ウィンドウ」「エクステンション」「adobecolorテーマ」

f:id:ohta-felica:20170617221510p:plain

 

下の写真で、モデルが着用しているピンクの衣装の補色を背景にしてみる。

f:id:ohta-felica:20170617222649p:plain

 

まず、カラーピッカーのサンプルを取得する範囲を広くする。

 

 ピックアップした色が、描画色(active colror)になる。

 

f:id:ohta-felica:20170617223443p:plain

 

 最初に開いた「adobe color theme」ウィンドウの中段にあるアイコンをクリックする。

f:id:ohta-felica:20170617223333p:plain

 

adobe color themeの中に色が取り込まれました。

次に一番右にあるアイコンをクリックします。

f:id:ohta-felica:20170617223857p:plain

 

プルダウンメニューの中の「補色」を選択する。

 

f:id:ohta-felica:20170617224057p:plain

 

すると、濃度の異なる補色が2つ表示されます。

 

f:id:ohta-felica:20170617224236p:plain

 

 

一番左側のアイコンをクリックします。

 

f:id:ohta-felica:20170617224353p:plain

 すると、描画色が補色に設定されます。

 

f:id:ohta-felica:20170617224456p:plain

 

 

あとはマスクを切って、背景のレイヤーを補色で塗りつぶせば目的を達成。

 

f:id:ohta-felica:20170617224936p:plain