blog - みきまるしぇ

お菓子屋さん応援

WYSIWYGエディタ

 ワープロ感覚で書いた文章を、そのままウェブに載せられるようなものは、便利ですけれども、なかなか見つからないのです。高度な表現で検索すると専門家のためのエディタが見つかり、簡単すぎる言葉で検索すると、市販パッケージソフトが表示されたり。探すのにも、ひと苦労。

 わたしが以前に使っていたソフトにKompoZer(コンポーザー)というものがあったのですが、それはもう何年もずっと更新されておりません。操作が似ているもので同じMozilla系の流れを汲むSeamonkey(シーモンキー)というものがあって、それをたまに使ってきました。

 最近では、パソコンにインストールするタイプの作成支援ソフトだけでなく、オンラインで作業をしてそのままHTMLを作成して公開するというサービスが増えてきています。どちらにも利点がありますが、わたしは最近ふたつほど試してみました。

○ インストール型のソフト - BlueGriffon
 Mozilla系列のブラウザであるFirefoxをベースにしています。Mozilla系に慣れている人には、簡単に使いこなせます。
 公式サイトからダウンロードしますが(その段階では英語)、ダウンロードしたあとは、設定画面で日本語が使えるようになります。ちなみにMac OSですと、Preferenceという画面からAdvancedに進むと、以下のようなメニューで日本語が選べます。

bluegriffon_190426a.jpg

 このソフトでとても楽と思える点としましては、たとえば何年か前に書いて古い文法になっているHTMLファイルを手直ししたいときですね。このソフトでいったんそれを呼びだして、画面をすべてクリップボードにコピーし(MacならばCommand+A、WindowsならCTRL+Aを押した状態で、Aに置いていた指をCに変更します)、新規作成画面を出して、ペースト(MacならばCommand+V、WindowsならばCTRL+V)します。するとHTML5の文法で書き直してくれますので、それを新たに別名で保存すれば、その後はらくらく更新できます。

○ クラウド型(オンライン)のサービス - STUDIO

 こちらは、オンラインサービスです。複数の人でも作業できます。たとえば会社やグループでひとつのサイトを更新するときに、メンバーで同じものを触りながら更新できます。
 作業で作ったファイルを持ち帰って、別の場所で使うのではなく、その場所ですべて完結しています。無料版ですと、"場所名.studio.design"というURLで公開されます。有料版ですと、ご自分で用意したドメインを使うことができるようです。

 このサービスの何がすごいかといえば、自分できれいな画像を用意していなくても契約先のフォトサービスからきれいな画像をダウンロードしてきてページに組み込めたり、なんと、評判のモリサワフォントまで使えるのです。わたしもいま会員登録して少しずつ学んでいるところですが、たしかにモリサワが選べました。
studio_190426a.jpg

 モリサワフォントは、かわいいものも、上品なものもあり、これがサイトのデザインで使えるというのは、ほんとうに魅力的ですね。

≫ Read More

素材や役立つサービス   2019/04/26   mikimarche

決済サービス

 店頭やインターネット上で料金を回収する方法について、少しだけご紹介します。

 このサイトを昨夏に開始時には「最初からネット上で大々的な商売をはじめようと思わない方がよいです、まずは少しずつ」と書いておりましたが、最近の決済サービスは店頭でも使えるスマホ決済も含め、いろいろと種類も増えております。外国人旅行者や日本国内の若い世代を中心に、小銭を持ち歩かずにできるだけ電子的な支払で済ませたいと思う層も、厚くなっています。

 各社それぞれにサービスがありますが、わたしが自分で(消費者の立場として)使ったことがあるものを中心にご紹介します。

  • スクエア (Square) - 小規模なお店でも簡単に導入可能な店頭型カードリーダーを提供するほか、オンラインでの請求書発行とカード決済による料金回収がおこなえます。消費者としてオンライン決済で利用したことがあります。
  • PayPal  - こちらは消費者として買い物に利用したこともありますが、このサイト上での業務で支払を受ける際の候補として、アカウントを所持しています(本人確認ができている会員は、料金の受けとりができます)。​また、相手(お店や個人)がアカウントを所持していれば、金額を指定して送金できます。
  • ゼウス (ZEUS) - このサービスは以前から存在しています。オンラインショッピングでこのサイトと契約しているお店を通じ、消費者として利用したことがあります。
     
  • 楽天ペイ - こちらは言わずと知れた楽天市場の系列です。楽天以外でのオンラインショッピングでも、契約しているお店を通じ、楽天IDで決済できます。
  • SBペイメントサービス - こちらはソフトバンク系列です。大手の企業も採用している意味では、安定のサービスです。
  • Amazonペイ - Amazonのモバイル用アプリからそのまま使用できるため、手間いらず。対応する店舗が増えればかなり便利な存在だと思います。ただ、街頭で実店舗を構えるお店に関しては、まだそれほど普及していないようにも感じられますので、これからが楽しみですね。
     

