So-net無料ブログ作成

古いノートパソコン活用術 Bluetooth [ネットビジネス]

Bluetoothアダプターを購入

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中継機を購入しました。


 


nice!(0)  コメント(0) 
共通テーマ:moblog

ホームページ作成時に使っている本 [ネットビジネス]

ホームページ作成時HTML&CSS3を調べる時に使っている本


本

 
そばに置いておきたい本ってありますよね。

グーグルで検索するよりも効率良く使えてる本を紹介します。

ホームページ作成 ショートコードの多用に注意です。

WordPressテーマを変更する事が多くなっています。

WordPressのテーマを変更する時に、

「失敗したぁ!!」

と思うのが、WordPressテーマ固有のショートコードです
WordPressテーマを変更する度に、ショートコードの部分も書き換えなければなりません

投稿記事数が少ない時は、手作業で出来るかもしれませんが10年近く続けているWebサイトだと手作業で変換するわけにもいきません。

あなたならどうしますか?

投稿記事が1,000件以上あるWebサイト。

流行りのデザインに変えたいのでWordPressテーマを変更する事になりました。

あなたなら、以前使ったショートコードの部分をどうしますか?


こんな時は、プログラムを作ってMySQLデータベースのデータを直接書き換えています。

データのバックアップととって、投稿記事で使われているショートコードを抜き出して、ショートコードに変わる HTML&CSS に変換するプログラムを作成。それから検証して終了です。



これって、精神的に疲れます・・・・。

ショートコードは極力つかわず CSS で対応する。

そんな事が何件か続いたので、僕は最近なるべくショートコードは使わず HTML&CSS3 で書くようにしています。

WordPressテーマの洒落たショートコードと似たようなデザインにするために、Googleで検索したり本で調べます。

今、僕がよく使う本はこの2冊です。



よく使う本

 

こういう本の決めては「索引」です。
サクッと調べられる手軽さ、情報の簡潔さと使用例が書かれている事が大切です。

僕が重宝しているのはコンパクトさかな。
机のはじの方に置いておいて、手の届くところに置いてもじゃまにならない事も重要だと感じています。

HTML&CSSを勉強するなら

あなたが良いと思ったWebサイトを見つけたら、ブラウザーでお気に入りのWebサイトを表示して、「コントロールキー」+「u」(Macならオプション・キー+u)を押してhtmlソースを表示しましょう。


htmlソースを表示

 
htmlソースを表示してチェックするようにしていれば、HTML&CSS3に関するテクニックの多くを学べます。

html整形ツール

お気に入りの htmlソースを viエディタに貼り付けてモディファイして勉強した時に、適切なインデントと改行をして整形してくれる便利なツールが数多くWeb上で公開されています。

 

 

これらのツールを使うとHTML&CSSの勉強がしやすくなります。

p.s.
今年の生徒さんも、個性的です。
 でブラインドタッチを覚えたら
 一生モノの技術だよぉー。 」
と、講義中にハナシをしたら、早速 イータイピングやってました。
いぃなぁ。 若者!!

nice!(1) 
共通テーマ:moblog

明日はお仕事 [ネットビジネス]

 明日はお仕事

 

明日は、久しぶりのお仕事です。

年に8コマだけの情報学の講義。
今年はどんな生徒さんに会えるか楽しみです。

教科書が変わったので、こちらも再準備が必要・・・・。
勉強になりますっ!!
目指せ!! 生涯現役!! ですが、健康寿命を延ばすためには散歩も必要とか・・・・・。
わかっちゃいるけどねぇ。
でも、歩けなくなってから悔やんでもなぁ・・・。 と モノオモウ おいらでした。

nice!(0) 

JavaScriptを使ってみよう!! [ネットビジネス]

JavaScriptを使ってみよう!!


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

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

hello javascript worldをブラウザに表示

 

<html>
<body>
<script type="text/javascript">
document.write("hello javascript world<br>");
</script>
</body>
</html>


 

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

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

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


nice!(0) 
共通テーマ:moblog

ホームページ作成 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関数を
      で呼び出しているのがわかりました。


      表示部分を司る 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 の使い方をマスターして、仕事をスマートにこなせるようになりましょう。
 
先日、パララックスを使ったホームページを作成しました。このサイトも見てくださいネ。
 


nice!(0) 
共通テーマ:moblog

パララックスを使ったホームページ [ネットビジネス]

パララックスとは?

 


 
スクロールした時に背景だけスクロールの速度を変えたり、要素ごとに異なる速度でスクロール表示させる効果パララックス(parallax)といいます。

 

パララックスを使ったホームページ


勉強のためにパララックスを使ったWebサイトを作成しました。

https://piyo2.click/

 

 

パララックス実装に必要な知識は?



    • jQuery・JavaScriptの知識

 

    • レイヤー(階層構造)の概念



この2つの知識が必要になります。
 
WordPressでパララックスを実現する時は、有料のWordPressテーマ grazioso があります。
僕はパララックスを実装する時は、HTML & CSS でトップページを作っています。

 

パララックスのメリットとデメリット


パララックスを実装したWebサイトのメリットは、訪問者に好印象・インパクトを与えられますが、一方、Webサイトが重くなるというデメリットもあります。

情報を詰め込みすぎてWebサイトが重くなりすぎないように、コンテンツの構成を考えてください。

パララックスを実装する


パララックスを実装するにあたり、「Vegas2」を使用しました。


vegas2


 
Vegas2 に関する情報は、 TRANSITIONS で取得できます。


vegas.min.css、vegas.min.css と vegas.js それから jquery-2.1.3.min.js を外部ファイルとして記述します。

<link rel="stylesheet" href="css/vegas.min.css">
<script src="js/vegas.min.js"></script>
<script> $(function(){ $('#ほげほげ').vegas({
slides:[
    { src: 'images/mainvisual01.jpg' },
    { src: 'images/mainvisual02.jpg' },
    { src: 'images/mainvisual03.jpg' } ],
    delay: 7000,
    timer: false,
    transitionDuration: 3000
    });
});
</script>

nice!(0) 
共通テーマ:moblog

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。