ホームページの作り方2

最近のホームページの作り方はどんどん変わってきています。

「最近の?」違和感がありますか?
そう感じたとすれば、上の1行がドッグイヤーと言われるITの世界の話を一般の世界の時間感覚で述べたからです。

一般の世界では10年15年は「最近」ですよね、
ついこの間甥が生まれたと聞いたばっかりなのに、この間会ったら中学生になっていた…
よくあるお話かと。

なので、「最近の」と書いたのですが、この「最近」という短い間に多くの変化がありました。

私がホームページを作り始めたころはHTML3の時代でした。
このころの作り方は「テーブルコーディング」と呼ばれます。
それ以前の白い地に黒い文字がただ横に並んでいるだけのホームページから、
「レイアウト」というものを意識したホームページに変わりました。
一つのページを表に見立て、その表の中に文字や画像を配置します。
EXCELでポスターを作るようなものですかね。
このころのサイトは広い画面で見ると左に寄っている事が多かったりします。
まだパソコンの画面解像度が低く、横幅が800ドットのノートPCでも横スクロールが
起きないようにするためでした。

 

数年してHTML4の時代になります。
スタイルシートやJavascirptを使ったページ作りが主流になり、
テーブルコーディングのサイトは「古い」と言われるようになりました。
これはHTMLは構造を作り、見た目はスタイルシートに任せるというHTML4の考え方に従ったものです。
たとえば、文字の色。
HTML3の時代はフォントの指定をするHTMLタグを使いましたが、HTML4の時代ではスタイルシートで
フォントや色を指定します。
同じくレイアウトもスタイルシートで構築するようになりました。
さらにマウスがリンク画像の上に載ると薄くなるといった初歩的な動的要素もスタイルシートが行っています。

JavascirptもHTML3の時代はちょっとしたお遊びでマウスカーソルを追いかけるものを出したり、
前述のマウスがリンク画像の上に載ると画像を「切り替える」といった動的な要素の実装を担当していました。
HTML4の時代ではJQuaryというJavascirpt用ライブラリの実用化でスタイルシートやコンテンツ自体の
動的変更が出来るようになり、表現の幅やフォーム等の利便性向上に貢献しています。

そしてパソコンのモニタサイズと画面解像度の拡大に対応して、
ホームページを作る時の横幅も時代が進むに従って、大きくなって行きました。
大きくなったことで、サイドメニューを設けたり、ページを縦に分割したサイドカラムが
よく使われるようになりました。

そして現代。
今はHTML5の時代です。
ビューポートやメディアクエリを駆使してマルチデバイスへの対応が行われています。
以前はホームページと言えば、パソコンで見るものでした。
i-mode用HTMLなどを使った携帯サイトなんてものもありましたが、それらは携帯向けサービスがあったり
屋外でサイトを見てもらう事がビジネスに繋がる企業などが用意する例外的な存在でした。
ところが、スマートフォンの普及で話が一変します。
画面サイズが拡大一辺倒だったのが、突然大昔のパソコンより狭い画面でホームページを見る人が
多数現れたのです。
しかも、タブレットと言う初期のノートパソコンくらいの画面解像度の機器も登場します。
この結果、「どんな大きさの画面の機器で見ても見やすいサイト」を作る事(マルチデバイス対応)が
現在の流れになっています。

ちなみに大きさと言っても話は単純ではありません。
解像度と見た目のサイズの問題があります。
スマートフォンでは実際の液晶の解像度と表示上の解像度が違ったりします。
スマホの場合見た目は小さくても、実際は高解像度の液晶なので、ビューポートを設定せずに
そのまま出すと字が小さくなって読めません。
そのため実際の液晶の解像度と表示上の解像度の違いなどを適切に処理するために
ビューポートと呼ばれるものを指定するようになりました。
また、画面解像度に合わせてレイアウトを調整するための仕組みとしてメディアクエリも
使われています。
そうやってスマートフォンでも見やすいように調整しないと今時のサイトとしては落第です。

なにしろ、2017年の今ではスマートフォンやタブレットでサイトを見る人のほうが多いという
統計が出ていますから。

さて、そんな時代の流れはホームページだけでなく、ホームページを探す検索サイトにも
影響を与えています。

 

人気ブログランキングに参加中なのでぽちっとお願いします!

無料のPHPプログラムを公開しました

最近、考えているんですが
ワードプレスのでの更新も良いのですが、
やっぱり一般の方にとっては難しいですし、
こちらの管理も面倒なので、
自分たちの会社で使いやすい簡易のCMSを作れないかと
考えております。

というのも、ホームページの構成というのは、
そんなに大きく変わるものではないので、
基本似ています。

