質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

2回答

1526閲覧

少し複雑なhtml出力をしたい

fuji_fe

総合スコア93

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2016/06/16 01:01

編集2016/06/16 01:22

ディレクトリのツリーを作っています。

配列の作成まではできたのですが、
任意のhtmlで出力するのが難しくjsでDOMを整形する形になってしまいました。
どのようにすれば「理想」のHTML出力が可能でしょうか?

ご教示お願い致します。

###理想

php

1Array 2( 3 [aaaa] => Array 4 ( 5 [bbbb] => Array 6 ( 7 [0] => a.php 8 [1] => b.php 9 ) 10 11 [cccc] => Array 12 ( 13 [dddd] => Array 14 ( 15 [0] => a.php 16 [1] => b.php 17 ) 18 19 [0] => a.php 20 [1] => b.php 21 ) 22 23 [0] => a.php 24 [1] => b.php 25 ) 26 27 [fuga] => Array 28 ( 29 [0] => a.php 30 [1] => b.php 31 [2] => c.php 32 ) 33 34 [hoge] => Array 35 ( 36 [0] => a.php 37 [1] => b.php 38 [2] => c.php 39 ) 40 41 [z_root] => Array 42 ( 43 [0] => index.php 44 ) 45)

▽出力

html

1<div class="folder"> 2 <div data-type="folder">aaaa</div> 3 <div class="wrap"> 4 <div class="folder"> 5 <div data-type="folder">bbbb</div> 6 <div class="wrap"> 7 <div data-type="file">a.php</div> 8 <div data-type="file">b.php</div> 9 </div><!-- /.wrap --> 10 </div> 11 <div class="folder"> 12 <div data-type="folder">cccc</div> 13 <div class="wrap"> 14 <div class="folder"> 15 <div data-type="folder">dddd</div> 16 <div class="wrap"> 17 <div data-type="file">a.php</div> 18 <div data-type="file">b.php</div> 19 </div><!-- /.wrap --> 20 </div> 21 <div data-type="file">a.php</div> 22 <div data-type="file">b.php</div> 23 </div><!-- /.wrap --> 24 </div> 25 <div data-type="file">a.php</div> 26 <div data-type="file">b.php</div> 27 </div><!-- /.wrap --> 28</div> 29<div class="folder"> 30 <div data-type="folder">hoge</div> 31 <div class="wrap"> 32 <div data-type="file">a.php</div> 33 <div data-type="file">b.php</div> 34 <div data-type="file">c.php</div> 35 </div><!-- /.wrap --> 36</div> 37<div class="folder"> 38 <div data-type="folder">fuga</div> 39 <div class="wrap"> 40 <div data-type="file">a.php</div> 41 <div data-type="file">b.php</div> 42 <div data-type="file">c.php</div> 43 </div><!-- /.wrap --> 44</div> 45<div data-type="file">index.php</div>

###現実

php

1//ファイルリストを出力 2function eachFile($arr,$arg = '') { 3 foreach($arr as $key => $value) { 4 5 // 値の設定 6 $path = $value; 7 if(is_array($value)) { 8 $path = $key; 9 } 10 $type = is_array($value) ? 'folder' : 'file'; 11 12 // キーの設定 13 if(is_numeric($key)) { 14 $group = $arg; 15 }else { 16 $group = $arg.' '.$key; 17 } 18 if($arg == '') { 19 $group = ltrim($group); 20 } 21 22 if(is_array($value) && $key == 'z_root') { 23 24 }else { 25 echo "\t\t\t<div data-type=\"$type\" class=\"$group\">$path</div>\n"; 26 } 27 28 if(is_array($value)) { 29 eachFile($value,$group); 30 } 31 } 32} 33 34eachFile($fileArr);//$fileArrに最上部記載のphpが格納されているものとする

html

1<div data-type="folder" class="aaaa">aaaa</div> 2<div data-type="folder" class="aaaa bbbb">bbbb</div> 3<div data-type="file" class="aaaa bbbb">a.php</div> 4<div data-type="file" class="aaaa bbbb">b.php</div> 5<div data-type="folder" class="aaaa cccc">cccc</div> 6<div data-type="folder" class="aaaa cccc dddd">dddd</div> 7<div data-type="file" class="aaaa cccc dddd">a.php</div> 8<div data-type="file" class="aaaa cccc dddd">b.php</div> 9<div data-type="file" class="aaaa cccc">a.php</div> 10<div data-type="file" class="aaaa cccc">b.php</div> 11<div data-type="file" class="aaaa">a.php</div> 12<div data-type="file" class="aaaa">b.php</div> 13<div data-type="folder" class="fuga">fuga</div> 14<div data-type="file" class="fuga">a.php</div> 15<div data-type="file" class="fuga">b.php</div> 16<div data-type="file" class="fuga">c.php</div> 17<div data-type="folder" class="hoge">hoge</div> 18<div data-type="file" class="hoge">a.php</div> 19<div data-type="file" class="hoge">b.php</div> 20<div data-type="file" class="hoge">c.php</div> 21<div data-type="file" class="z_root">index.php</div>

javascript

