カテゴリ: まとめ

こんにちは@fujitaijuです。

 

ちょっと必要にせまられ、iPhoneで表示したWebページの全画面スクリーンショット(いわゆる魚拓)を撮影できるアプリを探してみたらいくつかあったので、まとめてみました。

 

まとめてはみたのですが、画質やオプション機能を考えるとMobWeb.Goodyというアプリ一択となります。なのでMobWeb.Goodyとその他のユカイなアプリたちという感じで紹介しようと思います。

 

MobWeb.Goody

スクリーンショットアプリの中で唯一JPGとPNGの画像形式選択ができるアプリです。というか、iPhoneの画面はJPGでスクリーンショットしても汚くて見れたもんではないのでPNGでできないと意味がないです。これがこのMobWeb.Goody一択と行った理由です。 

Full Screen Capture - MobWeb.Goody (Version 1.2.0) App
カテゴリ: ユーティリティ
価格: ¥85 (最新価格はStoreで確認してください)
現Ver.の平均評価: (1.0 / 1件の評価)
通算の平均評価: (4.0 / 4件の評価)

 

使い方はSafariなどのブラウザと一緒です。URLをアドレスバーに打ち込んで、Webページが表示されたらスクリーンショットボタンを押すだけ。

IPhoneアプリ SebMob Goody0

 

写真はFacebookに共有したり、Dropboxに保存できます。もちろんカメラロールにも保存できます。

IPhoneアプリ SebMob Goody1

 

PNGとJPEGの切り替えができるスクリーンショットアプリは現在のところこのMobWeb.Goodyのみ。

IPhoneアプリ SebMob Goody3

 

全画面か、見えてる範囲のみかの選択もできます。

IPhoneアプリ SebMob Goody4

 

かなり長くなりますが、これが全画面で撮影したスクリーンショットです。PNGなので、文字の滲みがなくとてもキレイに撮影できてます。横幅はiPhone4の場合640pxで保存されます。恐らく使用する端末の解像度で保存されると思われます。

IPhoneアプリ SebMob Goody2

 

その他の全画面スクリーンショットアプリ

多少画質が劣化しても構わないという人は無料のアプリが3つほど出ていますので、こちらを使うといいと思います。3つ全て試しましたがアプリの使い勝手が変わるだけで撮影されるスクロールの画質に違いはありません。好きなアプリを選べばいいと思います。全てJPGのみの保存になっています。

 

ロールペイパー (Version 1.0) App
カテゴリ: ユーティリティ
価格: 無料 (最新価格はStoreで確認してください)
現Ver.の平均評価: (3.5 / 11件の評価)
通算の平均評価: (3.5 / 11件の評価)

Web Scroll Capture (Version 1.0) App
カテゴリ: ユーティリティ
価格: 無料 (最新価格はStoreで確認してください)
現Ver.の平均評価: (3.5 / 18件の評価)
通算の平均評価: (3.5 / 18件の評価)

WebCollector (Version 2.1) App
カテゴリ: 写真/ビデオ
価格: 無料 (最新価格はStoreで確認してください)
現Ver.の平均評価: (3.5 / 3件の評価)
通算の平均評価: (4.5 / 36件の評価)

一応私のおすすめ順に並べました。ロールペイパーなんかはとてもシンプルですごく使いやすいと思いますよ。全画面スクリーンショットアプリを探していた人は参考にしてみてください。 

 

このエントリーをはてなブックマークに追加

こんにちは@fujitaijuです。

 

以前は絶対にやらないと思っていたモバイル環境からのブログ更新。外出時での空き時間にブログ更新ができれば書けるエントリの数も増えるだろうと思い直し、とりあえずiPhoneやiPadからブログを書けるようなアプリをピックアップしてまとめてみました。

 

一応WordPressを使うという前提で調べています。

 

WordPress公式アプリ

1年くらい前に一度使ってみましたが、あまりの使いづらさや落ちっぷりに敬遠していました。しかし最近大幅なアップデートがありUIや使い勝手がかなり改善されたようです。無料で使えるので試してみる価値は充分にありですね。Android版もあり。

 

WordPress (Version 3.1.2) App
カテゴリ: ソーシャルネットワーキング
価格: 無料 (最新価格はStoreで確認してください)
リリース日: 2009/10/29
現Ver.の平均評価: (1.0 / 1件の評価)
通算の平均評価: (3.0 / 571件の評価)

 

