Web製作」カテゴリーアーカイブ

不要なAndroidスマホがあったら譲ってください!

現代のウェブ制作には欠かせないスマホサイト。その検証端末用にもう使っていないスマホがあったら譲って欲しいな、というお願い。iPhoneでもAndroid端末でもどちらでも歓迎。(安ければ安いほど嬉しいです!)

ただiPhoneは中古でも高値だし、私の周りに持っている人が多いので、出来ればAndroid端末が欲しいです!エミュレーターだと遅い(重い)し操作感までは分からないので、やはり実機だなと。でもそんなお金はかけたくないっていう…。

そう言えばiPhone 3GSを安く見つけたら買っておいた方が良いですよ!すごく手に馴染む形、日本の技術が活きてる背面の曲線とか堪らないよ!横240px、縦320pxの画面も狭いけどちゃんと指が届くし、この大きさで今のウェブサイトを見るのも一興ですよ!(完全に趣味の世界ですけど。)

現在持っている検証用端末リスト

  • iPhone6 Plus(iOS 9.x / 随時更新中)
  • iPhone4(iOS 7.1.2)
  • iPhone3GS(iOS 6.1.6)
  • Sony Ericsson Xperia SO-03C(Android 2.3.4)

譲ってくれる方が居ましたら、Twitterなどでコンタクトを取って頂ければ幸いです。ここへのコメントでもいいですし。

css pokemonball

2つのdivとCSSでポケモンボールを作れ

HTMLやCSSのテンプレートを保存しておこうとcodepen.ioに登録してみました。

で、テンプレートは主に自分用なので、それ以外にも何か面白いものでも提供出来たらなぁということで、会社内でチーム向けにやっているHTML & CSSミニテストをここでも公開しようかなと。

先ずは2つの<div>でポケモンボールを作るっていうお題。ルールは以下。

  • HTMLタグは追加不可
  • IDやクラスは自由に追加してOK
  • CSSのみで形を作る

ちょっといい加減な所もありますが、是非挑戦してみてください。

See the Pen Pokemon Ball made by 2 divs & CSS.2 2つのdivとCSSでポケモンボールを作るテスト。 by POPGUN (@POPGUN) on CodePen.0

Macでフォルダーとファイル名の一覧をテキストで取得する方法

ウェウ制作で提案書等を作る際に、サイトの構成ファイル(HTML、CSSなど)一覧をテキストでまとめる事があります。その際にフォルダーの中身のファイル迄(サブフォルダも!)引っ張ってきてくれるソフトが無いかなぁと思ったらありました。フリーソフトなのでありがたい。

  1. TextWranglerで新規ファイルを作成
  2. 対象のフォルダをTextWranglerのページ内にドラッグ140309_Finder_Select
  3. 階層がタブでインデントされたテキストが生成される
    140309_TextWrangler_Paste
  4. 全てを選択して、ExcelやNumbersにコピペ

あとは自由に編集しましょう。

140309_TextWranglerこのTextWrangler、テキストエディターとしても優秀そうです。
テキストエディターはJeditをメインに、最近はちょっとしたメモはEvernoteでとっているのでメインで使うか判りませんが、複数ファイルを開いての編集とか便利そう。Jeditより軽くいのもいですね。

また、タブインデントは無くても良いとか、サブフォルダは無いという場合にはもっと素早く出来ます。

  1. 対象のフォルダを開く
  2. リスト表示(キーボードショートカット:command+2)にする
  3. 取得したいフォルダを開く
  4. ファイルを全て選択して、コピー
    140309_Finder_to_TextEditor
  5. お好きなテキストエディターにペースト

これでも出来ます。

2015−05−24:追記
フルパスの一覧を取得したい場合、Yosemiteでは以下の手順。

  1. 対象のフォルダを開く
  2. リスト表示(キーボードショートカット:command+2)にする
  3. 取得したいフォルダを開く
  4. ファイルを全て選択して、コピー
  5. ターミナルに貼り付け
  6. ターミナルで全選択、コピー
  7. 適当なテキストエディターに貼り付け

参考:FinderからPathをコピーしたい

