カテゴリ: Macaw

このエントリーをはてなブックマークに追加 Share on Tumblr Clip to Evernote 編集




◆ スクリプト300本超が使い放題!マガジンをおすすめします。
有料スクリプトはnoteからご購入ください(要ログイン)。
ノート(単品)かマガジン(1000円)が選べますが、すべてのスクリプトが手に入るマガジンをおすすめしています。
GOROLIB DESIGNスクリプト一覧と一括ダウンロード


◆ はじめての方はこちらから
新しいスクリプトはわかったわ。じゃあどうしたらいいの?という方へ


◆ 仕事がなくなっちゃう(笑)スクリプトはオーダーメイドが最強です
いつもいつも苦労しているアノ作業。一瞬で終わると人生観かわります(ホントです^ ^)






■メニューを端から端まで見てみるのもアリですな
^ ^

 おつかれさまです。@gorolibです。

 数週間前からMacawで複数ページのコーディングをする方法を探していました。

 Macawとは米国製のWebオーサリングツールであり、クラウドファンドで鳴り物入りで開発されたアプリです。ソースがきれいで使いやすいので重宝しているのです。

 私は本職DTPなので(元システム屋なのにWebはそれほど…というww)単ページのWebコーディングで使っていましたが、今回複数ページのご注文をいただきましたので、Macawによる複数ページの作成方法を探しておりました。

 ただこのMacaw、知名度は推して知るべしでして日本語のページはほとんどない。全ページ英語のマニュアルを購入したりしたのですが、ページを開いて2秒で寝てしまうのでほとんど読めてない(笑)。

 先ほど意を決して「よっしゃ、そんならメニューの端から端まで見てやろう」とFileというメニューをクリックしたところ、

 1番目…New Project
 2番目…New Page

とありました。
38
46
56

 まさかの2秒で見つかったのです!(爆)

 なるほど、いつも作っている単ページは「1ページしかないNew Project」であり、複数ページの場合は、Project内にNew Pageを追加していくのね。

 というわけで、これからの人工知能社会は「ググってもわからない仕事」がどんどん増えてきます。そのうちAIがつくったアプリのマニュアルを人間様がつくる(!)という仕事もできるかもしれませんな。

 Macawの知識はあまり必要ないかもしれませんが、メニューを端から端まで見てみるという調査方法もアリだな、と思った次第です。

 お役に立てれば幸いです!ではでは出羽の海。
お役に立ちましたらツイートお願いします!




このサイトで配布しているイラストレーターのアクションやスクリプトファイルを無断で転載・配布・販売することを固く禁じます。ご紹介いただける際は必ずURLリンクにてお願いいたします。 このサイトで配布しているイラストレーターのアクションやスクリプトファイルの使用で、ファイルの破損やアプリケーションに不具合が発生した場合でも、責任は負いかねますのでご承知おきくださいませ。自己責任での使用をお願いいたします。

© 2017 GOROLIB DESIGN
Released under the MIT license.





このエントリーをはてなブックマークに追加 Share on Tumblr Clip to Evernote 編集




◆ スクリプト300本超が使い放題!マガジンをおすすめします。
有料スクリプトはnoteからご購入ください(要ログイン)。
ノート(単品)かマガジン(1000円)が選べますが、すべてのスクリプトが手に入るマガジンをおすすめしています。
GOROLIB DESIGNスクリプト一覧と一括ダウンロード


◆ はじめての方はこちらから
新しいスクリプトはわかったわ。じゃあどうしたらいいの?という方へ


◆ 仕事がなくなっちゃう(笑)スクリプトはオーダーメイドが最強です
いつもいつも苦労しているアノ作業。一瞬で終わると人生観かわります(ホントです^ ^)




21
■Macawで検索履歴あり!まさか同士の方がいらっしゃるとは…涙)   

おつかれさまです。@gorolibです。

先日、ブログのアクセス履歴を見ていましたら、Macawで検索されている方がおりました。

ムムっ!まさかの同士の方!おつかれさまです。

Macawとはアウトプットソースが超きれいな、外国製のWebオーサリングツールです。

オーサリングツールとは…まぁベタに言えば「ホームページビルダー」です。