するぷろ for iPhone

和製モブログアプリ。和洋風のするぷさんが作成しているアプリです。WordPressだけでなく、MovableTypeとFC2にも対応しています。

さぁ! 外に出て "ごりごり" モブログを書きまくろう! iPhoneブログアプリ「するぷろ for iPhone」で作者さんが詳しく解説されています。

 

SLPRO Blog Editor (Version 1.500) App
カテゴリ: ソーシャルネットワーキング
価格: ¥350 (最新価格はStoreで確認してください)
リリース日: 2011/05/18
現Ver.の平均評価: (無し / 0件の評価)
通算の平均評価: (4.0 / 33件の評価)

 

Blogsy

iPhone版は無く、iPadのみとなってしまいますが、海外では結構使われているアプリのようです。App Storeの評価もかなり良く使い勝手がよさそうです。また、WordPressだけでなくBloggerやTypePad、MovableType他たくさんのブログに対応しているのもポイントです。

 

Blogsy (Version 4.1) App
カテゴリ: ソーシャルネットワーキング
価格: ¥450 (最新価格はStoreで確認してください)
リリース日: 2011/04/07
現Ver.の平均評価: (4.5 / 2件の評価)
通算の平均評価: (4.5 / 56件の評価)
 

 

BlogPress

GoogleのBloggerを意識して作られている印象のアプリ。もちろん、WordPressでも使えます。最近の評価は良くないっぽいですね。しかし、TextExpanderに対応していたりと機能は豊富のようです。

 

BlogPress (Version 3.0.5) App
カテゴリ: ソーシャルネットワーキング
価格: ¥450 (最新価格はStoreで確認してください)
リリース日: 2009/06/04
現Ver.の平均評価: (3.5 / 18件の評価)
通算の平均評価: (3.0 / 200件の評価)

 

BlogWriter

基本的な機能しかなく、あえてこれを選ぶことはないのかも。WordPress公式アプリの方が全然使える印象です。

BlogWriter (Version 3.2.6) App
カテゴリ: ソーシャルネットワーキング
価格: ¥170 (最新価格はStoreで確認してください)
リリース日: 2008/07/30
現Ver.の平均評価: (2.5 / 58件の評価)
通算の平均評価: (2.5 / 89件の評価)

 

Epistle(Androidアプリ)

最後におまけでiOSではなくAndroid用アプリの紹介。評価はかなり良いですね。Android端末をもっていないので試してみることができませんがかなり良さそうなアプリです。

Epistle  Android Apps on Google Play

 

 

まとめ 

MacのMarsEditでの快適環境に慣れてしまっているため、モバイルでブログを書くのをやるかどうかはわかりませんが、上記で挙げたアプリをいくつか試してみて、これでいけるようであればモブログデビューしてみようかと思います。

 

実質WordPress公式、するぷろ、Blogsyの3択ですね(;・∀・)

このエントリーをはてなブックマークに追加

こんにちは。@fujitaijuです。

 

Mac系アプリをブログで紹介するために専用のHTMLを生成してくれる神アプリAppStoreHelperを使ってる人は多いと思います。

AppStoreHelper

 

私は今までデフォルトのフォーマットを使っていたのですが、フォーマットのカスタマイズをして6つのパターン作ってみました。

 

※フォーマットのソースは公開しますので、自由にダウンロードして使ってください。

zipを回答すると6このファイルが出てくるので、テキストエディタで開いてコピーして使ってください。

 

Download icon32x32

 ここからまとめてダウンロード。

 

まずはデフォルトフォーマットのおさらい

フォーマットカスタマイズのため、AppStoreHelperのデフォルトフォーマットをおさらいしておきたいと思います。

デフォルトFormat1

シンプルだけど必要最小限の情報を出してくれるので一番良く使う。 

Coda 2 App
カテゴリ: 開発ツール
価格: ¥6,500

 

デフォルトFormat2

画像なし。あまり使わない。

Coda 2 App (¥6,500)

 

デフォルトFormat3

さらにシンプル文章中に入れるときにそこそこ使う。

Coda 2 (¥6,500)

 

デフォルトFormat4

目立つけどスペースをとるのであまり使わない。