ちなみにMac標準テキストエディターの「テキストエディット」にコピペする際はフォーマットメニューから「標準テキストにする」を選択してから、Evernoteに貼付ける場合は編集メニューから「標準テキストでペースト」を選択しましょう。

iPadのSafariではiframeのoverfrowが効かない

iPadやiPhoneのSafariではスクロールバーが出ない。これはタッチUIの為なんだろうけど、問題が発生。

で、これを解決と言うか妥協案を考えた。
残念な解決方法ですが(笑)
解説はこちら「iPadのSafariではiframeのoverfrowが効かない」(iPadで見ないと判らないかも)。

CSS Nite LP6「CMSリベンジ編」レポート

27日の土曜日、Web制作者の為のセミナーCSS Nite LP6に参加してきました。そのレポートというか覚え書きというか、何かを書いてみる。合計8つのCMSが紹介されましたので、サラッと感想をまとめてみようかと思います。(途中半分寝てたので、私の勘違いや間違い等があるかと思います。何かあればコメント等でお知らせいただければ幸いです。)

各CMSの感想の前に、貰ってきたものの写真。a-blog cmsの飴ちゃんと、CMS Designerの開発会社が福井にあり、小浜市の件、ごめんなさいということで持ってきた「OBAMAN(おばまん)」を頂きました。

ではレポート開始。

SoyCMS

  • OSS(オープンソース)のCMS
  • サイト全体だけではなく、一部分のみにも使える
  • エントリー記事の雛形を作れる(商品紹介記事はデータスペックの表を用意しておくとか)
  • 新着記事のアイコンとかもある(Pkug-inにて提供)

SoyCMSについての感想

ローカルに環境だけは構築してみた。で、肝心のテストはまだやってない。でもチュートリアルっぽいサイトもあるし、オープンソースなので協力者が集まればどんどん良い方向に進むと思われる。私はプログラミングが出来ないが、意見を言うことだけは一丁前に出来るので、そういうのもアリだと思います。

ウェブサイト全体ではなく、一部分のみ、例えば新着情報だけ欲しいなんてよくある。滅多にページ改訂は無いって所。そういうウェブサイトに導入するのに便利かも。

何はともあれ今後に期待大!と上から目線で書いてみる。

プレゼンテーションについての感想

OSS(オープンソース)のCMSだけあって、開発者の意思が思い切り伝わってくる。開発は株式会社日本情報化農業研究所が行っている模様。普段は野菜も作っているとのことで、なんだかいい感じだ(笑)プレゼンターで社長の古荘氏は、ちょっと変わり者の感はある(笑)

WebRelease 2

  • 500ページバージョンで50万円!
  • CMSを専用のサーバーで編集しHTMLファイルを書き出し、それをFTPで公開用のWWWサーバーに送る(WWWサーバーへの負荷が少ない?)
  • SEOに強いとされる静的なHTMLである
  • エントリー画面やなんやらを自由に設計出来る(それも簡単に)
  • HTMLだけじゃなく、javaScriptやXMLなどのテキストも書き出せる
  • 実績サイト「ウェブマガジン ACROSS

WebRelease2についての感想

セミナー最後の挙手によるアンケートで、MVP(というか使ってみたいCMSだったかな?)を決めました。そこで私はこのWebRelease2に手を上げたのですが、3名でした(笑)たぶん200人位は居たんじゃないかと思います。

セミナーの合間の休憩時間に、WebRelease2のサポート?でプレゼンテーションをした方にお話を聞いたのですが、自由度が高いということは言っていました。要するに何でも出来るってことですね。

プレゼンテーションについての感想

第一印象は、これは伝わりにくいなぁと思った。blogや普通のCMSの様に、初めから雛形的なものが用意されておらず、先ずそこから制作していくことになる。

だけどココが肝なんだと思われる。そう、まさしく「白紙」で、何でも出来るみたいです。(みたいというのは実際に制作の画面が少ししか紹介されなかったので、判らないのです。デモ版も無いし。)

それとWebRelease 2のウェブサイト、読み難いです。というか読む気になれませんでした…。それと、デモ版は無理でも、どこかで触ることの出来る機会が欲しいですね。車だって高いけど、試乗は出来るんですから。

