NTFS ファイルアロケーションテーブルの修復

samba運用中の外付けHDD


 
samba運用中にLinuxに繋いだ外付けHDDの接続が認識されなくなる不具合が発生したので、グーグルで検索し解決しました。
 
windowsのコマンドプロンプトで 解決。

 
2TBの外付けHDDが5分くらいで修復終了。

修復後に外付けHDDを Linuxに繋いだら、ちゃんと認識してくれました。
 
Windowsを利用した修復以外、Linuxでも修復できるようです。
 

 
オプション -n をつけると、デバイスに書き込みせずに情報だけ取得できます。

ntfsfix -n デバイス

関連するコマンド

$ fsik -l

$ lsblk -f
 
 

ubuntu18.04 で USB無線Wi-Fiが使えるようにする

ubuntu18.04でUSB無線Wi-Fiを使う


 
http://www.meross.com/support/
 
MWA255 AC600 Wireless USB Adapter

git clone https://github.com/msharov/rtl8812au.git
make -C ./rtl8812au

sudo insmod 8812au.ko

 
$ sudo apt-get update
$ sudo apt-get install mt7601-sta-dkms

$ sudo apt-get install aircrack-ng
$ sudo airmon-ng check kill
$ sudo airmon-ng start wlx4ce676cfb24d

 

Bluetoothアダプターを購入

 
中古のWindowsマシンを Linuxマシンに変身して快適環境 」で、快適に使っている中古ノートパソコンですが、Bluetoothが使えないのでBluetoothアダプターを購入しました。

Bluetoothアダプター購入でBluetoothを使えるようにする

使い慣れたキーボードをBluetoothで繋いで使おうと思ったら、購入したノートパソコンにBluetoothが搭載されていませんでした。

Linux(Ubuntu)で使えるBluetoothアダプターを検索して購入し、無事に使えるようになったのでレポートします。
 

製品仕様

  • 対応規格 : Bluetooth CSR 4.0 + EDR/LE
  • 転送速度:3Mbps(理論値、※使用環境により異なります)
  • インタフェース: USB2.0/1.1(タイプAコネクタ)
  • 電源 : DC5V(USB給電) 
  • 消費電力 : 300mW未満
  • 周波数帯域 : 2.4GHz(2.402GHz~2.480GHz)
  • 動作環境:5~35℃/20~80%RH
  • 外形寸法 : 約 16(W)×33(H)×7(D)mm
  • 対応OS:Windows10(32bit/64bit)、Windows 8/8.1(32bit/64bit)、Windows 7 (32/64bit)、Windows Vista (32/64bit) 、Linux(32/64bit)に対応しています。

 
ノートパソコンのUSBポートに、購入した Bluetoothドングルを挿入するだけですぐにBluetooth搭載ノートパソコンになりました。

Wifi中継機も購入

奥さんと愛犬に迷惑がかからないように、外に出てたばこを吸っています。
そうするとiPhoneのWi-fiが切断されてしまい不便に感じていたので Wifi中継機を購入しました。

 
リピーター&ルーター/アクセスポイントと3つのモードがありますが、僕はリピーターモードを選択しました。
リピーターモードはルーターと Wifi中継機の間は無線LAN(Wifi)接続、電源コンセントに差し込んだ Wifi中継機が Wifiを中継してくれます。

 
WPSボタンを押下してルーターとWifi中継機のワイヤレス接続が可能になるまでの時間が少々長めでした。設定が終わってから快適に使っています。

JavaScriptを使ってみよう!!

JavaScriptを使ってみよう!!

 
JavaScriptのライブラリを使ってパララックスを実装したけど、JavaScriptに関する基礎知識をほぼ忘れてしまっているのに気が付きました。

という事で、JavaScriptの基本の基本をおさらいしています。

hello javascript worldをブラウザに表示

 

JavaScriptを使う

JavaScriptの文法は二の次にして、JavaScriptを使い倒してしまいましょう。
 