AdobeだとMuseとかになるんですかね。ただしオーサリングツールてのは、IT業界でいうところの(昔ね)CASEツールと呼ばれるノンプログラミングツールで間違いないです。

CASEツールは軒並みソースがぐしゃぐしゃになる子なのですが、このMacawは違う。


ソースのきれいさ、パネェっす。


いいんですよぉMacaw。なぜ流行らないのか…。プロモーションが足りないんですかね。



■ほとんど問題なく納品しています


正直に申し上げますと、もうMacawで3件納品しています。

もちろんクライアント様には「Webオーサリングツールを使っています」と正直に申し上げた上での案件です。その代わりお安くご提供しています。

さほど動かない、凝った動き不要、コード追加あんまりしないのなら、Macawで十分すぎるほど十分です。その分お安くすればいいんですからね。安くていいものを提供するのは商売の基本です!

これぞWin-Win!

で、いちおうざっくりしたやり方だけ書いておきます。あんまり日本語の情報がないもので…。


■準備


(1)素材を作る
→これはまぁ従来どおり。イラストレーターかフォトショップですかね。画面サイズをアートボードサイズで作り、ピクセル単位でレイアウトしてデザインカンプとし、校了をいただく。

(2)素材を切り出す
→(1)からのスライスです。これもそれぞれのやり方はお詳しいサイトがたくさんありますので、そちらにおまかせします。


■Macawでレイアウトする


(3)初期設定
→最初とまどいますが、私のやり方はこれ。

まず、特に指定がない場合は、ブレイクポイントは1200pxにしています。もうあまり考えないことにしています。グリッドデザインもちょうどいいので…。
 
07

(4)素材の読み込み
LIBRARY > IMPORTから素材(2)を読み込みます。
29

23


(5)素材のレイアウト
LIBRARYからドラッグ&ドロップして、レイアウトします。
34


超カンタンです。


ただ気をつけたいのは、デフォルトでフローレイアウト(青い表示)になっていること。便利に使えば便利なんでしょうけど、あとあと面倒ください。

全部固定値にしちゃいます(茶色い表示)Absolute Positioning。ついでにx軸の指定もpxにします。
48

このpx値はイラストレーターでの座標を見ながら、そのとおりに入力します。そりゃそうですわ。そのためにピクセルずれがないよう、びちーっとデザインカンプ作ったんですから。


なんだかね、このデザインカンプからスライス→Webコーディングという「2回おんなじことしてるんじゃね感」が毎回いやなんですけど、なんとかならないんですかねぇ。


あと、%というのは、ブレイクポイントに対しての%値であり、こちらも便利に使えば便利なんでしょうけど、あとあと面倒ください^ ^

テキストなんかも直感でどんどんいけます。


(6)最後にグループ化してフローレイアウトにする。
で、最後の最後に全てのオブジェクトをグループ化して、そのグループをフローレイアウトにします。
06

20


そうすると、ブラウザのウィンドウを小さくしていくとき、固定幅までは余白が均等に減っていき、固定幅より小さくなると、右側がけずれていくタイプのフローレイアウトができます。

また、全体をグループ化したものをpxにしておきます。
54

 
29
43




あと、いろいろありそうなんですけど…。私の場合これだけで十分です(笑)

ということで同士の方がおられるようなので、Macawについてはちょびちょび更新してまいります!

お役に立てれば幸いです!

ではでは出羽の海。








お役に立ちましたらツイートお願いします!




このサイトで配布しているイラストレーターのアクションやスクリプトファイルを無断で転載・配布・販売することを固く禁じます。ご紹介いただける際は必ずURLリンクにてお願いいたします。 このサイトで配布しているイラストレーターのアクションやスクリプトファイルの使用で、ファイルの破損やアプリケーションに不具合が発生した場合でも、責任は負いかねますのでご承知おきくださいませ。自己責任での使用をお願いいたします。

© 2017 GOROLIB DESIGN
Released under the MIT license.





このエントリーをはてなブックマークに追加 Share on Tumblr Clip to Evernote 編集