Coda 2 (Version 2.0) App
カテゴリ: 開発ツール
価格: ¥6,500
デベロッパ名: Panic, Inc.
リリース日: 2012/05/24
対応デバイス: 無し
現Ver.の平均評価: (4.0 / 45件の評価)
通算の平均評価: (4.0 / 45件の評価)
Game Center: 非対応
 

 

必須の情報は何か?

人によって好みが分かれるかもしれませんが、次の4つの情報は必須だと思っています。

  1. アプリ名
  2. 値段
  3. アプリのアイコン
  4. 評価(レーティング)

 

必須とまでは言わないが、あったほうがいいなと思うもの。

状況によって上記の必須情報にこれらを追加していくといいかも。

  1. スクリーンショット(できれば2枚以上)
  2. アプリの説明
  3. カテゴリ
  4. アプリ作成元のWebページURL

 

たくさんの情報を持つFormat4を元にしてカスタマイズしてみる

パターン1

必要ない情報を無くして、コンパクトにしてみたもの。

スクリーンショットは長い方の辺を240pxにしてサイズを小さくした。

以下のようにスクリーンショットが横長なMacやiPadアプリ向けかも。

Coda 2 (Version 2.0) App
カテゴリ: 開発ツール
価格: ¥6,500 (最新価格はStoreで確認してください)
リリース日: 2012/05/24
現Ver.の平均評価: (4.0 / 49件の評価)
通算の平均評価: (4.0 / 49件の評価)
 

 

Mr. Reader (Version 1.9) App
カテゴリ: ニュース
価格: ¥350 (最新価格はStoreで確認してください)
リリース日: 2011/04/02
現Ver.の平均評価: (4.0 / 7件の評価)
通算の平均評価: (4.5 / 54件の評価)
 

パターン2

パターン1にアプリの説明を加えた物。

説明が長いものはスクロールできるようになる。