<script>~</script> の間に JavaScript のプログラムを記述。
 
<!–   –>ってHTMLでは、コメントアウトです。
JavaScriptでコメントアウトする時は、
1つの行内では、//を使うと、それ以降がコメントアウト。複数の行の時は/*   */(入れ子はダメ)で挟んだところがコメントアウトされます。
 
使っちゃダメ=予約語 をチェックしましょう。
変数名や関数名で使えない予約後は次の通りです。

JavaScriptは、変数名、関数名の大文字と小文字は別の文字として扱われます

  • await
  • break
  • case
  • catch
  • class
  • const
  • continue
  • debugger
  • default
  • delete
  • do
  • else
  • enum
  • export
  • extends
  • false
  • finally
  • for
  • function
  • if
  • import
  • implements
  • in
  • instanceof
  • interface
  • let
  • new
  • null
  • package
  • private
  • protected
  • public
  • return
  • static
  • super
  • switch
  • this
  • throw
  • true
  • try
  • typeof
  • var
  • void
  • while
  • with
  • yield

 

予約語を覚える必要は無いと思いますが、変数名や関数名で使えないワードがあるという事だけ知っておいてください

JavaScript実践のコツ

JavaScriptの特徴は、PHPやPerlのようなサーバーサイド・スクリプトと違って、クライアントサイド・スクリプトでWebブラウザ上で実行させる事を目的にしたスクリプト言語です。
 
有名なライブラリーをご紹介します。

これらのライブラリを使えばJavaScriptの文法を覚える必要もなく、サクサクとWebサイトが作れます

  • jQuery
  • 数多くのWebサイトで使われています。小規模なWebアプリケーションで利用されています。

  • Vue.js
  • シンプル・軽量。高速です。仮想DOMを使っていて描画を最適化してくれます。

  • Bootstrap
  • よく使われるスタイルがあらかじめ定義してあります。デザイン性のある高機能なWebサイトが簡単に構築できます。
    レスポンシブWebデザインに対応しています。

  • React
  • Button や Form などの UI パーツを使えるようにしたもの。FacebookやInstagramで広く使われています。

 

まとめ

JavaScriptの文法の細かい事を覚える時間があったら、ネットで検索して実装する方法を調べましょう。

僕は文法など細かいことを気にしすぎて手が止まってしまうよりも、力技(ちからわざ)でやりたいと思っている事を実装するようにしています。

インターネットが普及している現在、Web作成でわからない事は検索すればほぼ解決できるはずです。

お客様が望まれるWebサイトを構築する時、JavaScriptの知識が必要になる部分はそれほど多くありません。(概念などは把握しておきますが・・・。)

Webサイト構築には幅広い知識が求められる事も多いので、リサーチなどマーケティングの知識やコピーライティングの知識、できればプログラミングの知識も必要とされます。

実際に作業をする時、やりたい事を検索しながら実装し時間が空いたら基礎に立ち返るというやり方でも仕事をこなせると考えています。

そのような経験を積み重ねる事でスキルをみがき、お客様に自信を持ってよりよいアイディアを提供していきたいですね。
 

jQueryを使ってパララックスのホームページ作成

ホームページ作成のための道具選び

 
前回、ご紹介したように パララックスを使ったホームページを作るときの僕の開発環境(?)と開発手順について説明します。

jQueryを使ってパララックスのホームページ作成

僕は、Linux ( Ubuntu18 )を使っています。
今回、パララックスを実装するためにデモサイトを解析する時「viエディタ」を使用しました。

パララックス実装のための解析

Webサイトにパララックスを実装する時の僕の手順を公開します。

1 パララックスで綺麗に表示されているデモサイトを探します。(「jQuery パララックス デモ」をキーワードに検索)

jQuery Parallax Plugin Dem
 

 
というサイトが気に入ったので、このサイトの解析を行います。