1var max_hie = 1; 2$('[data-type=folder]').each(function(){ 3 var classArr = $(this).attr('class').split(' '); 4 5 if(classArr.length > max_hie) { 6 max_hie = classArr.length; 7 } 8 9 if(classArr.length == 1) { 10 $(this).addClass('complete'); 11 $(this).nextAll('.'+classArr[0]).wrapAll('<div class="wrap"></div>'); 12 $(this).add($(this).next('.wrap')).wrapAll('<div class="folder"></div>') 13 } 14}); 15for(i=2;i<=max_hie;i++) { 16 $('[data-type=folder]').not('.complete').each(function(){ 17 var classArr = $(this).attr('class').split(' '); 18 if(classArr.length == i) { 19 $(this).addClass('complete'); 20 $(this).nextAll('.'+classArr[i - 1]).wrapAll('<div class="wrap"></div>'); 21 $(this).add($(this).next('.wrap')).wrapAll('<div class="folder"></div>') 22 } 23 }); 24}

※jsは仮の処理なので、ソースの汚さは無視してください

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/06/16 01:09

出力部分のPHPを質問文に追記いただいたほうが回答を得られやすいと思います。
fuji_fe

2016/06/16 01:23

見苦しいソースですが追記しました・・・!
guest

回答2

0

ベストアンサー

面倒で1回しかチェックしてませんが、こんな感じでしょうか。

1階層と2階層目以下で処理が異なるので1階層目は再帰処理しないほうがいいと思います。
理想のhtmlにclassが無いのに現実の方ではclassを設定しているようですが、どっちが正しいのでしょうか。

php

1$dom = array( 2 'aaaa'=>array( 3 'bbbb'=>array('a.php', 'b.php'), 4 'cccc'=>array( 5 'dddd'=>array('a.php', 'b.php'), 6 0=>'a.php', 7 1=>'b.php' 8 ), 9 0=>'a.php', 10 1=>'b.php' 11 ), 12 'fuga'=>array('a.php', 'b.php', 'c.php'), 13 'hoge'=>array('a.php', 'b.php', 'c.php'), 14 'z_root'=>'index.php', 15); 16 17function make($arr){ 18 $tmpHtml = ''; 19 foreach ($arr as $key => $val){ 20 if(!is_array($val)){ 21 $tmpHtml .= '<div data-type="file">'. $val. '</div>'; 22 } else { 23 $tmpHtml .= '<div class="folder"><div data-type="folder">'. $key. '</div><div class="wrap">'; 24 $tmpHtml .= make($val); 25 $tmpHtml .= '</div></div>'; 26 } 27 } 28 return $tmpHtml; 29} 30 31$html = ''; 32foreach($dom as $key => $val){ 33 if(!is_array($val)){ 34 $html .= '<div data-type="file">'. $val. '</div>'. "\n"; 35 } else { 36 $html .= '<div class="folder"><div data-type="folder">'. $key. '</div><div class="wrap">'; 37 $html .= make($val); 38 $html .= '</div></div>'; 39 } 40} 41echo $html;

もし上記の$domの配列構造が間違ってる場合は質問文にserialize()したものを追記されたほうが回答しやすいと思います。

投稿2016/06/16 01:48

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

fuji_fe

2016/06/16 02:26

回答ありがとうございます! 大変参考になりました。 classは付与しているのが正しいです。 申し訳ございません><
退会済みユーザー

退会済みユーザー

2016/06/16 02:40

classに関してですが"aaaa bbbb cccc"とする必要があるケースがピンとこないのですが <div class="folder aaaa"> <div class="folder bbb"> としてあげれば入れ子になっているので`.aaaa .cccc`のような子孫セレクタで要件をクリア出来たりしませんか? (質問文のJavaScriptを見る限りは整形用なのでclassの指定が不要なようにも見受けられrますが・・・)
guest

0

なぜかJavaScriptで書いてしまいましたが、よかったのでしょうか・・・
ところどころ省略している気もします。

javascript

1 <script> 2 var data = { 3 aaaa: { 4 bbbb: [ 5 'a.php', 6 'b.php' 7 ], 8 cccc: { 9 dddd: [ 10 'a.php', 11 'b.php' 12 ] 13 } 14 }, 15 fuga: [ 16 'a.php', 17 'b.php', 18 'c.php' 19 ] 20 }; 21 22 echo(data); 23 24 function echo(arr){ 25 if(arr instanceof Array){ 26 console.log('<div class="wrap">'); 27 var size = arr.length 28 for(var i=0; i<arr.length; i++ ){ 29 console.log('<div data-type="file">' + arr[i] + '</div>'); 30 } 31 console.log('</div>'); 32 }else{ 33 var size = Object.keys(arr).length; 34 for(var i=0; i<size; i++){ 35 console.log('<div class="folder">'); 36 console.log('<div data-type="folder">' + Object.keys(arr)[i] + '</div>'); 37 echo(arr[Object.keys(arr)[i]]); 38 console.log('</div>'); 39 } 40 } 41 } 42 43 </script>

投稿2016/06/16 02:19

munyagu

総合スコア479

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

fuji_fe

2016/06/16 02:28

回答ありがとうございます! jsの処理自体は問題無いのですが、今回はPHPで処理したかったので 次回以降jsで配列を処理する際の参考にさせて頂きます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問