≫ Read More

素材や役立つサービス   2019/01/13   mikimarche

用語解説 - favicon (ファビコン) -

 favicon (ファビコン)とは、なんでしょうか?

 おもにパソコンなど画面の大きな環境でインターネットを利用していると、ウェブサイトを見にいったときに履歴やアドレスバーにアイコンが付いていることが、わかる場合があります。スマホやタブレットなどの画面ですと、そのときは気づかないのですが、ブックマークや履歴、よく見にいくサイト一覧で、サイトが名前ではなくアイコンで表示されているのがわかると思います。

 たとえば
Facebookならば、濃い青の背景に白のF F icon 
ツイッターなら明るい青の背景に白い鳩Twitter_Social_96px.png
ですね。

(これらのファイル2点は、FacebookはWiki Commonsからのリンク表示、Twitterは正規のサイトからダウンロードしてきたものをそれぞれ16pxで表示しています)

 こういった仕組みで表示されるものを favicon (favorite icon お気に入りアイコンの略) と呼びます。日本語のカタカナでは、ファビコンです。これはもともとマイクロソフトのブラウザInternet Explorerからはじまったものだと聞いています。しばらくのあいだ、そして現在でも多くの人が、画像ファイルを作成する際に拡張子を .ico としたファイルを利用しています。

(この部分は無駄知識ですが、マイクロソフト系のOSでは拡張子が3文字で処理されてきましたので、.iconであればわかりやすかったところを最後のnをとって.icoとなっています。同様にウェブページの拡張子 ".html"も、マイクロソフト系の環境では.htmと長く表示されてきましたが、正式には最後にlがつくものでした)

 最近はで大きめファイルで作る事例も多いようなのですが、実はこれ、初期のころは律儀に16pixelの正方形で作られていました。その16pxというのは、インターネットでみなさんが日本語の文字をご覧になる場合は12ptというサイズで指定されているサイトが多いですが、これとほぼ同じです。日本語1文字分に画像を入れていたわけで、90年代末ころには、あまり高度な柄は入れられませんでした。

 その後、世の中のパソコンやさまざまな環境の変化で、大き目の正方形ファイルで作っても読める人が増えてきたため、いまでは96pxくらいで作る人もいれば、144pxなどの人もいます。大きく丁寧に作っても、読む人の環境に合わせて縮小表示がなされるので、大きなファイルのまま表示されるということではありません。ただ、大きくすれば相手のパケット代は増えますので、そのあたりの判断から、大きすぎないものを心がけると、よいのかもしれません。

 favicon用のファイルは伝統的には拡張子.icoのものでしたが、最近では、サイトのほうで独自に用意した.pngを使うと宣言してロボットにそれを読ませたり、アップル社のapple-touch-icon.pngを使用している例もあるようです。

 昔ながらの.icoファイルを用意するには、

  • それ専用が可能なソフトをダウンロードして作成——これは、「アイコン作成ができるソフト」などの検索をすれば無料のものも見つかります。わたしは多機能の画像ソフトGIMP(読みはギンプ)というものを使っています。
  • オンラインで作ってくれるサービスもあります。「ファビコン作成」などの検索をしましょう。
  • 自分が.ico以外の形式で持っているアイコンを.icoに変換してくれるサービスもあります。「ファビコン変換」などで検索してみましょう。

 ちなみに当サイトでは、普段の画像作りはAdobe社のPhotoshop Elementsで、数年前のバージョンを使っています。これで画像を作って、ファビコンにする場合は、最後にGIMPで.ico変換しています。

 

   

≫ Read More

