-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
124 lines (122 loc) · 8.14 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=1200">
<meta name="description" content="縦に長い画像を1枚で印刷する際に自動分割してレイアウトするツール/運営:株式会社ビーワークス WEB制作部/紹介元:WEBNAUT">
<meta name="keywords" content="WebNAUT,ウェブノート,Web制作,制作,ビーワークス,beeworks,印刷,Print1" />
<title>Print1</title>
<link rel="shortcut icon" href="assets/img/favicon.ico" />
<link rel="apple-touch-icon-precomposed" href="assets/img/apple-touch-icon.png">
<link href="assets/css/bootstrap.min.css" rel="stylesheet" media="all">
<link href="assets/css/style.css" rel="stylesheet" media="all">
<link href="assets/css/jquery-ui.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nova+Round" rel="stylesheet" type="text/css">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@WebNAUT_BW">
<meta property="og:title" content="Print1 | WebNAUT" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://webnaut.jp/tools/print1/" />
<meta property="og:site_name" content="Print1" />
<meta property="og:description" content="縦に長い画像を1枚で印刷する際に自動分割してレイアウトするツール/運営:株式会社ビーワークス WEB制作部/紹介元:WEBNAUT" />
<meta property="og:image" content="https://webnaut.jp/tools/print1/assets/img/og.png" />
</head>
<body>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-N22MPZ"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-N22MPZ');</script>
<!-- End Google Tag Manager -->
<a class="github" href="https://github.com/WebNAUT-BW/tools-print1" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
<div class="l-container">
<div class="l-controller" ng-app="print1" ng-controller="print1Controller">
<div class="l-controller-inner">
<div class="row">
<div class="col-sm-2 row-control-btn">
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<button id="btn-print" type="button" class="btn btn-default" ng-click="wPrint()"><span class="glyphicon glyphicon-print" aria-hidden="true"></span></button>
<button id="btn-clear" type="button" class="btn btn-default" ng-click="clear()"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<button id="btn-info" type="button" class="btn btn-default" ng-click="info()"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span></button>
</div>
</div>
<div class="col-sm-2 row-control-slider">
<div id="slider"></div>
</div>
<div class="col-sm-1 row-control-form">
<form class="form-horizontal" role="form">
<input id="inputItemWidth" class="form-control" type="text" ng-model="itemWidth" ng-change="changeItemWidth(itemWidth)" placeholder="Enter a item width">
</form>
</div>
<div class="col-sm-3 row-control-sns">
<ul id="sns">
<li class="sns-twitter">
<a href="https://twitter.com/share" data-text="縦に長い画像を1枚で印刷する際に自動分割してレイアウトするツール | WebNAUT" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</li>
<li class="sns-facebook">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwebnaut.jp%2Ftools%2Fprint1%2F&width&layout=button_count&action=like&show_faces=false&share=false&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe>
</li>
<li class="sns-hatena">
<a href="https://webnaut.jp/tools/print1/" class="hatena-bookmark-button" data-hatena-bookmark-title="縦に長い画像を1枚で印刷する際に自動分割してレイアウトするツール「Print1」" data-hatena-bookmark-layout="standard-balloon" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</li>
</ul>
</div>
<div class="col-sm-4 row-control-copyright">
<p id="copyright" class="text-right"><a href="https://webnaut.jp/" target="_blank">WebNAUT by beeworks</a><br>Copyright (c) Beeworks Co., Ltd All rights reserved</p>
</div>
</div>
</div>
<div class="bnrBox">
<a href="https://beeworks.co.jp/lp/web2017/" target="_blank">
<div class="bnrBox_bwOrder">
<div class="bnrBox_bwOrder__txt">ビジネスシーンで成果に繋がる <span class="bnrBox_bwOrder_st">WEB制作<span class="bnrBox_bwOrder_sb">なら</span>ビーワークス</span></div>
<div class="bnrBox_bwOrder__link"><img src="assets/img/bnr_bwOrder.jpg" alt="ご相談・お見積もりはこちら" width="288"></div>
</div>
</a>
</div>
</div>
<div id="printArea" ondragover="onDragOver(event)" data-colnum="">
<p id="beforeMessage">Drop Image File Here.</p>
<img src="" alt="" class="disp">
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">このサイトについて</h4>
</div>
<div class="modal-body">
<p>縦に長い画像を1枚で印刷する際に自動分割してレイアウトするツールです。※2015.11.10 分割表示されないエラーに対処しました</p>
<h3>使い方</h3>
<ul>
<li>画面の赤い点線で囲われたエリア部分に画像ファイルをドラッグ&ドロップすると、画像の長さを計算して自動的に折り返すように複製して配置されます。</li>
<li>スライダーまたは数値を入力して画像の幅を調整、また画像の位置を個別にドラッグで動かして調整してください。</li>
<li>画面左下の印刷ボタン、またはブラウザのメニューから印刷を行ってください。</li>
<li>画面左下の×ボタンはページをリロードして表示をクリアします。その際、画像幅の設定値は保存されます。</li>
</ul>
<h3>対象ブラウザ</h3>
<p>Google Chrome 最新版</p>
<h3>対応画像形式</h3>
<p>jpg,gif,png,svg</p>
<h3>紹介記事</h3>
<p><a href="https://webnaut.jp/markup/1125.html">WebNAUT</a></p>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="assets/js/jquery-1.9.1.min.js"></script>
<script src="assets/js/jquery-ui.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/angular.min.js"></script>
<script src="assets/js/util.js"></script>
</body>
</html>