Recommended
More Related Content
What's hot
What's hot (17)
Viewers also liked
Viewers also liked (20)
Similar to 最近つくったWebサイト作成ツールをおひろめ
Similar to 最近つくったWebサイト作成ツールをおひろめ (20)
最近つくったWebサイト作成ツールをおひろめ
- 1. 最近つくったWebサイト作成ツールをおひろめ - 俺聞け6 in Tokyo - 山本正喜
- 2. ChatWork株式会社 専務取締役CTO 山本 正喜 ビジネスチャットツール「チャットワーク」を展開中 + ビデオ通話 in the cloud チャット タスク管理
- 6. S3ホスティングって？ Amazonが提供するクラウドサーバー(AWS)の Amazon S3というファイルストレージサービスを つかってWebサイトを公開する手法 ※GitHub Pages や Dropbox を使う方法もあります - メリット とってもお安い (月額10円∼数百円？ PV次第) 急激な負荷でも自動で負荷分散。完全メンテフリー。 高いセキュリティ＆耐障害性。 大きなデータ配信やグローバル対応もOK (CDNを展開可能) ! ! ! ! ! ! ! !
- 7. でも、、、大きな欠点も 静的ファイルしか置けない (HTML, CSS, JavaScript, 画像など) PHPやPerlなどは動きません (WordpressやCMS、お問い合わせフォームなど)
- 9. 静的ファイルでサイト構築する時に困ること 共通ヘッダや共通フッタなどはどうする？ → SSIやPHPは使えない → DreamWeaverは全員持ってるわけではない 静的サイトジェネレーターが便利
- 10. 静的サイトジェネレーターって？ ローカル環境で動かして、各種設定やロジックをもとに 静的サイトとして出力してくれるシステムのこと。 (英語だと Static Site Generator) ! 簡単に言うと・・・ Wordpressの全ページをHTMLファイルであらかじめ出力 してくれるようなもの。(MovableTypeっぽいですね)
- 11. たくさんあります • • • • • • • • • Jekyll (Ruby + liquid) Bonsai (Ruby + liquid) Webgen (Ruby + ???) Hyde (Python + Jinja2) Cyrax (Python + Jinja2) Punch (node.js + Mustache) roots (node.js + jade) Phrozn (PHP + Twig) Sculpin (PHP + Twig) 他にもたくさん 海外ではちょっとしたブームっぽいです
- 12. でも、どれもピンと来ませんでした・・ • ブログ機能いらない • 基本的にプログラマ向け (黒い画面前提) デザイナ向けなものがほしい • かゆいところに手が届かない・・・ • 社内で慣れてる PHP + Smarty なものが無い！
- 14. インストール方法 1. PHPが動く環境をセットアップ （WindowsならXAMPP、MacならMAMPが簡単） ! 2. GitHubからZipファイルをダウンロード 3. PHPのドキュメントルート(htdocs)に解凍
- 16. DeMO
- 17. 特徴：Smartyのテンプレート構文が使える <!DOCTYPE html>! <html>! <head>! <title>{$title}</title>! </head>! <body>! {include file="parts/header.tpl"}! Page Contents! {include file="parts/footer.tpl"}! </body>! </html>
- 18. 特徴：YAMLで変数定義が可能 vars.yml common: title:"no title" local: title:"local" production: title:"production" path: index.html: title:"index page" feature/: title:"feature folder" feature/index.html: title:"feature index page" ビルド環境に応じて ファイルパスに応じて
- 19. 特徴：Markdown、Textileも使えます <section>! {markdown}! # this is markdown.! hello **Smart Builder!**! {/markdown}! </section> <section>! {textile}! h1. this is textile.! hello *Smart Builder!*! {/textile}! </section>
- 20. 特徴：sitemap.xml を自動生成 sitemap.xml <urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http:// www.sitemaps.org/schemas/sitemap/09/sitemap.xsd"! xmlns="http://www.sitemaps.org/ schemas/sitemap/0.9"> ! <url>! ! <loc>http://www.sample.com/feature/</loc> ! ! <lastmod>2013-09-19T12:10:00+02:00</lastmod> ! ! <changefreq>daily</changefreq> ! ! <priority>1.0</priority> ! </url>! <url>! ! <loc>http://www.sample.com/feature/subfeature/subfeature.html</loc> ! ! <lastmod>2013-09-19T12:10:03+02:00</lastmod> ! ! <changefreq>monthly</changefreq> ! ! <priority>0.5</priority> ! </url>! <url>! ! <loc>http://www.sample.com/</loc> ! ! <lastmod>2013-09-30T14:19:21+02:00</lastmod> ! ! <changefreq>daily</changefreq> ! ! <priority>1.0</priority> ! </url>! </urlset>
- 22. 特徴：JavaScriptを自動構文チェック sample.js var test = 'ABC' var abc = [1,2,];