ウェブサイト用語の基礎知識   2018/10/21   mikimarche

用語解説 - Wiki (ウィキ) -

 Wikipedia(ウィキペディア)などで知られるWikiですが、文章やデータの共有に使えるシステムです。多くのファイルを処理できます。

 WikiはMySQLなどのデータベース設定を必要とせず、phpが動くシステムであれば、あとは参加者と入力手段(ブラウザ)があれば成立する、とても有意義なデータベースです。当サイトの関連サイト「バウムの書」は、入力画面を一般に公開せず運営者がひとりで内容を更新していますが、仲間を募って少人数で限定編集といったことも、技術的にはもちろん可能です。

 利点としては、反応速度がよい、入力と管理が簡単、大勢で参加できる、などがあります。
 HTMLなどに慣れている人にとっては、書き方が独特なので、文法を覚えるのに少し頭の切り替えが必要です。逆に言えばビギナーでも参加しやすくなっています。Wikiで運用するサイトを見てまわっても、データ重視であまり派手さを好まない公開事例が多いためか、デザインにあまり多様性がありません。デザインや見た目を自己流で工夫するのには、やや技術と根気が必要になるかもしれません。

 Wikipediaでの「ウィキ」の項目によると、名前はハワイの言葉に由来しているそうです。

 

≫ Read More

ウェブサイト用語の基礎知識   2018/09/20   mikimarche

写真素材

 ウェブサイト構築に欠かせないのが、画像素材。無料でも、約束事を守って使用すればビジネス用のサイトにも使用できるものが多くあります。

 いくつかの写真サイトをご紹介します。

  • PIXTA - とても高品質です。購入商品が多め、無料は少なめ。

 運営が日本の会社なので掲載内容は日本人向き、日本語での検索しやすさも、問題ありません。画像以外にも、チラシ作成用テンプレートや、音楽素材なども。

  • 写真AC - わたしも写真提供の側で参加しています。無料が多めで、有料のものであってもサイズが小さければ無料でダウンロードできます。

 日本の会社で、写真提供も日本人が多く、スムーズに利用できます。ダウンロードした画像を自分で編集可能です。自分で編集した画像を第三者に渡すことなどは禁止ですが、クレジットやリンク表示も求めず、比較的ルールが緩やかなサービスです。

  • ぱくたそ - サイト運営は個人ですが、良質の素材が揃っています。利用は無料。

 ただ、ダウンロードした人が自由に編集することはできず、(2019年8月10日に編集: 画像の加工は可能でした)ダウンロード時と使用時には、利用条件の遵守を心がけましょう。

  • Pixabay - 外国のサイトですが、利用メニューは日本語に対応。

 多くの画像が揃っていて、利用条件もゆるやかですので編集もできます。会員登録すら不要。
 ただし、検索メニューでは日本語があまり通りません。英語で検索したほうがよい結果が出ますが、出てくる内容が日本人の好みかというと、必ずしもそうとはいえません。

 季節や用途別の分類や、登録された写真家ごとに写真を探すことができますが、飲食店や食べ物関係のサイトに利用できそうな画像がトップページからも探しやすいようになっている点で、当サイトをご覧のみなさまには、便利かと思います。

 ほかにもたくさんありますので、ぜひ「写真素材」などの単語で検索してみてください。
 

≫ Read More

素材や役立つサービス   2018/09/03   mikimarche

用語解説 - FTP -

 今日はFTPについて、書いてみます。もし簡単なホームページやブログのレンタル利用から一歩進んで、自分でレンタルサーバなどにソフトを設置する場合、必要になってくる知識です。

 FTPとは File Transfer Protocol の略で、ファイル転送のプロトコル(手順)という意味です。手持ちのファイルをレンタルサーバにアップロードしたり、あるいはパソコンにダウンロードするときに、FTPソフトを使うと簡単です。

 たとえばですが、荷物と倉庫を例にとります。

 裏の空き地に大きな倉庫を建てたとしましょう。ゆくゆくはレンタル倉庫として、利用者からダンボールが大量に送られてきます。
 倉庫を開始したばかりの段階では、自分と少人数のスタッフだけで、せっせと倉庫に入れたり、出したりすることができましたが、商売が繁盛し、たくさん送られてくるようになりました。そこで、長くからいるスタッフも、新しくやってくるスタッフも、誰でもすぐ対応できる荷ほどきと荷造りのルールを決めておくことになりました。これが決まり事(プロトコル)です。

 大きなダンボールが来たら中をどこまで開けるか、荷物をどういう順序に置くか、赤い箱と青い箱があったらどうするか、送り返してくれ(ダウンロードさせてくれ)と依頼があったら普通に詰めるか、あるいは圧縮して箱に入れるかを決めておこう——などなど、さまざまな約束事です。

 こうした約束事を理解しているFTPソフトというものを用意しておけば、パソコンとレンタルサーバ間で、ファイルを簡単に出し入れができるようになるというわけです。

 FTPソフト(FTPクライアントとも呼ばれます)には、有料のもの無料のもの、Mac用Windows用など、数多く存在しています。当サイトでは、この1年ほどFileZillaという無料ソフトを愛用しています。