ただし、それを一から作るとなると毎回大変なので、
できればテンプレート化して必要な部分だけを変更していく
構成に近づけていきたいと考えています。

そうしていくとデザインを規定するスタイルシートなんかも
どんどん使いやすいように変更していって、非常に
効率よくホームページができるようになるかと思います。

ホームページ制作会社として頑張っているあきばれさんも
独自のCMSを使ってホームページの制作をしているようなので、
うちの会社もそれを参考に自分たちで使いやすいCMSを
作りたいな~と考えております。

もしこれをご覧いただいているウェブ業者さんなどが
おられたら一緒にプロジェクトを進めるなど考えられたらと
思います。

もちろん、スマートフォン対応、レスポンシブデザインに対応可能なシステムです。

ただ、私の頭の中では、最初はかなりシンプルで機能が
少ないものを考えていて、大規模なものは考えていません。

大規模なものを使うのであれば、別にワードプレスでも
全然良い気がします。

ということでまだアイデアの段階ですが、一応
ここで話をしておきます。

それと、今回新しく無料のPHPプログラムを公開しました。

ご挨拶など、ホームページのほんの一部を変更したい
時に使うためのPHPツールになります。

トップページ用メッセージ更新PHP topmes.d
https://www.dao.jp/s-tools/index.html

ユーザーから依頼があって作ったのですが、
せっかくなので、公開して必要な方に使って
もらえたらと考えております。

これを使うと、ホームページのある一箇所だけ変更したいところに設置しておけば、
管理画面から、文章を変更できます。

よく、ぐるなびなんかで、飲食店向けにクーポンやら、セールなどのように
緊急で告知したい時に使うと便利かなと思います。

 

人気ブログランキングに参加中なのでぽちっとお願いします!

【悲報】アドビの「Flash」終了のお知らせ

一世を風靡したFlashがついに終焉の時を迎えようしています。

アドビは2017年7月25日(米国時間)、「Flash Player」の配布とアップデートを2020年に終えることを発表しました。

ネットを見ても、脆弱性だらけで、ネットを危険にするFLASHの終了を歓迎するコメントがメインになっています。

Flashは便利だったんですけどね…

Flashは、いわゆるベクター(線画)形式のデータを扱うことができたので、ファイルの容量が小さいもので済みました。

そして、自由自在に動かくことができましたし、音声やインタラクティブなボタンなども配置できたので、非常にリッチな表現をすることが比較的容易にできました。

以上のようなこともあり、一次は格好いいサイトはほぼFlashで作られているような状況でした。

しかし、iPhone登場の際に、スティーブジョブスが、

セキュリティが非常に脆弱なうえにメモリーを大量に消費し、指先での操作には向いておらず、しかもアドビは仕様をオープンにしていないと指摘して、

iphoneに搭載しないと明言しました。

それに対して、アドビは反論して、AndroidではFlashが使える時期もありましたが、そのAndroidもFlashの搭載を止め、次第にFLASHは時代遅れの技術となって利用されなくなっていました。

それでもなお、PC上のブラウザゲームや、ワードプレスのファイルアップロードなんかでは使われていたりするのですが、いよいよFlashが終了することが完全に決まってしまいました。

ホームページを制作するものとしては、生き残って欲しい気もしていたのですが、非常に残念な気持ちです。

おそらくHTML5やCSS3の技術に取って代わられていくのでしょうね。

アドビからは、Edge AnimateなんていうHTML5とCSS3を使ったアニメーションツールも出てきているので、そちらに移行する人たちも多いかも知れません。

しかし20年以上、この業界に身を置くものとしてはなんか寂しい気分になってしまいます。

サポートしているホームページにFlashを使っているところもあるので、これらのお客様にFlashから代わりのものに移るようにおすすめしなければなりません。

最近は、Jqueryあたりでスライドショーをしているところが圧倒的に多いかなという感じです。

 

Flashの完全終了が、ちょっとショックだったのでブログに書きました。

 

最近は、Flashを使わないホームページばかり作っております。(^^;)

 

人気ブログランキングに参加中なのでぽちっとお願いします!

とりあえず2曲目アップしました。

アラフィフになって、これから仕事以外にも趣味を見つけようということで、へたすると30年ぶりくらいでまた作曲をはじめました。

そんなに時間がたくさんあるわけでもないので、難しいソフトだと打ち込みや、調整が大変なんですが、この前に買ったMusic Maker Pro Premium Editionであれば、

比較的簡単に曲が作れるので面白くて2曲目を作りました。

たんにYouTubeにアップしただけだと、全然誰も見てくれないので恥をしのんでブログにもアップすることにしました。