2 表示されたブラウザで コントロール・キー + U を押下して、HTMLソースを表示します

 
3 HTMLソースをコピーして viエディタで解析します

 

HTMLソースは、90行。head部分で JavaScriptを読み込んだり、JavaScript関数を記述しています。

head部分作成した JavaScript関数を <ul id=”ほげほげ”> で呼び出しているのがわかりました。

表示部分を司る cssファイルについて調べると、 style.css だけ使っている事がわかりました。この style.css も viエディタで読み込んで解析します。

style.css は136行。表示フォントの指定やクラスごと、idごとに背景画像(background:url())などを設定している事がわかりました。

ホームページ作成 HTML5、CSS3。基本的なHTMLの書き方 も参考にしてくださいネ。

 
4 3で解析したことを踏まえて、わからない事をGoogleで検索します。
 
 例)
  このデモサイトでは、「Nikebetterworld Parallax Effect」というライブラリが使われている事がわかりました。ライブラリをダウンロードして解凍。

.
├── README.markdown
├── __MACOSX
│ └── scripts
├── images
│ ├── dot.png
│ ├── firstBG.jpg
│ ├── secondBG.jpg
│ ├── thirdBG.jpg
│ └── trainers.png
├── index.html
├── jquery-parallax-1.1.3.zip
├── scripts
│ ├── jquery.localscroll-1.2.7-min.js
│ ├── jquery.parallax-1.1.3.js
│ └── jquery.scrollTo-1.4.2-min.js
└── style.css

 

パララックス実装開始!!

Webサイトにファイルをアップロードする前に、僕の場合はローカルマシンの Ubuntuノートパソコンに作業用のディレクトリ(フォルダ)を作成して、動作検証しています。

今回、解析したデモサイトは90行と非常に短かいので UNIX/Linux を使うメリットはあまり感じなかったかもしれません。
UNIX/Linux は、もともと研修者・プログラム開発者のために作られた優れたOSです。あなたも UNIX/Linux の使い方をマスターして、仕事をスマートにこなせるようになりましょう。
 
先日、パララックスを使ったホームページを作成しました。このサイトも見てくださいネ。
 

WordPressを使ってビジネスでホームページを作成

WordPressを使ってビジネスでホームページを作成

WordPress

 
ビジネスでWebサイトを作成する時に、メンテナンスがしやすいWordPressを使う事もある思います。

WordPressのテーマを選んで、「外観」や「設定」を最適化して完了!!

だけではお客様に満足してもらえません。

HTML&CSSの知識を身に着けてお客様に感謝されるWebサイトを作れるようになりましょう。

WordPressでホームページを作成

僕はビジネスでWebサイトの作成をしていますが、WordPressを使ってWeb作成する事が多くなりました。

仕事でWebサイトを作成する時

  • メンテナンスが楽なこと。
  • カスタマイズが容易なこと。
  • 表示速度が速いこと。

 
3つのポイントを重視しています。
 
集客できるWebサイトは日々の更新が必要になります。
WordPressで作成したWebサイトはコンテンツを更新した時にページ内の変更だけですむ事が多いのでメンテナンスが非常に楽です。

CSSの設定で表示の仕方を美しく

お客様のニーズに合わせてデザインを変更する時に、CSSの知識が必要になります

WordPressでCSSを編集する時は「Simple Custom CSS」というプラグインを使います。
このプラグインを使うと、テーマをアップデートした時でも CSSファイルが上書きされないので安心してCSSを変更する事ができます。

Simple Custom CSSについては、過去記事 → 「wordpressプラグイン僕のおすすめ6選はこれっ。 」も合わせてお読み下さい。

CSSの覚え方

CSSは、覚えるのではなくどのサイトを見れば解決できるか(チートシート)知っておくことが大切です。

チートシートとは?
 カンニング・ペーパーのこと。

CSS 参考になるサイト
日本語対応!CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス

 

