画像処理を行うWEBサービス開発
自己紹介
初めましてだと思います。 グレープ粗茶(twitter)という者です。四月から大学二年のものです。
今回初めてweb開発を行いました。
作ったもの
令和元年の目標を、書初め的に文字を書いてそれをtwitterに投稿できるものです。
なぜつくったのか
僕が今回このサイトを作った理由は、春休みにphpを勉強したいと思っていたのですが、いまいちやる気がうまく出なかったためです。そこで、何か作ることを目標としてやる気を出させた結果です。
次に
このサイトを実現するのに必要な技術を考えることにしました。
必要な技術
などでした。
今回は時間の関係上、css の勉強を省くためにmateriad design bootstrap というフレームワークを用いることにした。
cssに関しては、春休み最後にに基本的な部分は勉強した。
htmlの基本構文などはネットである程度調べることで理解することができた。
基本を踏まえて、今回のサイトを実装する上で最も重要であるのは画像処理であった。
画像処理についてはここにまとめた。
[難しかった部分・未だ抱えるアルゴリズム的な欠陥]
[難しかった部分]
画像のデザインをすでに決めており、何も気にせずに文字を導入すると画像をスルーしてひたすら文字が入力されて行ってしまうことを知った。
この問題を解決するには。文字数がデザインの部分を超えそうになったら改行することを求めなくてはならない。今回の画像はFULLHDで実装しており、横の幅が1920pxである。
この白紙の白い部分の幅を1610pxぐらいであると想定した。
文字挿入のアルゴリズム
今回文字をデザインに挿入するにあたって、入力された文字列をすべて一文字ずつに配列に分解してから作業を行うことにした。その理由としては、
Imagick::queryFontMetrics
貼り付け元 <https://www.php.net/manual/ja/imagick.queryfontmetrics.php>
を用いるためである。
この返り値であるORIGINXを用いる。これは文字列の幅の値を示しいる。これで文字を一つ一つfor文で文字を挿入していき次文字を入力したら幅を超えるようであるなら、開業するようにした。
限界として、文字のフォントサイズを変更せずに文字を入力できるのは二行であることが分かった。 （それ以上入れると文字を開業して画面買いに文字が出て行ってしまう。）
このため、下にも幅を想定してそこを超えたら文字のフォントサイズを小さくなるように変更を加えた。
この変更を行うことによってアルゴリズム内に大きなwhile(1)で囲う必要が出てしまい、その場合の時間が多大にかかるようになってしまった。（欠陥）
今のところ、とりあえずこのサイトの改善は保留している
[改善案と反省]
現在のこの欠陥の解決策として、入力できる文字列を制限することを考えている。phpでも実装は可能であるが
できればjavascript,を用いて実装したいと思っている。
また、扱う画像が大きすぎたと後に後悔した。なぜfullHDにしてしまったのだろうか。HDでも十分でしょうに。。。。。