それと、やっぱり歌がないとダメだな~と思い、CeVIO さとうささら ソングというソフトを購入しました。

ちょっと試しにいじった段階ですが、あまり調整しなくても良い感じで歌をうたってくれているので、これを使った次回は、歌入りの曲に取りかかりたいと思います。

今日は簡単にこれくらいで…

 

 

本業は、ホームページ制作をしております。

 

人気ブログランキングに参加中なのでぽちっとお願いします!

ホームページの作り方、その1

ホームページの作り方というテーマで少し語っていきたいと思います。

昔は、会社のことを宣伝しようと思えば、4マス広告と呼ばれるテレビ、ラジオ、新聞、雑誌に大きな広告費用を払って宣伝をしてもらうすか方法はありません。

それ以外にあると言えば、ちらしを作ってポスティングをしたり、友達に紹介してもらったりという今考えればとてもアナログな方法を取るしかなかったわけです。

ところ、インターネットが登場して、プロバイダと契約すると無料のホームページの領域が与えられてそこで自分のビジネスの紹介ができる…

 

中小企業の社長たちにとっては、このコストパフォーマンスの高さ、半端なかったわけです。

それで、一生懸命ホームページの作り方を覚えたわけですね。

私もAppleのマッキントッシュを使って、ちらしのデザインやパンフレットのデザインなんかを作っておりましたが、いてもたってもいられなくなり、ホームページの制作に自分のビジネスの舵を取ったわけです。

 

そして、アドビのフォトショップで画像を作り、本を読みながらHTMLのタグ(文字)をエディタに打ち込んで、画像を呼び出し、それを.htmlという拡張子に保存すれば簡単なホームページの出来上がり。

FTPサーバーに接続して、ファイルを転送します。

それから、プロバイダーから与えられたホームページのアドレスを、ネットスケープ・ナビゲーターのアドレス欄に打ち込み、エンターキーを押すとホームページが、上からパラパラと表示されました。

この時の感動が今も思い出されます。

今考えれば、非常に稚拙で格好悪いホームページでしたが、それが私の人生を変えてくれました。

2000年代初頭に知り合った、インターネット専門の蕎麦屋の社長は、今不動産を何棟も運用する事業家になりました。

これまたインターネットで北海道の特産物を売っていた、関西から来た社長は、今や東証一部上場の会社経営者になっています。

みんな、パソコンで、htmlを打ち込んでいた人たちです。

それでは、今もうそんな可能性が無いかと言えば、確かに先行者利益は受けづらくなっています。

今後は、ただホームページが作れれば良いだけではなく、SNS時代にどんどん拡散されるような、話題性のあるコンテンツをいかに作れるか? アイデアも必要だと思います。

 

しかし、お金をかけなくてもアイデアと情熱と勉強と努力で広がっていく世界が、インターネットの世界ではまだたくさんあります。

ですから、まずは、自分でhtmlを覚えるところからはじめてみてはいかがでしょうか?

これから子どもたちは、学校でホームページの作り方を学ぶ時代がやってきます。

私がサポートしているある中学校では、学校祭のホームページは生徒たちが作っています。

 

AUかなんかの歌にありますよね!

 

失敗も思い出 はじめよう やってみよう 誰でも最初は 初心者なんだから やったことないことも やってみよう

 

ぜひ、失敗を恐れずにやってみてください!

ホームページ制作業者をお探しならディーエーオーへ

 

人気ブログランキングに参加中なのでぽちっとお願いします!

人工知能が勝手にホームページを作ってくれる?

ビートラックスという会社のCEOが発信するブログを見て、いろいろと考えさせられるところがありました。

人工知能が勝手にホームページを作ってくれる“The Grid”というサービスがあるそうです。

http://blog.btrax.com/jp/2016/06/05/thegrid/

なんでもユーザーが、文字や写真などの素材を管理画面からアップロードして、あとは色の設定をすると人工知能が素材を元にホームページを作ってくれるらしい。

早速、ホームページを観に行ってみたのですが、真っ白な画面が表示されているだけで実際どのように動いているのかは分かりませんでした。

https://thegrid.io/

別のURLを見たら、上記のような画面が立ち上がってきました。

しかし、これだけ人工知能が騒がれているのだから、そのようなサービスが出てきても仕方ないだろうなと思います。

あとは、人工知能が作ってくれるホームページがどのような訴求力を持っているかということだと思います。

実際どのようなものが出来上がっているのかとても気になるところです。

私が感じるのは、例えば税理士さんという仕事がありますが、最近は帳簿をつける業務はソフトやクラウドのサービスで、仕分けなどはかなりオートメーション化が進んでいますが、税理士という仕事が無くなっているわけではありません。

