グラフィック薄氷大魔王[603]Webエディタ「Sparkle」を使ってみた/吉井 宏

投稿:  著者:  読了時間:6分(本文:約2,700文字)



●Adobe Museの後釜をどうする? 問題再燃

Apple純正のiWebが終了し、しかたなく移行したAdobe Museも終了。Museはしばらくの間は使い続けられるだろうけど、ホームページを今から一新するにはちょっと不安。

Adobe PortfolioやWixに移行するか、簡単なトップページのみ作ってブログやBehanceやSNSへのリンクだけ載せる形にしようか……。

トップページだけなら一時期使ってたこともあるDreamweaverでイケるかな。インストールしてみたら、この画面を見て一瞬で挫折。ムリ!w
http://www.yoshii.com/dgcr/dreamweaver_gamen.jpg





●Webエディタ「Sparkle」

「Sparkle」というのをMac App Storeで見つけた。
https://itunes.apple.com/jp/app/sparkle-visual-web-design/id863015334

公式サイト https://sparkleapp.com/

下記リンクによれば、『SparkleはAppleが開発を終了したiWebのユーザーを救済するために作成されたアプリ(rescuing iWeb refugees app)』だそう。僕にピッタリだ。
https://applech2.com/archives/42449701.html

無料版・機能制限版・プロ版と3段階あるが、機能的には無料版ではむずかしいだろうし「Sparkleで作成しました」の表示も入る。HTMLファイルを書き出すには最高位のプロ版を使うしかない。入れてみた。

画像をドラッグ&ドロップで挿入したり、テキストを打ち込んだり、リンクを張ったり、そのあたりはiWebやMuseなどと変わらない使い勝手。とても使いやすい。

仮のトップページを簡単に作成して各デバイスでプレビューしたら、スマホでの表示が崩れてておかしい? と思ったら、パソコンやスマホやタブレット(縦横それぞれ)の画面用に調整する機能もあるのね。

僕的に肝心な機能といえば「問い合わせフォーム」。昔のようにメールアドレスを不用意に公開できなくなってるので、フォームの有無は営業的に最重要なのだ。やってみたが、やはりむずかしい。

メールボタンさえうまく働かない……と思ったら、ちゃんとサーバーにアップしないと動かないのだった。手こずるようだったら、新しくメールアドレスを作って載せ、問い合わせ専用に使うかな。メールリンクはやめてSNSのメッセージに誘導してもいいし。

そうこうするうちに、公式サイトにフォームの説明を発見。やってみたらちゃんと動いた! ツールの「その他」の中にフォーム作成に必要なパーツが入ってるのに気づかなかったのだった。
https://sparkleapp.com/docs/forms.html

送信後に表示される「Thank youページ」が「.php」に変換されるのとか意味よくわからんけど、とりあえずちゃんと動いてる。

「問い合わせ内容のテキスト」「送信者のメールアドレス」を収集してsubmitボタンで送信、「Thank youページ」が表示され、ちゃんとメールで届くようにできた。
http://www.yoshii.com/dgcr/sparcle_form2.png

iWebやMuseでは問い合わせフォーム一式を、いきなり挿入できたのに比べればややこしいけど、日本語の説明なしでできたから相当簡単だと思う。これでようやくHP改造に取りかかれるぞ。

○追記。後で気づいたんだけど、Sparkleで作成したメール送信のリンクをカーソルオンしても、メールアドレスは表示されない。JavaScriptの処理になってる模様。iWebやMuseではアドレスは表示されてた。ってことは、フォームを使わなくてもメールアドレスを自動収集される危険はいくらか少なそう。

あと、Adobe Portfolioでもデフォルトで用意されてるContactのページにフォームがあるのね。試してみたら、ちゃんと送れた。

●HPリニューアル完成!

3〜4日もあればリニューアルできると思ったのに、Adobe Portfolioに手こずったり、そこに載せるためにあらかじめBehanceにアップしなきゃいけなかったり、新しく載せるものを集めてまとめたり、ブログの抜けてる項目を追加したり……。やることがどんどん拡大してしまい、3週間以上かかってようやく公開できた。

http://www.yoshii.com/

SparkleでトップページとBio/Contactの2ページのみ作り、他はAdobe PortfolioのWORKSに全部放り込んだ。

トップページは「スマホで使いやすいこと」を最優先。本来やりたかったのに、次第に要素が増えてグチャグチャになってたのを、振り出しに戻した。シンプルすぎてちょっと古く見えるのは追々なんとかするつもり。

WORKSの半数はBehanceからの読み込み。基本、英語表記(欧米人は漢字など異国の文字があるだけで引き返して見もしないという話を聞いたので)。E/J切り替えを作るのは面倒。でも、日本語を入れないとマズいとも思うので、最小限の説明を入れた。


【吉井 宏/イラストレーター】
http://www.yoshii.com/
http://yoshii-blog.blogspot.com/

ApplePencilが使えるiPad miniとAirの発表! miniはiPhoneやスマホとかぶるけど、モノとしては魅力的だなあ。ここまでペンを推すんだったら、MacBook Proの画面でApplePencilを使えるようにしてくれたっていいじゃんねw

しかし、こうなってくるとiPad Proの小さいほうがかわいそうだw 何か特別な強みってあったっけ? と思ったら、発表された2機種で使えるペンは旧ApplePencilだった!

○吉井宏デザインのスワロフスキー、新製品がいくつか出ました。

・見ざる聞かざる言わざるの「三猿」
https://bit.ly/2UF4LzF

・フクロウHOOT、踊りたい気分! 「HOOT LET’S DANCE」
https://bit.ly/2Dc6p4Z

・恋に落ちたフクロウHOOTたち「HOOT WE ARE IN LOVE」
https://bit.ly/2BlyBC4

○MyMiniFactory
3Dプリンタ用のデータを売ってます。
https://www.myminifactory.com/users/Yoshii

【吉井 宏/イラストレーター】
http://www.yoshii.com
http://yoshii-blog.blogspot.com/