≫ Read More

ウェブサイト用語の基礎知識   2018/08/15   mikimarche

用語解説 - SSL -

 よく耳にするSSL(保護された通信)とは、なんでしょうか。

 SSLは Secure Socket Layer の略で、データの送受信を暗号化しておこなう手順です。こう書くと「え、わかったような、わからないような?」ということになってしまいますが、少し書いてみましょう…

 ウェブページ(ブラウザでご覧になっているこうしたページ)を、見るだけであるなら、そのページが保護されていてもいなくても、あまり大きな影響はありません。ただそのページ上にある何らかのボタンをクリックする、コメントをする、メールを送るなどの動作のとき、その人とウェブページ運営者のあいだでデータのやりとりが生じます。そのやりとりにはその人のメールアドレス、ID、パスワードなど、大事なものが含まれている場合もあるでしょう。そんな個人的なデータを横から覗いて悪用する人がいないよう、安全に保つための仕組みがSSLです。

 安全に保つ仕組みというのは…

  • まずSSLを利用したい側が、しかるべき会社や組織に自分はこれこれこういう者で、怪しくありませんと申請します(←普通は有料ですが、わたしの場合は、レンタルサーバの会社が一括してはいっているSSLのサービスを利用していますので個人で申請していませんし、有料でもありません)。
  • 申請に問題がなければ、その会社または組織から、鍵をもらいます。鍵が手にはいったら、それを使ってSSLの証明書というものを作ることができます。
  • 見に来た人のブラウザが、SSL通信を開始する際には、そこにある証明書と公開鍵を使ってサーバに「見に来たよ」と信号を送ります。その証明書に偽造や不審点がなければ、サーバとブラウザ間で、暗号化された通信をがおこなわれます。やりとりが終了するまでデータは暗号化されます。途中で盗み見る人がいたとしても、データを解読することが難しいので安全、ということになります。

 利用で注意すべき点もあります。たとえばそのサイトがSSLの証明書を持っていてURLの冒頭が https:// になっており、SSLの通信がおこなわれているかのように見える場合でも、過信はできません。よくあるのは、サイトの内部で使われている画像が自サイト以外(保護されていない場所)から呼び出している場合。これは、セキュリティとしてはランクが下がります。家の出入口は完璧に警備会社と契約していても、裏側の窓を開けているようなことにも、なりかねません。作る側も、訪れる側も、SSLという言葉を過信せず、注意を怠らないことです。

≫ Read More

ウェブサイト用語の基礎知識   2018/08/09   mikimarche

用語解説 - CMS -

 ソフトウェアの仕組みや役割としては似ているSNSとCMSですが、利用者の目線で考えると、違いはどこにあるでしょうか。

 このウェブサイトを構築しているのは、CMSの一種でbaserCMSというソフトウェアです。CMSとは、コンテンツ管理システム (contents management system) の略ですが、実はソフトを設置して運営する側から考えると、仕組みとしてはけっこうSNSやブログと似ています。

 重なる部分も多くあるのですが、あくまでCMSはコンテンツ管理、つまり「手軽に見た目のよいウェブサイトを作成し、管理したい」という点に重きが置かれますので、SNSのように「参加してくれるメンバーの管理」が必要とはかぎりません。必要なのは書く側の人間(管理スタッフ)で、これは最低でもひとり登録されていれば動きます。また、CMSはブログ機能を利用せずに自分たちが伝えたいことだけ書くという選択肢もあるため、ブログのソフトとは「同じ部分もあるけれど、必ずしも同じではない」ということになります。

 CMSの例としては、このサイトが利用しているソフトbaserCMS(ベイサーシーエムエス)、本拠はアメリカですが日本語でもサポートが提供されているconcrete5(コンクリートファイブ)、会員制でログインした人にメニューを表示させることからSNSの性格を併せ持つXOOPS(ズープス)、それ以外にも多くあります。
 ブログソフトのWordPressは、かなり汎用性が高く機能拡張も可能なので、CMSとして分類されることもあります。