税理士は、仕分けという比較的シンプルな仕事から開放されて、それよりは経理データから経営的な判断をどのようにくだすべきか?

今後どのような方向に業務を進めていけばよいかなどのコンサルティングサービスに業務が変化していっています。

さらには、あのDELLでさえもパソコンの販売から、コンサルティングに軸を移しつつあります。

そのように考えていくと、うちの会社もホームページ制作という業務から、マーケティングやコンサルティングの業務に移行していかないといけないのかなと考えたりもしています。

私の会社でも、HTMLと、Javascriptあるいは、PHPでの開発から、RailsやSwiftというもう少しモダンな開発環境に少しづつ移行しながら、ホームページ制作業務から業務を移行していきたいと考えています。

ここ半年くらい忙殺されている間に、世界が変わってしまった感があるので、ネジをまいてもう少し新しいものを取り入れていきたいと考えております。

 

最近は、ワードプレスなどを用いたホームページを多数作っております。

ホームページ制作はディーエーオーへ

 

人気ブログランキングに参加中なのでぽちっとお願いします!

Twitterに迫る勢いの新型SNS

最近、気になっていたのですが、忙しくて手がつけられなかった新型SNS、マストドンを調べてみようと思い、日本最大のインスタンスmstdn.jpに参加してみました。

上記は、最近の週刊アスキーの特別編集の表紙です。

のんの表紙と、マストドンの小冊子と、人工知能最前線とキッズプログラミングという題目に惹かれて購入しました。

そして早速マストドンの特集を読み、なんかマストドンって面白そう!てなことで参加してみることにしました。

 

こんな風に書かれると気になって仕方ないよね。

ネット界2017年最重要キーワードなのだそう…

アスキーも煽るね~~(^^)

LINUXの知識があれば、自分でインスタンス(自分が運営者になる独立したマストドン)を立ち上げることもできるそうだけど、まずは慣れてみようということで、日本最大のインスタンスに参加しました。

自分も何か趣味のインスタンスを立ち上げたいな~と考えているところです。

恐らく企業なんかでも自分たちの企業のマストドンを構築するなんていうところがどんどんと出てくると思います。

そうすると、運営が大変だから専門の業者に外部委託しようという流れも出てくるだろうと思うし、うちの会社みたいなところがマストドン構築サービスなんていうのを出すことになるかも知れません。

あまり話をビジネスに持っていくと、嫌われそうな気もするのでここらへんにして、まずは遊んでみたいと思います。

まあ、雰囲気的には自分で運営できるツイッターみたいな感じですね。

こちら登録画面です。

https://mstdn.jp/

気になる方は登録してみて下さい。

私はdaoistで登録しておりますので、お友達になりたい方はフォローお願いします。

 

人気ブログランキングに参加中なのでぽちっとお願いします!

人工知能の未来

朝のメールをチェックしていたら、日経BPから人工知能に関する書籍が紹介されていたので、つらつらと読んでいたら、価格を見てビックリしました。

なんと、45万円…

桁間違っていないよね??

と心配になりました。

http://coin.nikkeibp.co.jp/coin/nc/ai17/

※一部のご案内で本体価格の記載に誤りがありました。
本体価格は上記の通りです。

と書いてあるところを見ると、案内している人もそんなに高いはずがないと間違っちゃったんでしょうねw。

目次を見ていると、内容が面白そうで読んでみたくはなるのですが、45万は手が出ないですね。

■ 第5章 人工知能に関連する周辺技術

5-1.量子コンピュータ(ゲート方式)
5-2.量子コンピュータ(アニーリング方式)
5-3.ニューロモーフィックチップ(脳型コンピュータチップ)
5-4.HPC
5-5.GPU
5-6.人々を理解する技術
5-7.スマートセンサー
5-8.トラストワースネス
5-9.人間拡張
5-10.VR・AR・MR・HMD

こんな感じです。

大手企業のAI部門の人とかは購入するのかも知れませんね…

ネタ的に紹介しましたが、最近購入した音楽ソフトもそうなんですが、
人間が作業すると膨大な時間がかかるものを、非常に早い時間でやってくれてしまうので、

人間のやることが本当に無くなってしまうんじゃないかと危惧を覚えます。

 

しかし、個別に今後作られていきそうなものを目次だけですが、見ているとなんか夢が広がります。

人工知能ヤバイですね!!

 

 

人気ブログランキングに参加中なのでぽちっとお願いします!

これは優れものかも? Music Maker Premium