CMS Designer

  • 必要な所にだけCMSを入れられる
  • エントリーにカスタムフィールドを追加出来る
  • 管理画面が判りやすい

CMS Designerについての感想

実はあまり覚えていない。起きてた筈なんだけど…。管理画面の判りやすさって言うのは重要。CMSを開発している方々や、私たち制作者は使えて当たり前なんだけど、それをクライアントである一般のユーザーに当てはめるのは無理。事実MovableTypeは判らないって言われますからね。

プレゼンテーションについての感想

きっちりしていたと思う。何故か殆ど覚えていない。実はこの頃からメモはアンケート用紙に書き込んでいて、最後に写真でも撮ればいーやー、と思っていたのに、写真撮るのを忘れたせいもあるでしょう。メモが無いと思い出せなくなってきた今日この頃。

RCMS

  • 更新方法が判りやすい(閲覧ページをそのまま修正出来る)
  • SaaS版なので、システム面はお任せしておけばセキュリティなど安心
  • ページを管理するのではなく、データ(情報)を管理する

RCMSについての感想

上手く情報設計をすれば、いや、情報設計とは違うか?とにかくメタ情報を上手く汲み取って設計すれば、サイトの構造が大きく変わるかもしれない。ツリー構造ではなく、縦横型ってやつ?プレ前後にこのRCMSを利用した方が、「MovableTypeで独自のプラグインを開発して作ったという法律事務所のアレみたいなものが、簡単に出来るんですよ!」って言ってたのは、Business Architectsが手がけた「西村あさひ法律事務所」のウェブサイトだと思います。

プレゼンテーションについての感想

恐らくプレゼンテーションに慣れていないのだろうということは直ぐに判りました。スライドもPowerPointまんまなデザインで、他のプレゼンターのスライドとは違いました。(司会者がプレゼン終了後にダメ出ししてましたが、それはどうかと思いました。やるなら裏でやれと。何も赤っ恥かかせる必要があったのか?少なくとも私は不愉快ででしたね〜。)

ともあれ伝わり難かったのは確かで、CMSとして良い部分もあったのにそれが伝え切れていたのかは不明。無料版を試してみようかと思います。

RCMSのプレゼンの資料がUPされていました。

a-blog cms

  • 既存のHTMLで構成されたサイトを、テーマフォルダーに丸ごと入れても動く
  • PCサイトと同一コンテンツの新規携帯サイトを作るのが簡単

a-blog cmsについての感想

まだ正式版はまだ先週公開されたばかりの新しいCMS。でも元々はa-blogというシステムがあり、更にその前はa-nikkiがあったと思う。なので、いきなり完成度は高いんじゃないだろうか。必要な機能等が揃っているという点で。

プレゼンテーションについての感想

既に私はローカル環境にインストールして、管理画面やら見ていましたし、チュートリアルも公開されているのでそれを読んでいましたので、新しい情報というものは殆どありませんでした。なので、後半は船を漕いでいました。スミマセン(笑)

参加者全員に飴ちゃんくれた。aの文字の金太郎飴とのこと。味は普通でしたけど、こういう遊び心は好き。

その他のCMS

以下は、5分程度の紹介だったので、感想等は割愛。でも面白かったし、興味のあるものも沢山。

CSS Nite LP6のイベントについての感想

3,500円で、事前に各自のblogなどで紹介すると割引き。レポート書くと(この記事ね)更にAmazonのクーポンだったかな?とにかく、安いと思いますよ。これからも気になるイベントがあったら参加したいですね。

ただ、頂いたCMS比較表のポスター、あれでっかいし要らないと思います。印刷代が勿体ないかな〜って。PDFでいいでしょ。あるいはGoogle Docsのスプレッドシートとか。一応貰いましたが(撮影しようかと思ったけど面倒なので止めました)直ぐに捨てちゃうだろうな〜。

久々のセミナーで為になりました。ただ、色々なCMSを知ってしまったので、更に迷うことになるような気がするのは参加した人なら思っているのでは?私は全部試したい気分ですから(笑)