Coda 2 (Version 2.0) App
カテゴリ: 開発ツール
価格: ¥6,500 (最新価格はStoreで確認してください)
リリース日: 2012/05/24
現Ver.の平均評価: (4.0 / 49件の評価)
通算の平均評価: (4.0 / 49件の評価)
説明:
*** FOR A LIMITED TIME: $75 UPGRADE PRICING FOR EVERYONE. *** A fresh approach to web code. Bursting with features but without bloat. Built to make your life better: Coda 2 is the editor you've always wanted. So, you code for the web. And in Coda 1, we revolutionized that process, and put everything you needed in one place. An editor. Terminal. CSS. File management. SVN. But we knew we could do more. Now, with Coda 2, we went beyond expectations. We added tons of highly-requested features, and a few nobody expected, then wrapped it all up in a shiny, groundbreaking UI fit for the future. This update is, truly, major. NEW FEATURES: ✔ Better User Interface • Visual Tabs. Find files quickly, and see more tabs at once. • Customizable Sidebar. Put your favorite, powerful Coda tools in the sidebar dock. • Streamlined Workflow. You'll always know what you're looking at. • Code Focus. Hide the sidebar, or go full-screen, and get work done. ✔ Better Text Editing • Code Folding. Finally. • Smart Complete. Autocomplete your custom variables + functions. • Automatic Indentation • Smarter Automatic Closing Tags • Tab Key Text-Shifting • One-Press Character Wrapping ✔ Better File Management • Git. In addition to SVN, now you can manage source with GIT. • Complete File Management. FTP, SFTP, WebDAV, and S3, with a Transmit interface. • Transmit Twin-Turbo Engine. Some of the fastest file transfer in the industry. • Path Bar Browsing. Click a path bar segment for an instant file list. • Open Quickly. Pop it open, type a few characters, and find what you're looking for. • Group Folders Above Files. A very popular request. ✔ Better Clips • Multiple Placeholders. Quickly tab between the bits that need input. • Dynamic Placeholders. Automatically fill in dates, URL's, text selections, and more. • Insertion Points. Put the cursor at the right place, every time. • Import/Export. ✔ Better Sites • Groups. Drag related sites into a site board. • List View. See even more sites at a glance. • iCloud Sites + Clips Sync from Mac to Mac. ✔ Better Design • Revolutionary CSS Pops. GUI pop-ups help with the hardest CSS as you code. • Live Changes. See your CSS changes affect your page real-time. • iPad / iPhone Preview. Shrink down your preview to just the right size. ✔ Better MySQL • Built-In MySQL Editor. Without leaving Coda, administer your site's database with ease. • Edit Structure or Content • Run Arbitrary Queries ✔ Better Everything • Improved Live Hints. As you type HTML, JS, or PHP, quick reference can appear in the sidebar. • CSS Styles in Code Navigator • Code Navigator Filtering and Sorting • All-New Books • Places • Better Ruby Support • Skip Files Rules • Improved HTML and CSS Validation • Easier Theme Editing • Full-Screen Mode • Labels • Quick Look • Plugin API Improvements • Much, Much More AND INTRODUCING: AIRPREVIEW. It's magic. Get our brand-new app, Diet Coda, exclusively for your iPad. Pair it with Coda 2 on your desktop. Then, watch your mind blow. Your iPad now becomes a live preview window as you work on your web pages on your Mac. Make a few tweaks, hit save, and watch as your iPad automatically refreshes. Pages are served from your Mac and rendered on your iPad, so you're getting a true mobile preview. Put your iPad to good use while you work! (And that's not the half of it: Diet Coda is a full-featured remote web editor on your iPad, perfect for making quick fixes on the go!) YOU WILL LOVE CODA 2, AND WE WILL LOVE SEEING WHAT YOU MAKE WITH IT.
 

パターン3

パターン1のスクリーンショットを3枚に増やした物。

4枚にしてしまうと一つ一つのサイズがかなり小さくなってしまいかなり見辛くなるのでコレくらいがギリギリかも。それに3は素数だしなんとなく収まりが良い。

スクリーンショットの横幅は160pxで、プラス半角スペースが2つ入ってる。

iPhoneアプリ向け。

Tweetbot ― 個性派Twitterクライアント (for iPhone) (Version 2.4) App
カテゴリ: ソーシャルネットワーキング
価格: ¥250 (最新価格はStoreで確認してください)
リリース日: 2011/04/14
現Ver.の平均評価: (3.5 / 29件の評価)
通算の平均評価: (4.0 / 926件の評価)

 

パターン4

パターン3にアプリの説明を加えた物。

Tweetbot ― 個性派Twitterクライアント (for iPhone) (Version 2.4) App
カテゴリ: ソーシャルネットワーキング
価格: ¥250 (最新価格はStoreで確認してください)
リリース日: 2011/04/14
現Ver.の平均評価: (3.5 / 29件の評価)
通算の平均評価: (4.0 / 926件の評価)
説明:
Tweetbotは、iPhone/iPod touch用の高機能型・個性派Twitterクライアント。細部まで綿密に作り込まれたインターフェースや、サウンドとアニメーション、マルチタイムラインやスマートジェスチャといった機能など、他にない魅力を満載したアプリです。 ユーザの声: 「App Storeで入手できるTwitterクライアントを片っ端から試してみたけど、Tweetbotが最高さ。間違いない。」 - John Gruber、Daring Fireball 「Tweetbotなら、数々の便利なTwitter機能をワンタッチで操作できる。しかもTapbotsならではの洗練されたスタイルで、だ。今一番のお気に入りクライアントだよ。」 - David Chartier、Macworld 主な特長: ◆ マルチタイムライン:メインのタイムラインと複数のリストを、すばやく切り替え表示。 ◆ スマートジェスチャ:手軽でカスタマイズ可能なジェスチャで、さくさくと操作可能。 ◆ 独自のプッシュ通知機能を搭載。 ◆ タブバー右2つのタブは、表示内容を選択可能。未使用のタブにも簡単アクセス。 ◆ Read It Later、Instapaper、URL短縮(Cloudapp他)などの各種サービスに対応。 ◆ 下書きの保存、位置情報/POIサービスの利用、写真/ビデオ/メモの添付、リスト管理などの各種機能を搭載。 tapbots.com/tweetbot/にて、Tweetbotの詳細およびデモビデオをご覧いただけます。

 

パターン5

どうしてもスクリーンショットを4枚表示させたい人向け。

MacやiPadアプリはやめておいたほうがいい。

スクリーンショット一枚の横幅は120pxなので4枚で480pxとなっていて、それにプラスして半角スペースが3つ分となっている。

Tweetbot ― 個性派Twitterクライアント (for iPhone) (Version 2.4) App
カテゴリ: ソーシャルネットワーキング
価格: ¥250 (最新価格はStoreで確認してください)
リリース日: 2011/04/14
現Ver.の平均評価: (3.5 / 29件の評価)
通算の平均評価: (4.0 / 926件の評価)
説明:
Tweetbotは、iPhone/iPod touch用の高機能型・個性派Twitterクライアント。細部まで綿密に作り込まれたインターフェースや、サウンドとアニメーション、マルチタイムラインやスマートジェスチャといった機能など、他にない魅力を満載したアプリです。 ユーザの声: 「App Storeで入手できるTwitterクライアントを片っ端から試してみたけど、Tweetbotが最高さ。間違いない。」 - John Gruber、Daring Fireball 「Tweetbotなら、数々の便利なTwitter機能をワンタッチで操作できる。しかもTapbotsならではの洗練されたスタイルで、だ。今一番のお気に入りクライアントだよ。」 - David Chartier、Macworld 主な特長: ◆ マルチタイムライン:メインのタイムラインと複数のリストを、すばやく切り替え表示。 ◆ スマートジェスチャ:手軽でカスタマイズ可能なジェスチャで、さくさくと操作可能。 ◆ 独自のプッシュ通知機能を搭載。 ◆ タブバー右2つのタブは、表示内容を選択可能。未使用のタブにも簡単アクセス。 ◆ Read It Later、Instapaper、URL短縮(Cloudapp他)などの各種サービスに対応。 ◆ 下書きの保存、位置情報/POIサービスの利用、写真/ビデオ/メモの添付、リスト管理などの各種機能を搭載。 tapbots.com/tweetbot/にて、Tweetbotの詳細およびデモビデオをご覧いただけます。

パターン6

画像はアプリのアイコンだけのシンプルな作り。

デフォルトのFormat1に情報を少し加えた物です。

一番最後に出したけど、実は一番使いそうな予感。

Tweetbot ― 個性派Twitterクライアント (for iPhone) (Version 2.4) App
カテゴリ: ソーシャルネットワーキング
価格: ¥250 (最新価格はStoreで確認してください)
現Ver.の平均評価: (3.5 / 29件の評価)
通算の平均評価: (4.0 / 926件の評価)

カスタマイズのコツ

自分のブログに合うように、スクリーンショットの横幅だけを変えたいときは、ソースの一番最初にある「$shortSideShouldBe:150$」の数値の部分を変更すれば良い。ちなみにこれは画像の短辺が150pxという意味になる。

iPhoneだと短辺は横方向になるけど、MacやiPadでは縦方向になるので注意してください。

 

縦方向の長さを変更したい場合は、上記の代わりに「$longSideShouldBe:240$」を使う。これは長辺が240pxという意味になる。

 

まとめ

今回、AppStoreHelperの作者さんのサイトを参考にしてカスタマイズさせていただきました。

こちらを参考にすれば自分好みのフォーマットを簡単に作れると思いますのでやってみるのもいいかもしれません。

 

今、他のパターンも作っていて、ブログ形式ではなくまとめて別サイトで公開しようと思っています。

サイトも含め作成中ですのでしばらくお待ちください。

このエントリーをはてなブックマークに追加

 ※本エントリーは2012年5月28日に加筆修正しました。

みなさん、画像処理ソフトってどんなのを持ってますか?

私はブログに使う画像を処理したりするのに今まで無料のアプリを使ってきたのですが、結構限界があるんですよね。

 

サイトのロゴとか画像の合成するのにPhotoshopは高くて買えないので、代替ソフトと噂のPixelmatorを買ってみました。

買ってはみたものの、GIMPにあるような解説書はまったく出版されていない状態。

 

こりゃWebから探してくるしかないと思い探してみましたが、結構情報がばらついていたのでチュートリアルサイトをまとめました。

ちなみに英語圏の方が情報が豊富でした。

日本語のチュートリアル

Pixelmatorのボタンや操作などのインターフェースヘルプサイト。

まずはここをみて、どのボタンで何ができるのかを学と良いと思います。

Pixelmator ヘルプ

次の3つの動画は、Pixelmatorでど何ができるのかがよくわかります。

Photoshop等、他のグラフィックソフトを使ったことがない人向けだと思います。

ピクセルメーター・フィルタ/エフェクト編 - YouTube

 

 

 

 

ピクセルメーター・レイヤー/互換性編 - YouTube
既にネットで話題となっている、噂の画像処理ソフトのピクセルメーター。 第二弾は、レイヤー/互換性編です。この価格で、レイヤーマスクまで搭載。 互換ファイルの種類は60種以上。 ...

ピクセルメーター・ツール編 - YouTube
既にネットで話題となっている、噂の画像処理ソフトのピクセルメーター。 第二弾は、ツール編です。消しゴム、範囲指定、ペイントバケツなど従来の画像ソフトとはまったく違う 直感的な使い方が可能です! ...

 

Keynoteやパワーポイントで作るような図解をPixelmatorで作る解説です。基礎的な操作が盛り込まれてるので真似すれば基礎力がつきそうな気がします。

Pixelmatorで見やすい図解を作る!!(OZPA さんの見やすい図解を再現) | 極上の人生
出来のよい図解の力というのは素晴らしいものです。 記事を読むときに大きな助けになってくれます。 ブログ「OZPAの表4」を運営されている@OZPA さんは、その図解の名人です。 ...

ボケ風味の画像を作るチュートリアルです。一段階レベルが上がります。

SMAC: Diary: Pixelmator入門・ネットでよく見るボケ画像風の壁紙を作ってみよう
Pixelmator公式サイトのチュートリアル Pixelmator | Learn | Bokeh Effectの手順を簡略化アレンジして補足説明を入れたものです。ネット上でよく見かける、下のような ...

プレミアムモルツのCMで使われるような一部分のみ色をつけ、他の部分をグレーで表現する技法を解説しています。

※2012年5月28日追記

リンク先がなぜか認証が必要になっており今は見ることができないようです。

http://act2blogs.com/products/?p=1756

 

英語のチュートリアル

やはり英語圏のほうが情報は多いです。

画像を使って解説されているサイトが多いので、文章を読まなくても大体理解できます。

 

Pixelmator本家のチュートリアル。

動画とテキスト形式のチュートリアルが全部で22個用意されています。これ全部やったら力がかなりつきそう。

Pixelmator Tutorials

 

こんなの本当に作れるの?と思いますが、手順通りに作っていくと、意外に簡単に作れることを分からせてくれるチュートリアル。 

Water Text in Pixelmator | Abduzeedo | Graphic Design Inspiration and Photoshop Tutorials
In this tutorial, I will show you how to create text with water effects. To do this, we will use som ...

 

次の二つはPixelmatorのチュートリアルをブログ形式でたくさん紹介しているサイト。

かなり数があるので、全部やったらかなり力がつきそうです。

Pixelmatortutorials.net
About PixelmatorTutorials.net Follow us as the Pixelmator gurus share new tips and tricks, to make ...

 

Pixelmator Tutorials, Downloads and Resources - PXM-Tuts
PXM-Tuts delivers weekly Pixelmator tutorials, resources and downloads for free. We show you how fun ...

チュートリアルのまとめ記事。

どれも素晴らしいです。上記で紹介したものと少し重複してるものがあります。

45 Tutorials for Learning Pixelmator | Vandelay Design Blog
Pixelmator is a popular image editor for Mac OS X. While Photoshop is the industry standard, Pixelma ...
 

50 Hot New Tutorials (Part2) | designrfix.com
Tutorials can often be your greatest source of inspiration when trying to design that project you ha ...

 

 

 

 

コミックのコマ割り風の画像を作るチュートリアル。

これも一見難しそうですが、そんなに難しいことはやってません。

Comic Style effect in Pixelmator | Abduzeedo | Graphic Design Inspiration and Photoshop Tutorials
I know it's been quite awhile since the last time I published a Pixelmator tutorial, but the wait is ...

 

グラフィックソフトは用語が難しいので、ある程度使えるまでに時間がかかりますが、上記のようなチュートリアルを通して使えるようになっていきたいですね。

Pixelmator
カテゴリ: グラフィック&デザイン, 写真
価格: ¥3,000(最新価格はApp Storeで確認してください)

ss1 ss2

このエントリーをはてなブックマークに追加

↑このページのトップヘ