CSS で出来ること

CSS(Cascading Style Sheets)は、HTMLで記述されたWebページの体裁(レイアウト)を指定するための言語のこと。
 
CSSでは下記の事ができます。

  • レイアウトを整える
  • 色を変える
  • 大きさを調整する
  • 線をつける
  • 形を変える
  • アニメーションをさせる

 
過去記事 → ホームページ作成 HTML5、CSS3。基本的なHTMLの書き方 も合わせてお読み下さい。
 

ホームページ作成 HTML5、CSS3。基本的なHTMLの書き方

ホームページ作成 HTML5、CSS3。基本的なHTMLの書き方

HTML5、CSS3

 
ホームページが作れれば、クラウドソーシングなどで1万円から5万円程度の案件がこなせます。

スキルアップすれば、店舗や企業からの依頼を受注して独立し個人事業主になる事だってできます。

ホームページ作成に必要なHTMLとCSSの基本

HHTML(HyperText Markup Language)は、Webページのタイトル、見出し、段落、箇条書きなどの文章構造を記述する言語のこと。

CSS(Cascading Style Sheets)は、HTMLで記述されたWebページの体裁(レイアウト)を指定するための言語のこと。

基本的なHTMLの書き方

  • <!doctype html>
  •  このファイルははHTMLだとブラウザに説明するための宣言。

  • <html lang=”ja”>
  •  html要素内で使われている言語は日本語という意味。

  • <meta charset=”utf-8″>
  •  meta要素はhead要素内に配置し、このページに関する色々な情報を記述します。

    ・文字コード
    ・ページの紹介文(概要文)
    ・ページに関連するキーワード
    ・TwitterやFacebookなどのSNSの情報
    ・作ったソフト
    ・著者
     今回の場合は、「このページは文字コード utf-8 」と宣言しています。

  • <head></head>
  •  この中に metaタグ、titleタグの書き込み、スタイルシート(CSS)の読み込み、JavaScriptの読み込みを記入。

  • <body></body>
  •  文章の本体。

  • <nav></nav>
  •  ナビゲーションと呼ばれる部分。リンク集の内容を示す見出しやリンクのリストなど。

  • <article></article>
  •  自己完結する内容を表すセクション。記事の見出しや文章など。

  • <section></section>
  •  汎用的なセクションを定義する。コンテンツ内においてテーマでまとめられた部分(見出しや文章など)。

  • <header></header>
  •  まとまりの最初の部分。

  • <footer></footer>
  •  一般的にそのセクションの筆者、関連ドキュメントへの陸、コピーライトなどの情報。

  • <title></title>
  •  Webページのタイトル。

  • <h1></h1>
  •  見出しとなるテキスト。h1からh6まで。

  • <p></p>
  •  段落。

  • <a href=”#” target=”_blank”>
  •  リンクを作成。

  • <img src=”./images/sample.jpg” alt=”サンプル画像”<
  •  画像ファイルのURL.

  • <div></div>
  •  CSSを適用させる部分で使う。

  • <address></address>
  •  連絡先。

  • <small><small>
  •  誤解を避けるための注意書きや警告、法的制限、コピーライトを表す法律用語など。

基本的なCSSの書き方

 セレクタ { プロパティ : 値; プロパティ; 値; ・・・ }

 

自分でホームページを作ることが出来たら

自分でホームページを作ることが出来たら・・・・。

  • お金が節約できます
  •  Webデザイナーにホームページ作成を依頼すると最低でも10万円以上の制作費が請求されます。

  • 時間が節約できます
  •  すぐにコンテンツを更新したい時でもデザイナーにWebサイトのイメージを伝えるのに、打ち合わせが必要になり時間がかかります。

  • 副収入が得られます
  •  ホームページを作るスキルを活かして、クラウドソーシングで仕事を探して副収入をえたり、お店や企業から仕事を受注して収入を得て独立することも出来ます。