◆ スクリプト300本超が使い放題!マガジンをおすすめします。
有料スクリプトはnoteからご購入ください(要ログイン)。
ノート(単品)かマガジン(1000円)が選べますが、すべてのスクリプトが手に入るマガジンをおすすめしています。
GOROLIB DESIGNスクリプト一覧と一括ダウンロード


◆ はじめての方はこちらから
新しいスクリプトはわかったわ。じゃあどうしたらいいの?という方へ


◆ 仕事がなくなっちゃう(笑)スクリプトはオーダーメイドが最強です
いつもいつも苦労しているアノ作業。一瞬で終わると人生観かわります(ホントです^ ^)




■むかしで言えば「ホームページビルダー」です(笑)

おつかれさまです。GOROLIB DESIGNです。

唐突ですがお願いしたいです。超本気の和製Webオーサリングツール。

Webオーサリングツールとは昔風に言えば「ホームページビルダー」です。


わあ、ネーミングが古い感じ^ ^;


言い回しを変えるとカッコよくなっちゃうパターンです。
 

先日Webデザイン&コーディングを無事納品しましたが、MacawというWebオーサリングツールは、作成後のソースが超絶にきれいでした。

そりゃメンテナンス性がきちっと考慮され、完璧に因数分解された手組みのコーディングにはかないませんが、それでも

はっきり言いましょう。いいですか?(いつも言ってますけどね…)

デザイナーはコーディングの知識なんか取得したくないのです。

いえ、語弊があるといけませんので補足。知識はあったほうがもちろんいいです。

でもコーディングの知識がなくても、ひとりでHTML+CSS+画像を納品したいんです。

それも「やっぱりデザイナー風情がツール使ったソースはきたねえなあ」なんて言われないような、

きれーなソースを、手組みすることなく納品したいのです。


■未来のツールMacaw


そこいくと、未来のWebオーサリングツールと呼ばれるMacawは、たぶん10歩くらい先に行ってます。操作はイラストレーターと変わらず、出力ソースは超絶きれいです。今回はこれで実際に納品しました!

参考:ホント?画像編集の感覚でWebデザインできると噂の『Macaw』を試す
http://websae.net/macaw-web-design-tool-20140603/


(引用)「コードを書くな。描け!」がキャッチフレーズ(意訳 by me)の『Macaw』は、「こりゃ、次世代のWebデザインツールに違いない!」と、まだ発売してないにもかかわらず、わずか72時間で75,000ドルもの出資額を集めたアプリです。


そう、みんな望んでるんです。ただし少々バグがあるのと、もうちょっときめこまかいものがほしい。


■Webオーサリングツールって何?


そもそもそういう、ホームページビルダーみたいな製品を、最近では「Webオーサリングツール」と呼ぶことすら、こちとらわからないのです。

まだ「ウェブページ作成ソフト」のほうがわかりやすいですね。

Adobeの製品はどうなのか?と問われると、やっぱり出力ソースがきたない。


ごしゃごしゃごしゃ〜


となっている。 まぁ気持ちはわかります。古くからプログラミング不要と呼ばれるもの(CASEツールとか言ってましたが)は、ソースがきたないのがあたりまえなのです。


そりゃ一回きりならいいですよ。メンテ不要とか。でもね、やっぱりどこかのシステム担当の方が手を入れることはわかっているので、コードはきれいに仕上げたいんです。

でもHTML5+CSSのタグや使用法をいちから始めるのは、


重いよ〜重すぎるよ〜!


見てますか?IT関係者の方。超本気の和製Webオーサリングツールが出たら絶対買います!即買います!


気がつけばハードもソフトも外資だらけのIT業界。本気出すならここです!

ではでは出羽の海。



お役に立ちましたらツイートお願いします!




このサイトで配布しているイラストレーターのアクションやスクリプトファイルを無断で転載・配布・販売することを固く禁じます。ご紹介いただける際は必ずURLリンクにてお願いいたします。 このサイトで配布しているイラストレーターのアクションやスクリプトファイルの使用で、ファイルの破損やアプリケーションに不具合が発生した場合でも、責任は負いかねますのでご承知おきくださいませ。自己責任での使用をお願いいたします。

© 2017 GOROLIB DESIGN
Released under the MIT license.





↑このページのトップヘ