≫ Read More

ウェブサイト用語の基礎知識   2018/08/08   mikimarche

用語解説 - SNS -

 TwitterやFacebookなどはSNSと呼ばれますが、いったいなんでしょうか。

 SNSは、ソーシャルネットワーキングサービス(このまま覚えてしまうのがよいですが、無理に説明するならば、人と人のつながりに基づき、そのつながりを支援しつつ、相互に影響を与えながら輪を広げていくサービス)です。

 TwitterやFacebookのように、誰かが発信した情報に共感していることを伝えたり(たとえば「いいね」を押す)、コメントすることで、相手の友達とも知り合いになるなどして、人間関係が広がっていきます。
 SNSが盛んになる以前には、それぞれのサイトに掲示板が設置してあるなどで、あくまでそのサイトに興味がある人同士が出会うというスタイルでした。大きなサービスを利用する人が増えて以降は、趣味が似ている人や同郷の人が集まりやすくなりました。ネットでの友達づきあいがより大きめになり、影響力も加速、増大しましたが、すべての利用者がネットの広く公的な空間にものを書いているわけではなく、友達同士でのみ閲覧できる場所や組みを利用している人も多く存在します。

 コメントなどを幅広く受けつけ、活発に活用されているブログも、ある意味でSNSです。

≫ Read More

ウェブサイト用語の基礎知識   2018/08/08   mikimarche

用語解説 - php -

 html / css / MySQL につづき、php について書きます。

 PHPというのは、プログラミング言語のひとつで、Hypertext Preprocessorの略です。いまWebアプリケーションにとても多く使われています。この文章を書くのに使われているbaserCMSなど、多くのソフトがphpで書かれています。

 特徴としてはhtml形式の記述ファイル(拡張子は.php)に埋め込むことができて簡単に呼び出せること。たとえばメールフォーム、コメント投稿などです。ウェブページから呼び出したプログラムをサーバ側で動作させ、データベースと連携し、その出力結果としてhtml形式ファイルを生成してウェブ上に(拡張子は.php)表示してくれること…いや、こう書いてもよくわかりませんね。ええと、そうですね、表現を変えましょう。

ウェブページとphpの動作

  •  ガラスの箱に、注文したい商品名を書いて蓋をします。このガラスの箱が、画面に表示されているページ(html文法形式)です。
  •  蓋をすると、吸引力などの仕組みを利用して、紙がどこかへ吸い込まれていきます(phpプログラム)。
  •  吸い込まれた先で、商品手配のプログラムが動いて(プログラムの内容は見えません)、部屋のドアが開いて商品が現れ、最初のガラスの箱には明細と金額が送られてくるので、それを受けとってレジに行く。

 …こんなかんじでしょうか?

 では、ほかの言語で書かれたプログラムとどこが違うのかといいますと…いまウェブ用はほとんどがphpで書かれているので、あまり多くの事例とは、比較ができません。以前はウェブ上で動作するプログラムは広くcgiと呼ばれ、その場合はperlという言語で書かれていました。現在もperlで書かれたプログラムはあると思いますが、phpで書かれたアプリケーションの利用が増えています。
 ブラウザがあればネットにつながっていなくても楽しめるゲームはJavaScriptで書かれていることがほとんどですが、JavaScriptは画面に見えているファイルの中に、すべてのプログラムが収納されています。phpで書かれたものは、実際に動いているプログラム部分は利用者に見えず、原因(入力)と結果(出力)だけは、利用者が見られます。

 もう少しわかりやすい表現ができたら、追加編集します。

 

≫ Read More

ウェブサイト用語の基礎知識   2018/08/03   mikimarche