娘が、イラストを描くのが大好きで、液晶タブレットも結構な値段がするので、それなら新しいiPad Proならアップルペンシルを購入すれば、イラストも描けるということで購入しました。

iPad Proが自宅で届いたので、私自身もいじりたくて、イラストはあまり描けないので、GarageBandをいじっていたら、ループ音源を組み合わせていけば、音楽を作れることが分かり、これならあまり時間をかけなくても作曲が出来るなと思いGarageBandで作曲を試みました。

しかし、すぐに壁にぶちあたり、GarageBandは曲のキーとかピッチは簡単に変えられますが、ループ音源のコードを変える機能が見当たらず、KindleでGarageBandの書籍も買ったのですが、どうもMac版のGarageBandとiPadのGarageBandではかなり操作が違いすぐに限界を感じたので、別の音楽ソフトを探すことにしました。

以前に、SonyのACID Music Studioというのを購入したので、操作が難解なのと、コードの変更箇所が今いち分かりづらかったので、ACIDには戻りたくないな~と考えていたところ、ソースネクストで新しい作曲のソフトが出たということが分かり早速それを購入することにしました。

そのソフトの名は、Music Maker Premium Edition。

MAGIXというドイツのソフトウェアメーカーが作っているのですが、MAGIXのソフトは、動画作成ソフトも個人的に使っていて、結構いいソフトだなと考えていたので、MAGIXを信頼してソフトを購入いたしました。

実際に使ってみると、MAGIXの動画ソフトと操作も似ていて、非常に直感的に操作をすることができたのでとても気に入りました。

非常に豊富なループ音源が用意されていて、それをタイムラインに乗せながら、コードを設定していくという非常に分かりやすい作り方で、これなら自分でも作曲できるわ!と思い、実際に1時間かからずに曲のAメロからサビまでを作りました。

今回は、ロックっぽい曲を作ろうと思い、ロックのライブラリから演奏パーツを選び曲を作りました。

ちょっと古い感じの曲ですが、分数コード的なものも使っていて、自分では結構気に入っています。

あとは、これにボカロで歌と歌詞を乗せれば、さらに良くなるな~と考えています。

本当は、ギター女子に憧れる娘のために作ったのですが、娘に聞かせようとしたら、あっさり拒否されました。(T_T)

そんな無碍に扱わなくてもいいでしょ???

ということで、こっちにあげておきます。

ソフトはこちらで購入できます。
http://www.sourcenext.com/product/pc/sny/pc_sny_001700/?i=gt_card

人気ブログランキングに参加中なのでぽちっとお願いします!

インスタグラムの最新画像をリストで表示したい

お客さんから、インスタグラムの最新の画像を、自動でリストにしてホームページに表示してほしいという依頼がありました。

最近、朝の情報番組を見ていても、インスタ映えする写真を撮影したいとか、インスタグラムに写真をアップすることを前提にお店を選んでいるなんていう話題が結構出てきます。

私の場合は、最近仕事ばっかりしていて、なかなか外で遊ぶ機会が少ないので、インスタグラムはあんまりやっていないというか、Facebookをチェックするのも大変なんですが、世の中はやっぱりインスタグラムですね。

それで、インスタグラムの写真一覧を作る方法を調べたところ、インスタグラムのAPIを使う、もしくは、SnapWidgetというウェブのサービスを使うのがメジャーなようです。

ただ、インスタグラムのAPIは最近、審査が厳しくなっているそうで、通常はデベロッパー登録して、最初のSandboxモードで運用するケースが多いそうです。

Sandboxモードでの制限が、

  • 最新20件の自分の写真のデータ(URLやキャプションなど)が取得可能
  • APIの呼び出しは1時間に500回まで
  • 登録したユーザー(Sandbox Users)の最新20件の写真データの取得が可能

らしいです。

まあ、中小企業のホームページで、自分のアカウントの写真を紹介するだけなら、Sandboxモードで良いかも知れません。

インスタグラムAPIで画像の一覧を作る説明をするのは、ちょっと大変なので、SnapWidgetを使って、画像の一覧を作る方法を紹介します。

https://snapwidget.com/

まず、GET STERTED TODAYのボタンを押して、アカウントを生成します。

Facebookのアカウントがあると取りやすいです。

CREATE A NEW WIDGETボタンを押します。

あとはサムネイルのサイズなど項目を設定して、GET WIDGETを押せばそれで貼り付けるタグが生成されます。

スマートフォンなどの表示にも対応させたい場合は、ResponsiveをYesにすればそれでOKです。

非常に簡単ですね。

こんなに簡単にできるとは思っていませんでした。

せっかくなんで、今度は、インスタグラムのAPIにチャレンジしたいと思います。